The section layout is used to divide the main layout within different parts.
Each section can have a header, content and a footer. This is the main element
to divide a page in parts and should be used on top level within the <main>.
This is mainly combined with l-container. l-container is place within l-section
so that background-colors are not within the container range.
IMPORTANT TO NOTE is that the name l-section does not mean this can only be
applied on <section>. The layout can also be placed on <div> and does not
require a header. Only use <section> when there is a header present within
the container-block. Otherwise use <div>.
<section class="l-section">
l-section
<header class="l-section__header">
l-section__header
<h2 class="l-section__title">l-section__title</h2>
</header>
<div class="l-section__content">
l-section__content
</div>
<footer class="l-section__footer">
l-section__footer
</footer>
</section>
Split child elements of l-section in two parts that are equal of size and place them next to each other, vertically aligned to the center.
<section class="l-section">
l-section
<header class="l-section__header l-section__header--split-space">
<h2 class="l-section__title">l-section__title</h2>
<div class="l-section__actions">
l-section__actions
</div>
</header>
<div class="l-section__content">
l-section__content
</div>
<footer class="l-section__footer l-section__footer--split-space">
<p>l-section__footer</p>
<div class="l-section__actions">
l-section__actions
</div>
</footer>
</section>
l-section__header--split-space
Split the header in two parts that are equal of size and place them next to each other, vertically aligned to the center. This is usually applied when there is an action in the header present.
l-section__footer--split-space
Split the footer in two parts that are equal of size and place them next to each other, vertically aligned to the center.