{% extends 'base.html.twig' %}{% block body %} <!-- PAGE-HEADER --> <div class="page-header"> <div> <h1 class="page-title">Colors</h1> </div> <div class="ms-auto pageheader-btn"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="javascript:void(0);">UI Elements</a></li> <li class="breadcrumb-item active" aria-current="page">Colors</li> </ol> </div> </div> <!-- PAGE-HEADER END --> <!-- ROW-1 OPEN --> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-header border-bottom"> <h3 class="card-title">Contextual colors</h3> </div> <div class="card-body"> <div class="text-wrap"> <div class="example"> <div class="row"> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-primary me-4 br-7"></div> <div> <strong>Primary</strong><br> <code>.bg-primary</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-secondary me-4 br-7"></div> <div> <strong>Secondary</strong><br> <code>.bg-secondary</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-success me-4 br-7"></div> <div> <strong>Success</strong><br> <code>.bg-success</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-info me-4 br-7"></div> <div> <strong>Info</strong><br> <code>.bg-info</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-warning me-4 br-7"></div> <div> <strong>Warning</strong><br> <code>.bg-warning</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-danger me-4 br-7"></div> <div> <strong>Danger</strong><br> <code>.bg-danger</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-light me-4 br-7"></div> <div> <strong>Light</strong><br> <code>.bg-light</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-dark me-4 br-7"></div> <div> <strong>Dark</strong><br> <code>.bg-dark</code> </div> </div> </div><!-- COL END --> </div> </div> </div> </div> </div> </div><!-- COL END --> <div class="col-lg-12"> <div class="card"> <div class="card-header border-bottom"> <h3 class="card-title">Gradient colors</h3> </div> <div class="card-body"> <div class="text-wrap"> <div class="example"> <div class="row"> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-primary-gradient me-4 br-7"></div> <div> <strong>Primary</strong><br> <code>.bg-primary-gradient</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-secondary-gradient me-4 br-7"></div> <div> <strong>Secondary</strong><br> <code>.bg-secondary-gradient</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-success-gradient me-4 br-7"></div> <div> <strong>Success</strong><br> <code>.bg-success-gradient</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-info-gradient me-4 br-7"></div> <div> <strong>Info</strong><br> <code>.bg-info-gradient</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-warning-gradient me-4 br-7"></div> <div> <strong>Warning</strong><br> <code>.bg-warning-gradient</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-danger-gradient me-4 br-7"></div> <div> <strong>Danger</strong><br> <code>.bg-danger-gradient</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-light-gradient me-4 br-7"></div> <div> <strong>Light</strong><br> <code>.bg-light-gradient</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-dark-gradient me-4 br-7"></div> <div> <strong>Dark</strong><br> <code>.bg-dark-gradient</code> </div> </div> </div><!-- COL END --> </div> </div> </div> </div> </div> </div> <!-- COL END --> <div class="col-lg-12"> <div class="card"> <div class="card-header border-bottom"> <h3 class="card-title">Transparent colors</h3> </div> <div class="card-body"> <div class="text-wrap"> <div class="example"> <div class="row"> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-primary-transparent me-4 br-7"></div> <div> <strong>Primary</strong><br> <code>.bg-primary-transparent</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-secondary-transparent me-4 br-7"></div> <div> <strong>Secondary</strong><br> <code>.bg-secondary-transparent</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-success-transparent me-4 br-7"></div> <div> <strong>Success</strong><br> <code>.bg-success-transparent</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-info-transparent me-4 br-7"></div> <div> <strong>Info</strong><br> <code>.bg-info-transparent</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-warning-transparent me-4 br-7"></div> <div> <strong>Warning</strong><br> <code>.bg-warning-transparent</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-danger-transparent me-4 br-7"></div> <div> <strong>Danger</strong><br> <code>.bg-danger-transparent</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-light-transparent me-4 br-7"></div> <div> <strong>Light</strong><br> <code>.bg-light-transparent</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-dark-transparent me-4 br-7"></div> <div> <strong>Dark</strong><br> <code>.bg-dark-transparent</code> </div> </div> </div><!-- COL END --> </div> </div> </div> </div> </div> </div> <div class="col-lg-12"> <div class="card"> <div class="card-header border-bottom"> <h3 class="card-title">Other colors</h3> </div> <div class="card-body"> <div class="text-wrap"> <div class="example"> <div class="row"> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-blue me-4 br-7"></div> <div> <strong>Blue</strong><br> <code>.bg-blue</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-red me-4 br-7"></div> <div> <strong>Red</strong><br> <code>.bg-red</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-teal me-4 br-7"></div> <div> <strong>Teal</strong><br> <code>.bg-teal</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-azure me-4 br-7"></div> <div> <strong>Azure</strong><br> <code>.bg-azure </code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-orange me-4 br-7"></div> <div> <strong>Orange</strong><br> <code>.bg-orange</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-cyan me-4 br-7"></div> <div> <strong>Cyan</strong><br> <code>.bg-cyan</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-indigo me-4 br-7"></div> <div> <strong>Indigo</strong><br> <code>.bg-indigo</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-yellow me-4 br-7"></div> <div> <strong>Yellow</strong><br> <code>.bg-yellow</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-gray me-4 br-7"></div> <div> <strong>Gray</strong><br> <code>.bg-gray</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-purple me-4 br-7"></div> <div> <strong>Purple</strong><br> <code>.bg-purple </code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-lime me-4 br-7"></div> <div> <strong>Lime</strong><br> <code>.bg-lime</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-gray-dark me-4 br-7"></div> <div> <strong>Dark Gray</strong><br> <code>.bg-gray-dark</code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-pink me-4 br-7"></div> <div> <strong>Pink</strong><br> <code>.bg-pink </code> </div> </div> </div><!-- COL END --> <div class="col-md-6 col-lg-4 col-xl-3 col-sm-6"> <div class="d-flex align-items-center mb-3 mt-3"> <div class="wrem-7 h-7 bg-green me-4 br-7"></div> <div> <strong>Green</strong><br> <code>.bg-green</code> </div> </div> </div><!-- COL END --> </div> </div> </div> </div> <div class="card-footer"> <table class="table main-table-reference mt-0 mb-0"> <thead> <tr> <th class="wd-40p text-muted">Class Reference</th> <th class="wd-60p text-muted">Mode</th> </tr> </thead> <tbody> <tr> <td><code class="highlighter-rouge">class="bg-[color]-[mode]"</code></td> <td>light <span class="text-muted"> | </span> lighter <span class="text-muted"> | </span> lightest <span class="text-muted"> | </span> dark <span class="text-muted"> | </span> darker <span class="text-muted"> | </span> darkest</td> </tr> </tbody> </table> </div> </div> </div><!-- COL END --> </div> <!-- ROW-1 END -->{% endblock %}