Contents

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 groups 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 groups 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>

The CSS library includes the planet DS icon set by default. The icon set is generated using fontello and follows the same icon conventions as the fontawesome The class names for the icons are organised into a number of icon sets. These classes are aliases for the core icon names as some of the icons are reused accross the icon sub-sets. It is important that the developer uses the alias instead of the core class name for the icon while doing development in case the design team wishes to swap out an icon for a particular button type at a later stage.

Prototype info See the design prototype at the following URL for a full guide of all colors https://projects.invisionapp.com/d/main#/console/21344005/450621540/preview Theme colors We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/bootstrap-styles/util/color-system.scss file. Primary Secondary Success Danger Warning Info Light Dark All these colors are available as a Sass map, $theme-colors.