Section

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

Use sections as direct children of body.

<body>
    <section class="section">
        <div class="container">
            <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>
        </div>
    </section>
</body>

You can use the modifiers is-medium and is-large to change the spacing.

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name
Type
Default
$section-paddingsize3rem 1.5rem
$section-padding-mediumsize9rem 1.5rem
$section-padding-largesize18rem 1.5rem