The section
components are simple layout elements with responsive padding. They are best used as direct children of body
.
Section
A simple container to divide your page into sections, like the one youβre currently reading
Example
Section
A simple container to divide your page into sections, like the one you're currently reading.
HTML
<section class="section">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
</h2>
</section>
Sizes #
You can use the modifiers is-medium
and is-large
to change the spacing.
Example
Medium section
A simple container to divide your page into sections, like the one you're currently reading.
HTML
<section class="section is-medium">
<h1 class="title">Medium section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
</h2>
</section>
Example
Large section
A simple container to divide your page into sections, like the one you're currently reading.
HTML
<section class="section is-large">
<h1 class="title">Large section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
</h2>
</section>
Variables #
Name
Type
Value
Computed Value
Computed Type
$section-padding
size
3rem 1.5rem
$section-padding-desktop
size
3rem 3rem
$section-padding-medium
size
9rem 4.5rem
$section-padding-large
size
18rem 6rem
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub