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 ...
<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.
<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.
<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.
<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.
<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.
<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.
<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>