Skip to content

Sections and dividers

Headings establish the document structure. Dividers can mark a change of subject inside that structure, while footers collect secondary routes. Decorative surfaces should support those relationships without becoming another layer of navigation.

The examples use the shared theme and setup. Keep the .fltheme-components wrapper around Basecoat and du- component markup.

Aura · daisyUI

The aura is decorative. It does not indicate loading, success or selection. Keep a readable foreground and respect reduced-motion preferences when you add animation.

Vexy Lines

Line direction, density and rhythm.

HTML · compiled output
<div class="fltheme-components">
<div class="du-aura" style="padding:2rem;text-align:center"><strong>Vexy Lines</strong><p>Line direction, density and rhythm.</p></div>
</div>

Syntax and variants in daisyUI

Divider · daisyUI

A divider separates adjacent groups inside a component. For a change of subject in prose, use the semantic horizontal rule documented in Foundations instead.

Structure first
then detail
Decoration last
Measure
Rhythm
HTML · compiled output
<div class="fltheme-components">
<div class="fl-ui">
<div>Structure first</div>
<div class="du-divider">then detail</div>
<div>Decoration last</div>
</div>
<div class="fl-ui fl-ui-row">
<span>Measure</span>
<div class="du-divider du-divider-horizontal"></div>
<span>Rhythm</span>
</div>
</div>

Syntax and variants in daisyUI

The component footer groups links or ownership information inside a bounded specimen. This footer belongs to its enclosing example section; it is not the site’s global fontlab-footer. Give its navigation a specific name when another navigation region appears on the same page.

Syntax and variants in daisyUI

Contain a component sample

The optional .fl-ui helper supplies spacing for a small sample. It does not initialize controls or replace .fltheme-components.

This pattern uses the shared FontLab editorial styles described in Theme and setup.

Read the manual
HTML · compiled output
<div class="fltheme-components fl-ui">
<a class="du-btn" href="https://help.fontlab.com/fontlab/8/">Read the manual</a>
</div>
Markdown · authored source
<div class="fltheme-components fl-ui">
<a class="du-btn" href="https://help.fontlab.com/fontlab/8/">Read the manual</a>
</div>