Section

A simple container to divide your page into sections, like the one you’re currently reading

The section components are simple layout elements with responsive padding. They are best used as direct children of body.

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

返回头部

问题反馈
返回顶部