Cards

Cards are a common minimalistic design tool used to segregate sections of your content.

Basic Card

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

<Card>
 <Card.Content>Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</Card.Content>
</Card>

Heading

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

<Card>
 <Card.Divider heading>Heading</Card.Divider>
 <Card.Content>Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</Card.Content>
</Card>

Dividers

Header

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Divider

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Footer
<Card>
  <Card.Divider heading>Heading</Card.Divider>
  <Card.Content>Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</Card.Content>
  <Card.Divider heading>Heading</Card.Divider>
  <Card.Content>Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</Card.Content>
</Card>

Colours

Add --primary, --secondary, --successful or --error modifier to the card to change the colour of the dividers.

Header

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Divider

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Footer
<Card primary>
  <Card.Divider heading>Heading</Card.Divider>
  <Card.Content>Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</Card.Content>
  <Card.Divider heading>Heading</Card.Divider>
  <Card.Content>Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</Card.Content>
  <Card.Divider footer>Heading</Card.Divider>
</Card>

With Shadows

High

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

<Card shadow="high">
  <Card.Divider heading>Heading</Card.Divider>
  <Card.Content>Content</Card.Content>
</Card>
Higher

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

<Card shadow="higher">
  <Card.Divider heading>Heading</Card.Divider>
  <Card.Content>Content</Card.Content>
</Card>
Highest

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

<Card shadow="highest">
   <Card.Divider heading>Heading</Card.Divider>
   <Card.Content>Content</Card.Content>
</Card>

Card Items

Item 1
Item 2
Divider
Item 3
Item 4
<Card primary>
  <Card.Divider heading>Items
  <Card.Item>Item1
  <Card.Item>Item2
  <Card.Divider heading>Heading</Card.Divider>
  <Card.Item>Item3
  <Card.Item>Item4
</Card>