Card

Cards are used to frame a group of related content and set it apart from other content on the page.

Props

className

String

Card

This is some card content

<Card>
  <div className="p-4">
    <BodyText>This is some card content</BodyText>
  </div>
</Card><Card>
  <div className="p-4">
    <BodyText>This is some card content</BodyText>
  </div>
</Card>

Card.Bordered

Note: borderPosition accepts only one value

Note: List of supported colors

DON'T provide class that contains border word (for example border-gold) unless you intend to make whole border in that color (see last example).

All you need is color name: borderColor="gold". Otherwise it will overwrite the border styles.

This is some left bordered card content (default)

This is some top bordered card content

This is some right bordered card content

This is some bottom bordered card content

This is some left bordered card content with border-gold class

<Card.Bordered>
  <div className="p-4">
    <BodyText>This is some left bordered card content (default)</BodyText>
  </div>
</Card.Bordered>
<br />
<Card.Bordered borderPosition="top" borderColor="orange">
  <div className="p-4">
    <BodyText>This is some top bordered card content</BodyText>
  </div>
</Card.Bordered>
<br />
<Card.Bordered borderPosition="right" borderColor="green">
  <div className="p-4">
    <BodyText>This is some right bordered card content</BodyText>
  </div>
</Card.Bordered>
<br />
<Card.Bordered borderPosition="bottom" borderColor="blue">
  <div className="p-4">
    <BodyText>This is some bottom bordered card content</BodyText>
  </div>
</Card.Bordered>
<br />
<Card.Bordered
  borderPosition="left"
  borderColor="gold"
  className="border-gold"
>
  <div className="p-4">
    <BodyText>
      This is some left bordered card content with border-gold class
    </BodyText>
  </div>
</Card.Bordered><Card.Bordered>
  <div className="p-4">
    <BodyText>This is some left bordered card content (default)</BodyText>
  </div>
</Card.Bordered>
<br />
<Card.Bordered borderPosition="top" borderColor="orange">
  <div className="p-4">
    <BodyText>This is some top bordered card content</BodyText>
  </div>
</Card.Bordered>
<br />
<Card.Bordered borderPosition="right" borderColor="green">
  <div className="p-4">
    <BodyText>This is some right bordered card content</BodyText>
  </div>
</Card.Bordered>
<br />
<Card.Bordered borderPosition="bottom" borderColor="blue">
  <div className="p-4">
    <BodyText>This is some bottom bordered card content</BodyText>
  </div>
</Card.Bordered>
<br />
<Card.Bordered
  borderPosition="left"
  borderColor="gold"
  className="border-gold"
>
  <div className="p-4">
    <BodyText>
      This is some left bordered card content with border-gold class
    </BodyText>
  </div>
</Card.Bordered>

Card

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Card

Card.Bordered

Props