Note: The planet UI design system is an extension of the bootstrap framework. Please also referer to the bootstrap documentation for best pratices while using the framework.

Typography

Page heading

Retail Group Details

<div class="row my-3">
    <div class="col">
        <h2 class="text-dark">Retail Group Details</h2>
    </div>
</div>

Page heading with breadcrumb

Retail group name

<div class="row my-3">
    <div class="col">
        <div class="heading-breadcrumb">
            <i class="fa function-move-back text-primary"></i>
            <a href="">Retail groups</a>
        </div>
        <div class="page-heading">
            <span class="h2 align-middle text-dark">Retail group name</span>
        </div>
    </div>
</div>

Page heading with status

Retail group name Disabled

<div class="row my-3">
    <div class="col">
        <div class="heading-breadcrumb">
            <i class="fa function-move-back text-primary"></i>
            <a href="">Retail groups</a>
        </div>
        <div class="page-heading">
            <span class="h2 align-middle text-dark">Retail group name</span>
            <span class="badge text-secondary bg-inactive ms-3">Disabled</span>
        </div>
    </div>
</div>

Retail group name Active

<div class="row my-3">
    <div class="col">
        <div class="heading-breadcrumb">
            <i class="fa function-move-back text-primary"></i>
            <a href="">Retail groups</a>
        </div>
        <div class="page-heading">
            <span class="h2 align-middle text-dark">Retail group name</span>
            <span class="badge text-secondary bg-active ms-3">Active</span>
        </div>
    </div>
</div>