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.
BETA: The design is not 100% finalised and may change to be officially approved by UX through an RFC.
Accessibility
It uses a section element. Which allows you to add an aria-label or aria-labelledby to provide screen readers with landmarks.
Code Editor
<Layout.Card aria-labelledby="unique-id"> <Form.SubHeading id="unique-id" space={0}> Heading </Form.SubHeading> <P>Content inside a landmark ...</P> </Layout.Card>