Card

This component is a container for content and actions. They make it easier for users to scan and read content.

Basic Usage


import { Card } from '@krakentech/coral';
 
<Card>Card content</Card>;

Card content

Full Usage


import { Card, CardHeader, CardImage, CardBody } from '@krakentech/coral';
 
<Card padding="none">
    <CardHeader title="Title" extra="Extra" />
    <CardImage>
        <img
            src="https://octoenergy-production-media.s3.amazonaws.com/images/octopus-number-one-fan.width-1200.jpg"
            alt="Test"
        />
    </CardImage>
    <CardBody padding="medium">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio,
        voluptate sapiente quia molestiae ratione perspiciatis nihil, odit nemo
        illo veritatis possimus sint, corrupti labore harum fugiat tenetur.
        Optio, dolore voluptas! Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Optio, voluptate sapiente quia molestiae ratione
        perspiciatis nihil, odit nemo illo veritatis possimus sint, corrupti
        labore harum fugiat tenetur. Optio, dolore voluptas!
    </CardBody>
</Card>;

Title

Extra

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, voluptate sapiente quia molestiae ratione perspiciatis nihil, odit nemo illo veritatis possimus sint, corrupti labore harum fugiat tenetur. Optio, dolore voluptas! Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, voluptate sapiente quia molestiae ratione perspiciatis nihil, odit nemo illo veritatis possimus sint, corrupti labore harum fugiat tenetur. Optio, dolore voluptas!

Properties

borderless


<Card borderless>Card content</Card>

Card content

fullHeight


<div style={{ height: 140 }}>
    <Card fullHeight>Card content</Card>
</div>

Card content

padding


<Card padding="small">Card content</Card>

Card content

overflow

The overflow prop is used to control the overflow behaviour of the card. The default value is visible. This is used to keep content within the boundaries of the Card.


<Card padding="none" overflow="hidden">
    <CardBody padding="medium">
        <Typography>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio,
            voluptate sapiente quia molestiae ratione perspiciatis nihil, odit
            nemo illo veritatis possimus sint, corrupti labore harum fugiat
            tenetur. Optio, dolore voluptas! Lorem ipsum dolor sit amet
            consectetur adipisicing elit. Optio, voluptate sapiente quia
            molestiae ratione perspiciatis nihil, odit nemo illo veritatis
            possimus sint, corrupti labore harum fugiat tenetur. Optio, dolore
            voluptas!
        </Typography>
    </CardBody>
    <Container theme="base100" padding="lg">
        <Typography color="base500">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio,
            voluptate sapiente quia molestiae ratione perspiciatis nihil, odit
            nemo illo veritatis possimus sint, corrupti labore harum fugiat
            tenetur. Optio, dolore voluptas! Lorem ipsum dolor sit amet
            consectetur adipisicing elit. Optio, voluptate sapiente quia
            molestiae ratione perspiciatis nihil, odit nemo illo veritatis
            possimus sint, corrupti labore harum fugiat tenetur. Optio, dolore
            voluptas!
        </Typography>
    </Container>
</Card>

theme


<Card theme="base900" borderless>Base 900</Card>
<Card theme="base100" borderless>Base 100</Card>
<Card theme="base500" borderless>Base 500</Card>
<Card theme="secondary900" borderless>Secondary 900</Card>
<Card theme="tertiary100" borderless>Tertiary 100</Card>

Base 900

Base 100

Base 500

Secondary 900

Tertiary 100

Responsiveness


<Card borderless={{ base: true, md: false }}>Card content</Card>

Card content

Full API

Name	Type	Default
`children`	`ReactNode`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`borderless`	`ResponsiveVariant<boolean>`
`fullWidth`	`ResponsiveVariant<boolean>`
`fullHeight`	`ResponsiveVariant<boolean>`
`padding`	`ResponsiveVariant<"none" \| "xsmall" \| "small" \| "medium" \| "large">`
`overflow`	ResponsiveVariant<ConditionalValue<WithEscapeHatch<OnlyKnown<"overflow", `var(--${string})` \| Overflow \| readonly string[] \| undefined>>> \| undefined>
`theme`	`ResponsiveVariant<"base900" \| "base100" \| "base500" \| "secondary900" \| "tertiary100">`
`ref`	`Ref<HTMLDivElement> \| undefined` Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`key`	`Key \| null \| undefined`

Design

Good to know

Choose a card to make information stand out from other body text and break it into bitesize sections. A card can contain anything from text to images, headlines, buttons and so on.

What are the differences between all the cards?

The main difference is colour. And with or without borders.

When to use each colour and/or style?

Siphon (dark): Primary, should be used on Hemocyanin background. Can be used with and without a border.
Hemocyanin (mid): Secondary, should be used on Siphon background. Can be used with and without border.
Blueberry (midLight): Tertiary. Without border offers better contrast.
Ice (light): Only to be used for payments. White is proven to produce more trust when inputing payment details. It shouldn’t be used elsewhere as it is less indicative of our brand.

Customisation

Our card component has so many variations you can play with. Our components default with all properties turned on, however you can choose to toggle on and off the following:

A border
An image
A button

You can also customise colour and padding sizes.

Component breakdown

Corner radius: 12px
Border: 2px
Border colour: Ink
Small: Item padding: 24px | Horizontal padding: 20px | Vertical padding: 16px
Medium (Default): Item padding: 24px | Horizontal padding: 28px | Vertical padding: 32px
Large: Item padding: 24px | Horizontal padding: 36px | Vertical padding: 40px