PageSection

A heading inside the page body, with an optional description, to split a long page into sections.

Preview

Twig

<div class="row row-cards">
    <twig:Tabler:PageSection title="Deployments" description="The last 30 days, all environments." class="col-12" />
    <div class="col-sm-6">
        <twig:Tabler:Card title="Production" text="142 deployments, 3 rolled back." />
    </div>
    <div class="col-sm-6">
        <twig:Tabler:Card title="Staging" text="389 deployments, 12 rolled back." />
    </div>
</div>

HTML

<div class="row row-cards">
    <div class="col-12">
        <h2 class="page-section-title">Deployments</h2>
        <p class="page-section-description">The last 30 days, all environments.</p>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-header"><h3 class="card-title">Production</h3></div>
            <div class="card-body">142 deployments, 3 rolled back.</div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-header"><h3 class="card-title">Staging</h3></div>
            <div class="card-body">389 deployments, 12 rolled back.</div>
        </div>
    </div>
</div>

The root <div> has no class of its own: give it the column class it needs in the grid, such as col-12 in a .row.

Composed

Preview

Twig

<twig:Tabler:PageSection class="col-12">
    <twig:Tabler:PageSection:Title>
        Invoices <twig:Tabler:Badge variant="warning" light="{{ true }}">4 overdue</twig:Tabler:Badge>
    </twig:Tabler:PageSection:Title>
    <twig:Tabler:PageSection:Description>
        Sent to customers this quarter. <a href="#">See all invoices</a>
    </twig:Tabler:PageSection:Description>
</twig:Tabler:PageSection>

HTML

<div class="col-12">
    <h2 class="page-section-title">
        Invoices
        <span class="badge bg-warning-lt">4 overdue</span>
    </h2>
    <p class="page-section-description">
        Sent to customers this quarter.
        <a href="#">See all invoices</a>
    </p>
</div>

Props

Prop	Type	Default	Description
title	string?	null	Rendered with PageSection:Title
description	string?	null	Rendered with PageSection:Description

Other attributes go to the root <div>.

Sub-components

Component	Renders
PageSection:Title	<h2 class="page-section-title">
PageSection:Description	<p class="page-section-description">

Blocks

Block	Default
title	PageSection:Title with the title prop, when set
description	PageSection:Description with the description prop, when set
content	title and description: replace it to compose freely