Components

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Collect related content or tasks within a container.

Cards exist to group repeatable content and display it in a modular, easy-to-read way.

Web
React Native
Android
Apple
Other

Hudl Originals

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

Jan 26, 2019

<div style={{ width: '370px' }}>
  <Card media={<img src="https://va.hudl.com/perfcenter/10bc9651-a478-460e-bba8-c71ce9a446a8.480.jpg" />}>
    <Subhead className="uni-margin--one--top uni-margin--half--btm">Hudl Originals</Subhead>
    <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>

Props

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

media

node

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>

onHover

func

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.

onClick

func

Called when the card is clicked on.