Inside .body-text elements, the content will be treated as body text.

Content Levels

Four heading levels are supported.

Different heading levels divides the text into different parts.

When the heading stylings are evaluated, it’s important the headings are not “hanging”.

The content levels are:

The implicit main level
Sections
Subsections
Topics

Content levels

Sections

Sections have a level 2 heading. To give an h element a level 2 styling outside of a .body-text element, give it the class heading-2.

Subsections

The level below sections are sub sections. They have a level 3 heading. To give an h element a level 3 styling outside of a .body-text element, give it the class heading-3.

Topics

The level below sub sections are topics. They have a level 4 heading. To give an h element a level 4 styling outside of a .body-text element, give it the class heading-4.

<div class="body-text">
    <h2 id="sections">Sections</h2>
    <p><em>Sections</em> have a level 2 heading. To give an <code>h</code> element a level 2 styling outside of a <code>.body-text</code> element, give it the class <code>heading-2</code>.</p>
    <h3 id="subsections">Subsections</h3>
    <p>The level below sections are <em>sub sections</em>. They have a level 3 heading. To give an <code>h</code> element a level 3 styling outside of a <code>.body-text</code> element, give it the class <code>heading-3</code>.</p>
    <h4 id="topics">Topics</h4>
    <p>The level below sub sections are <em>topics</em>. They have a level 4 heading. To give an <code>h</code> element a level 4 styling outside of a <code>.body-text</code> element, give it the class <code>heading-4</code>.</p>
</div>

Sub-Headings

Sub-heading

Många söker hjälp

– Når du fram?

Jag vill hjälpa dig som driver en privat mottagning som psykolog eller psykoterapeut att nå nya klienter.

Därför har jag, tillsammans med legitimerade psykologer, utvecklat en tjänst för att skapa prisvärda hemsidor.

<div class="body-text">
    <h1 id="många-söker-hjälp">Många söker hjälp</h1>
    <p class="sub-heading">– Når du fram?</p>
    <p>Jag vill hjälpa dig som driver en privat mottagning som psykolog eller psykoterapeut att nå nya klienter.</p>
    <p>Därför har jag, tillsammans med legitimerade psykologer, utvecklat en tjänst för att skapa prisvärda hemsidor.</p>
</div>

Pre-Headings

Pre-heading

Hemsidor för psykologer

Många söker hjälp

Jag vill hjälpa dig som driver en privat mottagning som psykolog eller psykoterapeut att nå nya klienter.

Därför har jag, tillsammans med legitimerade psykologer, utvecklat en tjänst för att skapa prisvärda hemsidor.

<div class="body-text">
    <p class="pre-heading">Hemsidor för psykologer</p>
    <h1 id="många-söker-hjälp-1">Många söker hjälp</h1>
    <p>Jag vill hjälpa dig som driver en privat mottagning som psykolog eller psykoterapeut att nå nya klienter.</p>
    <p>Därför har jag, tillsammans med legitimerade psykologer, utvecklat en tjänst för att skapa prisvärda hemsidor.</p>
</div>

Inline elements

There are some inline elements, like links, emphasized, and strong elements.

Lists

Two types of lists are supported: ordered (numbered) and unordered (bulleted) lists.

Lists

The lists are indented by default.

item one
item two
item three

item a
item b
item c

<div class="body-text">
    <p>The lists are indented by default.</p>
    <ol>
        <li>item one</li>
        <li>item two</li>
        <li>item three</li>
    </ol>
    <ul>
        <li>item a</li>
        <li>item b</li>
        <li>item c</li>
    </ul>
</div>

Images and divs

Images can be placed in body-text. They do not float, we handle this kind of thing with section layouts. But their margins are set to fit the body content. This is also true for div elements.

Divs

Lions