Card | Mineral UI

Order of Sections

There is no "one true way" to lay out children in Card; it is flexible enough to accept different component arrangements. The one exception is CardFooter, which must be last in Card.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.

Card Footer

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.

Card Footer

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.

Card Footer

<DemoLayout>
  <Card>
    <CardTitle>Card Title</CardTitle>
    <CardImage src="/images/500x500.png" alt="gradient image" />
    <CardBlock>{loremIpsum}</CardBlock>
    <CardActions>
      <Button minimal>Button 1</Button>
      <Button primary>Button 2</Button>
    </CardActions>
    <CardFooter title="Card Footer" />
  </Card>

  <Card>
    <CardImage src="/images/500x500.png" alt="gradient image" />
    <CardTitle>Card Title</CardTitle>
    <CardBlock>{loremIpsum}</CardBlock>
    <CardActions>
      <Button minimal>Button 1</Button>
      <Button primary>Button 2</Button>
    </CardActions>
    <CardFooter title="Card Footer" />
  </Card>

  <Card>
    <CardTitle>Card Title</CardTitle>
    <CardBlock>{loremIpsum}</CardBlock>
    <CardImage src="/images/500x500.png" alt="gradient image" />
    <CardActions>
      <Button minimal>Button 1</Button>
      <Button primary>Button 2</Button>
    </CardActions>
    <CardFooter title="Card Footer" />
  </Card>
</DemoLayout>