grommet
docs
components

Card

a card is a container of information that provides access to more details

Storybook
Github

Using Grommet for HPE?See Card examples and guidance.

React/DOM Properties

At its core, the Card component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

card.body

Any valid Box prop for the CardBody.

object
 {}

card.container

Any valid Box prop for the Card container.

object
{ round: "small", elevation: "small" }

card.footer

Any valid Box prop for the CardFooter.

object
{ background: "background-contrast" }

card.header

Any valid Box prop for the CardHeader.

object
 {}

card.hover.container.elevation

The elevation to apply to a Card with 'onClick' when it is hovered.

string
"small"

card.hover.container.extend

Any additional style for the card container.

string

Any CSS.

css`color: 'blue'`
function
(props) => {}

CardHeader

the card header

CardHeader is a Header. You can customize it using the properties available in Header.

    React/DOM Properties

    At its core, the CardHeader component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

    Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

    CardBody

    the body of the card, mostly used for placing content

    CardBody is a Box with the following properties preset. You can customize it using the properties available in Box.

    React/DOM Properties

    At its core, the CardBody component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

    Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

    CardFooter

    the card footer

    CardFooter is a Footer. You can customize it using the properties available in Footer.

      React/DOM Properties

      At its core, the CardFooter component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

      Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.