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.

Badges

Basic example

Example heading New

<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-primary">New</span></h2>
<h3>Example heading <span class="badge bg-primary">New</span></h3>
<h4>Example heading <span class="badge bg-primary">New</span></h4>
<h5>Example heading <span class="badge bg-primary">New</span></h5>
<h6>Example heading <span class="badge bg-primary">New</span></h6>

Page header with status

Merchant Name Active

<div class="row my-3">
    <div class="col-6">
        <span class="h2 align-middle text-dark">Merchant Name</span>
        <span class="badge bg-primary align-middle mt-1 ms-3 p-2">Active</span>
    </div>
    <div class="col-6">
        <div class="btn-toolbar float-end">
            <div role="group" class="btn-group">
                <button  class="btn btn-primary ms-2 shadow-sm"><i class="fa planet-ds-icon-pen"></i> Edit</button>
            </div>
        </div>
    </div>
</div>

Colors

Neutral Neutral Dark Success Warning Error Info

<div class="row my-3">
    <div class="col-12">
        <span  class="badge bg-neutral ms-2 text-secondary">Neutral</span>
        <span  class="badge bg-neutraldark ms-2 text-secondary">Neutral Dark</span>
        <span  class="badge bg-success ms-2 text-secondary">Success</span>
        <span  class="badge bg-warning ms-2 text-secondary">Warning</span> 
        <span  class="badge bg-danger ms-2 text-secondary">Error</span>
        <span  class="badge bg-info ms-2 text-secondary">Info</span>
    </div>    
</div>