---
title: Documentation Components
---
<h1 class="docs--page-header">Documentation Components</h1>
<p class="docs--page-description">
    We have created a selection of documentation specific components to help you create beautiful documentation pages for
    our components. Note that all documentation components are prefixed with <code>docs--</code> to prevent style clashes.
</p>

<h2 class="docs--section-header">
    Page Header
</h2>
<p class="docs--section-description">Use this for the title of your page.</p>
<h1 class="docs--page-header">Lorem ipsum</h1>

<h2 class="docs--section-header">
    Page Description
</h2>
<p class="docs--section-description">Use this to give an introduction to your page.</p>
<p class="docs--page-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid animi blanditiis delectus exercitationem, libero nobis officiis quis similique voluptate! Architecto itaque modi nulla optio quibusdam, sunt ut? Eius, expedita.</p>

<h2 class="docs--section-header">
    Section Headers
</h2>
<p class="docs--section-description">
    Split your documentation into sections for better readability and navigation.
</p>
<h2 class="docs--section-header">Lorem ipsum</h2>

<h2 class="docs--section-header">
    Section descriptions
</h2>
<p class="docs--section-description">
    Describe each section of your documentation. Give indication why, when and how to use a specific component or option.
</p>
<p class="docs--section-description">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut enim et fuga illo laboriosam quidem vero voluptates. Labore nostrum numquam officiis perferendis placeat provident reiciendis sint ullam vero, vitae.
</p>

<h2 class="docs--section-header">
    Configuration Option tables
</h2>
<p class="docs--section-description">
    More often than not, your components will have some kind of configration options, be it scss or javascript or data-attributes.
    Give your fellow developers an easy overview of the options, their default values and a short description.
</p>
<table class="docs--configuration-options">
    <thead>
        <tr>
            <th>
                Variable
            </th>
            <th>
                Default
            </th>
            <th>
                Description
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code>$some-sass-variable</code>
            </td>
            <td>
                <code>tomato</code>
            </td>
            <td>
                What a beautiful color!
            </td>
        </tr>
        <tr>
            <td>
                <code>someJavascriptOption</code>
            </td>
            <td>
                <code>0</code>
            </td>
            <td>
                Why use 1 when you can use 0
            </td>
        </tr>
    </tbody>
</table>