Stack Content

View source Report an issue Edit this page

A layout component to provide internal spacing between content components

StackContent applies an opinionated set of spacing rules around our content components, Heading, Text, List, Divider and Image. It also applies a maximum width to Heading, Text and List to ensure optimal line length is preserved for readability.

<StackContent>
  <Heading size="sm">This is an example of how the content is spaced</Heading>
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Text>
  <List>
    <List.Item>
      Ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </List.Item>
    <List.Item>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur.
    </List.Item>
  </List>
  <Divider />
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </Text>
</StackContent>

API Reference

PropTypeDefaultRequired
cssCSSProperties

-

-