Skip to main content

Action Card

An action card is used as a large call to action.

http://localhost:3000
<Box css={{ maxWidth: 400 }}>
  <ActionCard href="#">
    <ActionCardImage size="large" src="https://picsum.photos/600/400" />
    <ActionCardHeader>Title</ActionCardHeader>
    <ActionCardBody>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    </ActionCardBody>
  </ActionCard>
</Box>

Usage​

Small Image​

The size of the image can be made to be smaller for dense layouts by sitting the size prop on the ActionCardImage component to small.

http://localhost:3000
<Box css={{ maxWidth: 400 }}>
  <ActionCard href="#">
    <ActionCardImage size="small" src="https://picsum.photos/600/400" />
    <ActionCardHeader>Title</ActionCardHeader>
    <ActionCardBody>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    </ActionCardBody>
  </ActionCard>
</Box>

Without Body​

An action card can be rendered without a body component.

http://localhost:3000
<Box css={{ maxWidth: 400 }}>
  <ActionCard href="#">
    <ActionCardImage size="small" src="https://picsum.photos/600/400" />
    <ActionCardHeader>Title</ActionCardHeader>
  </ActionCard>
</Box>

Props​

ActionCard​

as?The root element to be rendered

ActionCardBody​

as?The root element to be rendered

ActionCardHeader​

as?The root element to be rendered

ActionCardImage​

as?The root element to be rendered