Section

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

Default

px 

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

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.

  • l-section__header--split-space
  • l-section__footer--split-space
px 

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

Documentation

Modifiers

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