Components

Tooltip examples Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left Tooltip with HTML" Tooltip with HTML <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left"> Tooltip on left </button> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML </button>

Basic tabs Home Profile Contact Tab one content... Tab two content... Tab three content... <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="card mt-3"> <div class="card-body"> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Tab one content.

Basic table Print Exportto Excel Name Contact Billing Status Account Manager Locations Contract creation Contract renewal Status Company123 Joe Bloggs 0871212121 Monthly Paid Joe Bloggs 5 01/02/2021 01/02/2021 Active Company123 Joe Bloggs 0871212121 Monthly Paid Joe Bloggs 5 01/02/2021 01/02/2021 Inactive Company123 Joe Bloggs

CSS styles for this component are based on the bs-stepper package found here - https://www.npmjs.com/package/bs-stepper Basic markup Example 1 Step 1 2 Step 2 3 Step 3 General details Name Legal entity name Account manager Description Address Address 1 Address 2 City Country France Contact details Contact name Contact email Website URL back next <div class="stepper-example"> <div class="bs-stepper"> <div class="bs-stepper-header" role="tablist"> <div class="step" data-target="#step1"> <button type="button" class="step-trigger" role="tab"> <span class="bs-stepper-circle">1</span> <span class="bs-stepper-label">Step 1</span> </button> </div> <div class="bs-stepper-line"></div> <div class="step" data-target="#step2"> <button type="button" class="step-trigger" role="tab"> <span class="bs-stepper-circle">2</span> <span class="bs-stepper-label">Step 2</span> </button> </div> <div class="bs-stepper-line"></div> <div class="step" data-target="#step3"> <button type="button" class="step-trigger" role="tab"> <span class="bs-stepper-circle">3</span> <span class="bs-stepper-label">Step 3</span> </button> </div> </div> <div class="bs-stepper-content"> <form onSubmit="return false"> <div role="tabpanel" class="bs-stepper-pane" id="step1"> <div class="card w-100"> <div class="card-body"> <h4 class="card-title text-dark">General details</h4> <div class="row"> <div class="col-12"> <label class="form-label small">Name</label> <input class="form-control" /> </div> <div class="col-12"> <label class="form-label small">Legal entity name</label> <input class="form-control" /> </div> <div class="col-12"> <label class="form-label small">Account manager</label> <input class="form-control" /> </div> <div class="col-12"> <label class="form-label small">Description</label> <textarea class="form-control" rows="3"></textarea> </div> </div> </div> </div> </div> <div role="tabpanel" class="bs-stepper-pane" id="step2"> <div class="card w-100"> <div class="card-body"> <h4 class="card-title text-dark">Address</h4> <div class="row"> <div class="col-12"> <label class="form-label small">Address 1</label> <input class="form-control" /> </div> <div class="col-12"> <label class="form-label small">Address 2</label> <input class="form-control" /> </div> <div class="col-12"> <label class="form-label small">City</label> <input class="form-control" /> </div> <div class="col-12"> <label class="form-label small">Country</label> <select class="form-control"> <option>France</option> </select> </div> </div> </div> </div> </div> <div role="tabpanel" class="bs-stepper-pane" id="step3"> <div class="card w-100"> <div class="card-body"> <h4 class="card-title text-dark">Contact details</h4> <div class="row"> <div class="col-12"> <label class="form-label small">Contact name</label> <input class="form-control" /> </div> <div class="col-12"> <label class="form-label small">Contact email</label> <input class="form-control" /> </div> <div class="col-12"> <label class="form-label small">Website URL</label> <input class="form-control" /> </div> </div> </div> </div> </div> </form> </div> </div> <div class="stepper-buttons"> <button class="btn btn-primary stepper-previous-btn">back</button> <button class="btn btn-primary stepper-next-btn">next</button> </button> </div>

Popover default style Simple popover example Title of the tip Content of the tooltip is coming here. (Replace this) Tip 1/4 prev / next Popover position Popover on top Popover on right Popover on bottom Popover on left <button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover"> Popover on top </button> <button type="button" class="btn btn-primary" data-bs-trigger="focus" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover"> Popover on right </button> <button type="button" class="btn btn-primary" data-bs-trigger="focus" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover"> Popover on bottom </button> <button type="button" class="btn btn-primary" data-bs-trigger="focus" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover"> Popover on left </button>

Basic list pagination 1 to 20 Show 10 rows Show 20 rows Show 50 rows Show 100 rows of 86 <div class="pagination-container"> <span class="me-2"> <span class="dropright"> <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">1 to 20</a> <div class="dropdown-menu"> <a class="dropdown-item text-primary" href="#">Show 10 rows</a> <a class="dropdown-item text-primary" href="#">Show 20 rows</a> <a class="dropdown-item text-primary" href="#">Show 50 rows</a> <a class="dropdown-item text-primary" href="#">Show 100 rows</a> </div> </span> of 86 </span> <a href="#"><i class="fa fa-lg planet-ds-icon-angle-first"></i></a> <a href="#"><i class="fa fa-lg planet-ds-icon-angle-left"></i></a> <a href="#"><i class="fa fa-lg planet-ds-icon-angle-right"></i></a> <a href="#"><i class="fa fa-lg planet-ds-icon-angle-last"></i></a> </div> Single page disabled state

Main application navbar example IRE IRE ARE AUS CRM CRM Retail groups Head offices Locations Contacts & users Help Profile <nav class="navbar navbar-expand-lg navbar-dark bg-dark h-100"> <div class="container"> <a class="navbar-brand" href="/"> <img src="/img/planet-icon-white.svg" alt="Planet Logo" height="32" width="32" class="brand-logo"> </a> <div class="navbar-collapse collapse d-sm-inline-flex"> <ul class="navbar-nav flex-grow"> <li class="nav-item dropdown"> <a id="countryDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" class="dropdown-toggle nav-link"> <i class="flag flag-ire"></i> IRE <i class="fa function-expand"></i> </a> <div aria-labelledby="countryDropdown" class="dropdown-menu"> <a class="dropdown-item ps-2"><i class="flag flag-ire"></i>IRE</a> <a class="dropdown-item ps-2"><i class="flag flag-are"></i>ARE</a> <a class="dropdown-item ps-2"><i class="flag flag-aus"></i>AUS</a> </div> </li> <li class="divider-vertical"></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <span class="nav-dropdown-label-large text-white">CRM</span> <i class="fa function-expand"></i> </a> <div aria-labelledby="appDropdown" class="dropdown-menu"> <a class="dropdown-item text-white" href="#">CRM</a> </div> </li> <li class="divider-vertical"></li> <li class="nav-item link-active"> <a class="nav-link text-light" href="#">Retail groups</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Head offices</a> </li> <li class="nav-item"> <a class="nav-link text-light" href="#">Locations</a> </li> <li class="nav-item"> <a class="nav-link text-light" href="#">Contacts &amp; users</a> </li> </ul> </div> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-end"> <ul class="navbar-nav flex-grow"> <li class="nav-item"> <a target="blank" href="https://planet.

Basic modal view Popup Instructions Cancel Save <div class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title text-dark"> Popup </h3> <span data-dismiss="modal" class="modal-close-btn"> <i class="fa fa-lg function-close"></i> </span> </div> <div class="modal-body"> <div class="row"> <div class="col-12 col-md-6"> <p>Instructions</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-secondary text-primary border me-auto shadow-sm" data-dismiss="modal"><i class="fa fa-lg function-cancel"></i> Cancel</button> <button type="button" class="btn btn-primary shadow-sm"><i class="fa fa-lg function-save"></i> Save</button> </div> </div> </div> </div> Modal view with layout

Basic Form Email address We'll never share your email with anyone else. Password Example select 1 2 3 4 5 Example input group Numeric input Number only input. Toggle switch Check me out Check me out Default radio Default checked radio Submit <form> <div class="row"> <div class="col-12 mb-1"> <label class="form-label" for="exampleInputEmail1">Email address</label> <input type="email" value="user@planetpayment.

Standard dropdown Dropdown button Action Another action Something else here <span class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item text-success" href="#">Action</a> <a class="dropdown-item text-success" href="#">Another action</a> <a class="dropdown-item text-success" href="#">Something else here</a> </div> </span> Split dropdown button Save Save & Run Discard changes Save Save & Run Discard changes Save Save & Run Discard changes <div class="btn-group dropdown"> <button type="button" class="btn btn-primary"><i class="fa function-save fa-lg"></i> Save</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item text-success" href="#"><i class="fa function-save fa-lg"></i> Save &amp; Run</a> <a class="dropdown-item text-success" href="#"><i class="fa function-cancel fa-lg"></i> Discard changes</a> </div> </div> <div class="btn-group dropdown"> <button type="button" class="btn btn-outline-primary"><i class="fa function-save fa-lg"></i> Save</button> <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item text-success" href="#"><i class="fa function-save fa-lg"></i> Save &amp; Run</a> <a class="dropdown-item text-success" href="#"><i class="fa function-cancel fa-lg"></i> Discard changes</a> </div> </div> <div class="btn-group dropdown"> <button type="button" class="btn btn-danger"><i class="fa function-save fa-lg"></i> Save</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item text-success" href="#"><i class="fa function-save fa-lg"></i> Save &amp; Run</a> <a class="dropdown-item text-success" href="#"><i class="fa function-cancel fa-lg"></i> Discard changes</a> </div> </div>

Overview In the design system cards are mostly used for page layouts. List pages will generally have one card containing the full page where details pages consist of multiple rows or columns of cards that should expand to full width when displayed on a mobile device. Multiple responsive columns Card 1 Card content... Card 2 Card content... Card 3 Card content.

Examples The Planet design system includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. Text Only button primary button danger button outline primary <button type="button" class="btn btn-primary">button primary</button> <button type="button" class="btn btn-danger">button danger</button> <button type="button" class="btn btn-outline-primary">button outline primary</button> Icon left button primary button danger button outline primary <button type="button" class="btn btn-primary"><i class="fa fa-lg function-apply"></i> button primary</button> <button type="button" class="btn btn-danger"><i class="fa fa-lg function-cancel"></i> button danger</button> <button type="button" class="btn btn-outline-primary"><i class="fa fa-lg function-edit"></i> button outline primary</button>

Button group Left Middle Right <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-outline-primary">Left</button> <button type="button" class="btn btn-outline-primary">Middle</button> <button type="button" class="btn btn-outline-primary">Right</button> </div> Button group with icons Left Middle Right <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-outline-primary"><i class="fa planet-ds-icon-checkmark"></i> Left</button> <button type="button" class="btn btn-outline-primary"><i class="fa planet-ds-icon-checkmark"></i> Middle</button> <button type="button" class="btn btn-outline-primary"><i class="fa planet-ds-icon-checkmark"></i> Right</button> </div>

Basic example Example heading New Example heading New Example heading New Example heading New Example heading New 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 Edit <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>

Basic alert format A simple primary alert—check it out! A simple secondary alert—check it out! A simple success alert—check it out! A simple danger alert—check it out! A simple warning alert—check it out! A simple info alert—check it out! A simple light alert—check it out! A simple dark alert—check it out! <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out!