Shown at the top of the card. Can be any combination of elements, but note that spacing is taken care of for you.

Can only contain actions the user can take on the card. Each action has the following shape:

• label (string) - the text describing the action
• icon (string) - name of a Uniform icon
• disabled (bool) - determines whether the action is disabled
• actionRef (func) - a ref to the action
• qaId (string) - a unique string to control this action in automated tests
• onClick (func) - responds to the action being clicked

Shown at the top of the card above the header in full bleed. Can be any combination of elements, but note that spacing is taken care of for you. If you need any media in the body of your card, you can use the CardMedia component to handle the image filling properly like so:

Hudl Originals

The only thing that matters is that you outwork every single person.

Jan 26, 2019

<div style={{ width: '370px' }}>
  <Card 
    header={
      <Subhead className="uni-margin--one--btm">Hudl Originals</Subhead>
    }>
    <CardMedia>
      <img src="https://va.hudl.com/perfcenter/10bc9651-a478-460e-bba8-c71ce9a446a8.480.jpg" />
    </CardMedia>
    <Text className="uni-margin--one--btm">
      The only thing that matters is that you outwork every single person.
    </Text>
    <Text level="small" color="nonessential">
      Jan 26, 2019
    </Text>
  </Card>
</div>

Called when the card is hovered over. Useful for if you have something like a SelectMark that you want to show the hover state for as well. Note that hover styling is taken care of for you.

Called when the card is clicked on.