Skip to content

Section

Description

Layout.Section is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.

Accessibility

You may consider adding an aria-label or aria-labelledby to provide screen readers with landmarks.

Main heading

Content inside a landmark ...

Code Editor
<Layout.Section aria-labelledby="unique-id">
  <Layout.MainHeading id="unique-id">Main heading</Layout.MainHeading>
  <Layout.Card>
    <P>Content inside a landmark ...</P>
  </Layout.Card>
</Layout.Section>

Demos

Text only

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitae justo magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulum tempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravida neque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.

Code Editor
<Layout.Section>
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
    pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.
    Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitae
    justo magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulum
    tempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravida
    neque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.
  </P>
</Layout.Section>

With paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitae justo magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulum tempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravida neque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.

Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae metus. Fusce volutpat risus vitae lectus elementum, sed facilisis augue dignissim. Donec accumsan, purus commodo bibendum finibus, lacus leo lobortis lorem, maximus posuere mi justo et ipsum. Phasellus ut nulla eu mi placerat posuere at vel elit. Suspendisse facilisis mi eu sem eleifend, eu eleifend nulla mattis. Sed iaculis, erat at posuere scelerisque, sapien metus ullamcorper tortor, et interdum augue tortor id eros.

Code Editor
<Layout.Section>
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
    pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.
    Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitae
    justo magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulum
    tempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravida
    neque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.
  </P>
  <P>
    Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae
    metus. Fusce volutpat risus vitae lectus elementum, sed facilisis augue
    dignissim. Donec accumsan, purus commodo bibendum finibus, lacus leo
    lobortis lorem, maximus posuere mi justo et ipsum. Phasellus ut nulla
    eu mi placerat posuere at vel elit. Suspendisse facilisis mi eu sem
    eleifend, eu eleifend nulla mattis. Sed iaculis, erat at posuere
    scelerisque, sapien metus ullamcorper tortor, et interdum augue tortor
    id eros.
  </P>
</Layout.Section>

With main heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitae justo magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulum tempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravida neque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.

Code Editor
<Layout.Section>
  <Layout.MainHeading>Heading</Layout.MainHeading>
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
    pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.
    Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitae
    justo magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulum
    tempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravida
    neque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.
  </P>
</Layout.Section>

With Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitae justo magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulum tempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravida neque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.

Code Editor
<Layout.Section>
  <Layout.Card>
    <P>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
      pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at
      tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum.
      Quisque vitae justo magna. Fusce hendrerit risus nec enim posuere
      commodo. Vestibulum tempus suscipit ullamcorper. Maecenas ac lobortis
      nibh, vitae gravida neque. Fusce imperdiet rhoncus diam, in tincidunt
      dolor consectetur ut.
    </P>
  </Layout.Card>
</Layout.Section>

With Card and heading

Main heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitae justo magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulum tempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravida neque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.

Code Editor
<Layout.Section>
  <Layout.MainHeading>Main heading</Layout.MainHeading>
  <Layout.Card>
    <P>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
      pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at
      tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum.
      Quisque vitae justo magna. Fusce hendrerit risus nec enim posuere
      commodo. Vestibulum tempus suscipit ullamcorper. Maecenas ac lobortis
      nibh, vitae gravida neque. Fusce imperdiet rhoncus diam, in tincidunt
      dolor consectetur ut.
    </P>
  </Layout.Card>
</Layout.Section>

With Card and headings

Main heading

Sub heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitae justo magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulum tempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravida neque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.

Code Editor
<Layout.Section>
  <Layout.MainHeading>Main heading</Layout.MainHeading>
  <Layout.SubHeading>Sub heading</Layout.SubHeading>
  <Layout.Card>
    <P>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
      pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at
      tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum.
      Quisque vitae justo magna. Fusce hendrerit risus nec enim posuere
      commodo. Vestibulum tempus suscipit ullamcorper. Maecenas ac lobortis
      nibh, vitae gravida neque. Fusce imperdiet rhoncus diam, in tincidunt
      dolor consectetur ut.
    </P>
  </Layout.Card>
</Layout.Section>