Basic Card

The most basic implementation of a card takes up the entire room available on the page. This is useful for dividing content on the page into easy to digest sections or calling attention to a specific grouping of content.

    <Card>Basic Card</Card>

Stack of Cards

Cards can easily be paired with the Stack to produce columns of Cards.

<Stack justifyContent="space-between">
    <Card>Basic Card</Card>
    <Card>Basic Card</Card>
    <Card>Basic Card</Card>
    <Card>Basic Card</Card>
</Stack>

Card Shape Variations

Cards can be modified to suit the needs of the page by adding one or more variations. These variations can be mixed together to make the Card fit the layout.

Elevations

Default

<Card>Flat Card</Card>

Raised

Adds a shadow, bringing prominence to a particular Card.

<Card elevation="raised">Raised Card</Card>

Removes Border

Use to de-emphasize content relative to other Cards.

<Card elevation="base">Base Card</Card>

Sharper Edges

By default, Cards have a rounded style. Sharper edges can also be applied, generally when a Card is nested in another Card to keep corners smooth.

<Card sharp>Sharp Card</Card>

Padding

Cards can have three different padding options: default, thin, and none.

Thin Cards

The space inside a Card section can be decreased, which is useful in denser page layouts.

<Card padding="thin">Thin Card</Card>

No Padding Cards

Useful when content inside needs to line up with external content, or to heavily customize inner Card content.

<Card padding="none">No Padding Card</Card>

Card example combining many variations

<Card elevation="raised" thin sharp>Raised, sharp, thin Card</Card>

Card States

Active

Shows that the content has been currently selected or enabled.

<Card status="active">Active Card</Card>

Error

Used to visually indicate that something is wrong with content inside. In general, error styling should be applied directly to content inside the Card, and only to the Card itself when it is directly an interactive piece. See the Togglebox as a practical example.

<Card status="error">Error Card</Card>

Placeholder Cards

Cards can be used to provide the user a clear indication of how to add content and how that content will affect the layout.

<Stack direction="column" spacing={3}>
    <Card light>First card</Card>
    <Card placeholder onClick={(evt) => console.log('Add Section', evt)}>
        <Button primary fill="subtle" inactive iconName="add_circle" iconPosition="right">
            Add Section
        </Button>
    </Card>
</Stack>

Clickable Card

Cards have a hover state automatically by adding an onClick prop. The hover state transitions the card to the next highest elevation as a click affordance. You can also set hoverable on the card. The active prop gives the card a blue outline indicating it has been selected.

const ClickableCardExample = ({active, ...props}) => {
    const [activeState, setActive] = React.useState(active);

    const toggleActive = () => setActive(!activeState);

    return (
        <Card
            onClick={toggleActive}
            active={activeState}
            {...props}
        />
    );
}
render (<ClickableCardExample>Clickable Card</ClickableCardExample>)
const ClickableCardExample = ({active, ...props}) => {
    const [activeState, setActive] = React.useState(active);

    const toggleActive = () => setActive(!activeState);

    return (
        <Card
            onClick={toggleActive}
            active={activeState}
            {...props}
        />
    );
}
render (<ClickableCardExample raised>Raised Clickable Card</ClickableCardExample>)

Card Sections

Card Sections can be used to divide cards into multiple sections. Card Sections can have different background colors to divide a card header from the body of the card, or add a call to action button

By default, the Card content is automatically wrapped with a Card.Section. If you manually include Card.Sections in the card, those will be used instead.

<Stack wrap="wrap">
    <Card style={{flex: 1, flexBasis: '32%'}} className="m-1"><Card.Section light>Light Card Section</Card.Section></Card>
    <Card style={{flex: 1, flexBasis: '32%'}} className="m-1"><Card.Section dark>Dark Card Section</Card.Section></Card>
    <Card style={{flex: 1, flexBasis: '32%'}} className="m-1"><Card.Section blue>Blue Card Section</Card.Section></Card>
    <Card style={{flex: 1, flexBasis: '32%'}} className="m-1"><Card.Section purple>Purple Card Section</Card.Section></Card>
    <Card style={{flex: 1, flexBasis: '32%'}} className="m-1"><Card.Section green>Green Card Section</Card.Section></Card>
    <Card style={{flex: 1, flexBasis: '32%'}} className="m-1"><Card.Section red>Red Card Section</Card.Section></Card>
    <Card style={{flex: 1, flexBasis: '32%'}} className="m-1"><Card.Section lightblue>Light-Blue Card Section</Card.Section></Card>
</Stack>

Examples

const ClickableCardExample = ({active, ...props}) => {
    const [activeState, setActive] = React.useState(active);

    const toggleActive = () => setActive(!activeState);

    return (
        <Card
            onClick={toggleActive}
            active={activeState}
            {...props}
        />
    );
}

render (
    <Card thin>
        <Card.Section dark className="h3">Headline</Card.Section>
        <Card.Section>
            <Stack justifyContent="space-around">
                <ClickableCardExample sharp raised>Option 1</ClickableCardExample>
                <ClickableCardExample sharp raised>Option 2</ClickableCardExample>
                <ClickableCardExample sharp raised>Option 3</ClickableCardExample>
            </Stack>
        </Card.Section>
        <Card.Section light className="c-neutral-90">Last updated 2 days ago</Card.Section>
    </Card>
)
<Stack spacing={4}>
    <Card hoverable>
        <Card.Section>
            <p className="h3 m-0 m-b-1">Card Section</p>
            <p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p>
        </Card.Section>
        <Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section>
    </Card>

    <Card hoverable>
        <Card.Section>
            <p className="h3 m-0 m-b-1">Card Section</p>
            <p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p>
        </Card.Section>
        <Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section>
    </Card>

    <Card hoverable>
        <Card.Section>
            <p className="h3 m-0 m-b-1">Card Section</p>
            <p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p>
        </Card.Section>
        <Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section>
    </Card>
</Stack>
<Stack spacing={2}>
    <Card thin raised>
        <Card.Section blue className="h3">Card Section</Card.Section>
        <Card.Section>
            <p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p>
        </Card.Section>
        <Card.Section className="fs-2">
            <ul style={{
                margin: 0,
                padding: '0 0 0 1em'
            }}>
                <li>Bullet Point #1</li>
                <li>Bullet Point #2</li>
                <li>Bullet Point #3</li>
                <li>Bullet Point #4</li>
            </ul>
        </Card.Section>
        <Card.Section><Button outline primary full>View</Button></Card.Section>
    </Card>

    <Card thin raised>
        <Card.Section blue className="h3">Card Section</Card.Section>
        <Card.Section>
            <p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p>
        </Card.Section>
        <Card.Section className="fs-2">
            <ul style={{
                margin: 0,
                padding: '0 0 0 1em'
            }}>
                <li>Bullet Point #1</li>
                <li>Bullet Point #2</li>
                <li>Bullet Point #3</li>
                <li>Bullet Point #4</li>
            </ul>
        </Card.Section>
        <Card.Section><Button outline primary full>View</Button></Card.Section>
    </Card>

    <Card thin raised>
        <Card.Section blue className="h3">Card Section</Card.Section>
        <Card.Section>
            <p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p>
        </Card.Section>
        <Card.Section className="fs-2">
            <ul style={{
                margin: 0,
                padding: '0 0 0 1em'
            }}>
                <li>Bullet Point #1</li>
                <li>Bullet Point #2</li>
                <li>Bullet Point #3</li>
                <li>Bullet Point #4</li>
            </ul>
        </Card.Section>
        <Card.Section><Button outline primary full>View</Button></Card.Section>
    </Card>
</Stack>
<Stack spacing={2} justifyContent="space-between">
    <Card className="of-hidden" style={{flexBasis: '33%'}}>
        <div style={{
            paddingBottom: '85%',
            backgroundImage: 'url(https://amp.businessinsider.com/images/585812ecdd08951a208b478e-1536-768.jpg)',
            backgroundPosition: 'center center',
            backgroundSize: 'cover',
            margin: '-24px',
            marginBottom: 0
        }} />
        <Card.Section style={{minHeight: 100}}>
            <Headline size="small" className="m-0">Grand Moff Tarkin</Headline>
            <BodyText size="small" className="m-0 m-t-1">Don't worry, we'll deal with your rebel friends soon enough!<br/><br/></BodyText>
        </Card.Section>
        <Card.Section light><Button outline primary full>View Character</Button></Card.Section>
    </Card>

    <Card className="of-hidden" style={{flexBasis: '33%'}}>
        <div style={{
            paddingBottom: '85%',
            backgroundImage: 'url(https://i0.wp.com/makingstarwars.net/wp-content/uploads/2017/11/IMG_6937.jpg?fit=1200%2C487&ssl=1)',
            backgroundPosition: 'center center',
            backgroundSize: 'cover',
            margin: '-24px',
            marginBottom: 0
        }} />
        <Card.Section style={{minHeight: 100}}>
            <Headline size="small" className="m-0">Rose Tico</Headline>
            <BodyText size="small" className="m-0 m-t-1">That's how we're gonna win. Not fighting what we hate, saving what we love.</BodyText>
        </Card.Section>
        <Card.Section light><Button outline primary full>View Character</Button></Card.Section>
    </Card>

    <Card className="of-hidden" style={{flexBasis: '33%'}}>
        <div style={{
            paddingBottom: '85%',
            backgroundImage: 'url(http://media.comicbook.com/2016/05/ig88-181139.jpg)',
            backgroundPosition: 'center center',
            backgroundSize: 'cover',
            margin: '-24px',
            marginBottom: 0
        }} />
        <Card.Section style={{minHeight: 100}}>
            <Headline size="small" className="m-0">IG-88</Headline>
            <BodyText size="small" className="m-0 m-t-1">*bzzz*<br />*whirrrrr*<br/>*zippp*</BodyText>
        </Card.Section>
        <Card.Section light><Button outline primary full>View Character</Button></Card.Section>
    </Card>
</Stack>

Importing

import { Card } from '@servicetitan/design-system';