#Card

#Description

Layout.Card is a block section element showing the white box with rounded gray borders, adding spacing automatically.

It uses Layout.FlexItem under the hood. When one of these props where given, stack, direction or spacing – the Layout.FlexContainer will be used.

#Accessibility

It uses a section element. Which allows you to add an aria-label or aria-labelledby to provide screen readers with landmarks.

<Layout.Card aria-labelledby="unique-id">
  <Layout.SubHeading id="unique-id" space={0}>
    Heading
  </Layout.SubHeading>
  <P>Content inside a landmark ...</P>
</Layout.Card>