Card

This component can be used as a baseline for making cards. A card is a flexible and extensible content container. When the card is selected, then its border is changed to give the user an indication of selection.

Props

Interactive Cards

In some UIs you might want the card to be interactive. For example clicking a card could navigate the user to a different page, open a detail view or trigger a selection. In such cases you can set the isInteractive prop to add hover styles to the card and supply event handlers to the card as props just like you would on an HTML div.

Example

<Layer.Base>
  <Spacings.Inset scale="big">
    <Card isHighlighted={true}>
      <Spacings.Inset>
        <Spacings.Stack scale="medium">
          <Text textStyle="headline4">Best Price</Text>
          <Text textStyle="bodyProlonged">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio
            repudiandae quidem fuga officia nihil repellat neque quod! Maxime,
            dolore quisquam sequi, beatae cupiditate nostrum cumque assumenda
            porro, error officiis enim.
          </Text>
        </Spacings.Stack>
      </Spacings.Inset>
    </Card>
    <br />
    <Card isHighlighted={false}>
      <Spacings.Inset>
        <Spacings.Stack scale="medium">
          <Text textStyle="headline4">Best Service</Text>
          <Text textStyle="bodyProlonged">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio
            repudiandae quidem fuga officia nihil repellat neque quod! Maxime,
            dolore quisquam sequi, beatae cupiditate nostrum cumque assumenda
            porro, error officiis enim.
          </Text>
        </Spacings.Stack>
      </Spacings.Inset>
    </Card>
  </Spacings.Inset>
</Layer.Base>