templates/badge/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Badges</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">UI Elements</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Badges</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW-1 OPEN -->
  20.                             <div class="row">
  21.                                 <div class="col-md-12 col-lg-12">
  22.                                     <div class="card ">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Badges</h3>
  25.                                         </div>
  26.                                         <div class="card-body">
  27.                                             <p class="text-muted">Use <code class="highlighter-rouge">badge bg-*</code> to create default badges.</p>
  28.                                             <div class="example">
  29.                                                 <span class="badge bg-default my-1">Default</span>
  30.                                                 <span class="badge bg-primary my-1">Primary</span>
  31.                                                 <span class="badge bg-secondary my-1">Secondary</span>
  32.                                                 <span class="badge bg-success my-1">Success</span>
  33.                                                 <span class="badge bg-info my-1">Info</span>
  34.                                                 <span class="badge bg-warning my-1">Warning</span>
  35.                                                 <span class="badge bg-danger my-1">Danger</span>
  36.                                                 <span class="badge bg-light my-1">Light</span>
  37.                                                 <span class="badge bg-dark my-1">Dark</span>
  38.                                             </div>
  39.                                         </div>
  40.                                     </div>
  41.                                 </div><!-- COL-END -->
  42.                                 <div class="col-md-12 col-lg-12">
  43.                                     <div class="card ">
  44.                                         <div class="card-header border-bottom">
  45.                                             <h3 class="card-title">Gradient Badges</h3>
  46.                                         </div>
  47.                                         <div class="card-body">
  48.                                             <p class="text-muted">Use <code class="highlighter-rouge">badge bg-*-gradient</code> to create gradient color badges.</p>
  49.                                             <div class="example">
  50.                                                 <span class="badge bg-default my-1">Default</span>
  51.                                                 <span class="badge bg-primary-gradient my-1">Primary</span>
  52.                                                 <span class="badge bg-secondary-gradient my-1">Secondary</span>
  53.                                                 <span class="badge bg-success-gradient my-1">Success</span>
  54.                                                 <span class="badge bg-info-gradient my-1">Info</span>
  55.                                                 <span class="badge bg-warning-gradient my-1">Warning</span>
  56.                                                 <span class="badge bg-danger-gradient my-1">Danger</span>
  57.                                                 <span class="badge bg-light-gradient my-1">Light</span>
  58.                                                 <span class="badge bg-dark-gradient my-1">Dark</span>
  59.                                             </div>
  60.                                         </div>
  61.                                     </div>
  62.                                 </div><!-- COL-END -->
  63.                                 <div class="col-md-12 col-lg-12">
  64.                                     <div class="card ">
  65.                                         <div class="card-header border-bottom">
  66.                                             <h3 class="card-title">Pill Badges</h3>
  67.                                         </div>
  68.                                         <div class="card-body">
  69.                                             <p class="text-muted">Use <code class="highlighter-rouge">badge rounded-pill bg-*</code> to create rounded pill badges.</p>
  70.                                             <div class="example">
  71.                                                 <span class="badge rounded-pill bg-default my-1">Default</span>
  72.                                                 <span class="badge rounded-pill bg-primary my-1">Primary</span>
  73.                                                 <span class="badge rounded-pill bg-secondary my-1">Secondary</span>
  74.                                                 <span class="badge rounded-pill bg-success my-1">Success</span>
  75.                                                 <span class="badge rounded-pill bg-info my-1">Info</span>
  76.                                                 <span class="badge rounded-pill bg-warning my-1">Warning</span>
  77.                                                 <span class="badge rounded-pill bg-danger my-1">Danger</span>
  78.                                                 <span class="badge rounded-pill bg-light my-1">Light</span>
  79.                                                 <span class="badge rounded-pill bg-dark my-1">Dark</span>
  80.                                             </div>
  81.                                         </div>
  82.                                     </div>
  83.                                 </div><!-- COL-END -->
  84.                                 <div class="col-md-12 col-lg-12">
  85.                                     <div class="card ">
  86.                                         <div class="card-header border-bottom">
  87.                                             <h3 class="card-title">Gradient Pill Badges</h3>
  88.                                         </div>
  89.                                         <div class="card-body">
  90.                                             <p class="text-muted">Use <code class="highlighter-rouge">badge rounded-pill bg-*-gradient</code> to create gradient color pill badges.</p>
  91.                                             <div class="example">
  92.                                                 <span class="badge rounded-pill bg-default my-1">Default</span>
  93.                                                 <span class="badge rounded-pill bg-primary-gradient my-1">Primary</span>
  94.                                                 <span class="badge rounded-pill bg-secondary-gradient my-1">Secondary</span>
  95.                                                 <span class="badge rounded-pill bg-success-gradient my-1">Success</span>
  96.                                                 <span class="badge rounded-pill bg-info-gradient my-1">Info</span>
  97.                                                 <span class="badge rounded-pill bg-warning-gradient my-1">Warning</span>
  98.                                                 <span class="badge rounded-pill bg-danger-gradient my-1">Danger</span>
  99.                                                 <span class="badge rounded-pill bg-light-gradient my-1">Light</span>
  100.                                                 <span class="badge rounded-pill bg-dark-gradient my-1">Dark</span>
  101.                                             </div>
  102.                                         </div>
  103.                                     </div>
  104.                                 </div><!-- COL-END -->
  105.                             </div>
  106.                             <!-- ROW-1 CLOSED -->
  108.                             <!-- ROW-OPEN -->
  109.                             <div class="row">
  110.                                 <div class="col-xl-12">
  111.                                     <div class="card ">
  112.                                         <div class="card-header border-bottom">
  113.                                             <h3 class="card-title">Buttons with square Badges</h3>
  114.                                         </div>
  115.                                         <div class="card-body">
  116.                                             <p class="text-muted">Use <code class="highlighter-rouge">badge bg-*</code> inside <code class="highlighter-rouge">btn btn-*</code> to create buttons with square badges.</p>
  117.                                             <div class="example">
  118.                                                 <button type="button" class="btn btn-primary my-1">
  119.                                                     <span>Notifications</span>
  120.                                                     <span class="badge bg-white">2</span>
  121.                                                 </button>
  122.                                                 <button type="button" class="btn btn-secondary my-1">
  123.                                                     <span>Notifications</span>
  124.                                                     <span class="badge bg-white">1</span>
  125.                                                 </button>
  126.                                                 <button type="button" class="btn btn-success my-1">
  127.                                                     <span>Notifications</span>
  128.                                                     <span class="badge bg-white">5</span>
  129.                                                 </button>
  130.                                                 <button type="button" class="btn btn-info my-1">
  131.                                                     <span>Notifications</span>
  132.                                                     <span class="badge bg-white">3</span>
  133.                                                 </button>
  134.                                                 <button type="button" class="btn btn-warning my-1">
  135.                                                     <span>Notifications</span>
  136.                                                     <span class="badge bg-white">6</span>
  137.                                                 </button>
  138.                                                 <button type="button" class="btn btn-danger my-1">
  139.                                                     <span>Notifications</span>
  140.                                                     <span class="badge bg-white">4</span>
  141.                                                 </button>
  142.                                                 <button type="button" class="btn btn-light my-1">
  143.                                                     <span>Notifications</span>
  144.                                                     <span class="badge bg-white">3</span>
  145.                                                 </button>
  146.                                                 <button type="button" class="btn btn-dark my-1">
  147.                                                     <span>Notifications</span>
  148.                                                     <span class="badge bg-white">3</span>
  149.                                                 </button>
  150.                                             </div>
  151.                                         </div>
  152.                                     </div>
  153.                                 </div><!-- COL-END -->
  154.                             </div>
  155.                             <!-- ROW CLOSED -->
  157.                             <!-- ROW OPEN -->
  158.                             <div class="row">
  159.                                 <div class="col-xl-12">
  160.                                     <div class="card ">
  161.                                         <div class="card-header border-bottom">
  162.                                             <h3 class="card-title">Outline buttons with square Badges</h3>
  163.                                         </div>
  164.                                         <div class="card-body ">
  165.                                             <p class="text-muted">Use <code class="highlighter-rouge">badge bg-*</code> inside <code class="highlighter-rouge">btn btn-outline-*</code> to create outline buttons with square badges.</p>
  166.                                             <div class="example">
  167.                                                 <button type="button" class="btn btn-outline-primary my-1">
  168.                                                     <span>Notifications</span>
  169.                                                     <span class="badge  bg-primary">2</span>
  170.                                                 </button>
  171.                                                 <button type="button" class="btn btn-outline-secondary my-1">
  172.                                                     <span>Notifications</span>
  173.                                                     <span class="badge  bg-secondary">1</span>
  174.                                                 </button>
  175.                                                 <button type="button" class="btn btn-outline-success my-1">
  176.                                                     <span>Notifications</span>
  177.                                                     <span class="badge bg-success">65</span>
  178.                                                 </button>
  179.                                                 <button type="button" class="btn btn-outline-info my-1">
  180.                                                     <span>Notifications</span>
  181.                                                     <span class="badge bg-info">5333</span>
  182.                                                 </button>
  183.                                                 <button type="button" class="btn btn-outline-warning my-1">
  184.                                                     <span>Notifications</span>
  185.                                                     <span class="badge bg-warning">25</span>
  186.                                                 </button>
  187.                                                 <button type="button" class="btn btn-outline-danger my-1">
  188.                                                     <span>Notifications</span>
  189.                                                     <span class="badge  bg-danger">3</span>
  190.                                                 </button>
  191.                                                 <button type="button" class="btn btn-outline-light my-1">
  192.                                                     <span>Notifications</span>
  193.                                                     <span class="badge bg-light">21</span>
  194.                                                 </button>
  195.                                                 <button type="button" class="btn btn-outline-dark my-1">
  196.                                                     <span>Notifications</span>
  197.                                                     <span class="badge bg-dark">36</span>
  198.                                                 </button>
  199.                                             </div>
  200.                                         </div>
  201.                                     </div>
  202.                                 </div><!-- COL-END -->
  203.                             </div>
  204.                             <!-- ROW CLOSED -->
  206.                             <!-- ROW OPEN -->
  207.                             <div class="row">
  208.                                 <div class="col-xl-12">
  209.                                     <div class="card ">
  210.                                         <div class="card-header border-bottom">
  211.                                             <h3 class="card-title">Buttons with rounded Badges</h3>
  212.                                         </div>
  213.                                         <div class="card-body ">
  214.                                             <p class="text-muted">Use <code class="highlighter-rouge">badge rounded-pill bg-*</code> inside <code class="highlighter-rouge">btn btn-*</code> to create outline buttons with rounded badges.</p>
  215.                                             <div class="example">
  216.                                                 <button type="button" class="btn btn-primary my-1">
  217.                                                     <span>Notifications</span>
  218.                                                     <span class="badge rounded-pill bg-white">22</span>
  219.                                                 </button>
  220.                                                 <button type="button" class="btn btn-secondary my-1">
  221.                                                     <span>Notifications</span>
  222.                                                     <span class="badge rounded-pill bg-white">145</span>
  223.                                                 </button>
  224.                                                 <button type="button" class="btn btn-success my-1">
  225.                                                     <span>Notifications</span>
  226.                                                     <span class="badge rounded-pill bg-white">3225</span>
  227.                                                 </button>
  228.                                                 <button type="button" class="btn btn-info my-1">
  229.                                                     <span>Notifications</span>
  230.                                                     <span class="badge rounded-pill bg-white">3</span>
  231.                                                 </button>
  232.                                                 <button type="button" class="btn btn-warning my-1">
  233.                                                     <span>Notifications</span>
  234.                                                     <span class="badge rounded-pill bg-white">3225</span>
  235.                                                 </button>
  236.                                                 <button type="button" class="btn btn-light my-1">
  237.                                                     <span>Notifications</span>
  238.                                                     <span class="badge rounded-pill bg-white">3225</span>
  239.                                                 </button>
  240.                                                 <button type="button" class="btn btn-dark my-1">
  241.                                                     <span>Notifications</span>
  242.                                                     <span class="badge rounded-pill bg-white">3225</span>
  243.                                                 </button>
  244.                                             </div>
  245.                                         </div>
  246.                                     </div>
  247.                                 </div><!-- COL-END -->
  248.                             </div>
  249.                             <!-- ROw CLOSED -->
  251.                             <!-- ROW OPEN -->
  252.                             <div class="row">
  253.                                 <div class="col-xl-12">
  254.                                     <div class="card ">
  255.                                         <div class="card-header border-bottom">
  256.                                             <h3 class="card-title">Border buttons with rounded Badges</h3>
  257.                                         </div>
  258.                                         <div class="card-body ">
  259.                                             <div class="example">
  260.                                                 <button type="button" class="btn btn-outline-primary mt-1 mb-1 me-3">
  261.                                                     <span>Notifications</span>
  262.                                                     <span class="badge  bg-primary rounded-pill">2</span>
  263.                                                 </button>
  264.                                                 <button type="button" class="btn btn-outline-success mt-1 mb-1 me-3">
  265.                                                     <span>Notifications</span>
  266.                                                     <span class="badge bg-success rounded-pill">65</span>
  267.                                                 </button>
  268.                                                 <button type="button" class="btn btn-outline-secondary   mt-1 mb-1 me-3">
  269.                                                     <span>Notifications</span>
  270.                                                     <span class="badge  bg-secondary rounded-pill">43</span>
  271.                                                 </button>
  272.                                                 <button type="button" class="btn btn-outline-info  mt-1 mb-1 me-3">
  273.                                                     <span>Notifications</span>
  274.                                                     <span class="badge bg-info rounded-pill">563</span>
  275.                                                 </button>
  277.                                             </div>
  278.                                         </div>
  279.                                     </div>
  280.                                 </div><!-- COL-END -->
  281.                             </div>
  282.                             <!-- ROW CLOSED -->
  284.                             <!-- ROW-3 OPEN -->
  285.                             <div class="row">
  286.                                 <div class="col-md-12 col-xl-6">
  287.                                     <div class="card">
  288.                                         <div class="card-header border-bottom">
  289.                                             <h3 class="card-title">Simple Badges</h3>
  290.                                         </div>
  291.                                         <div class="card-body">
  292.                                             <div class="example">
  293.                                                 <h1>Heading 01 <span class="badge bg-default">New</span></h1>
  294.                                                 <h2>Heading 02 <span class="badge bg-default">New</span></h2>
  295.                                                 <h3>Heading 03 <span class="badge bg-default">New</span></h3>
  296.                                                 <h4>Heading 04 <span class="badge bg-default">New</span></h4>
  297.                                                 <h5>Heading 05 <span class="badge bg-default">New</span></h5>
  298.                                                 <h6>Heading 06 <span class="badge bg-default">New</span></h6>
  299.                                             </div>
  300.                                         </div>
  301.                                     </div>
  302.                                 </div><!-- COL-END -->
  303.                                 <div class="col-md-12 col-xl-6">
  304.                                     <div class="card">
  305.                                         <div class="card-header border-bottom">
  306.                                             <h3 class="card-title">Colored Badges</h3>
  307.                                         </div>
  308.                                         <div class="card-body">
  309.                                             <div class="example">
  310.                                                 <h1 class="text-primary">Heading 01 <span class="badge bg-primary">New</span></h1>
  311.                                                 <h2  class="text-red">Heading 02 <span class="badge bg-danger">New</span></h2>
  312.                                                 <h3  class="text-yellow">Heading 03 <span class="badge bg-warning">New</span></h3>
  313.                                                 <h4  class="text-green">Heading 04 <span class="badge bg-success">New</span></h4>
  314.                                                 <h5  class="text-info">Heading 05 <span class="badge bg-info">New</span></h5>
  315.                                                 <h6  class="text-secondary">Heading 06 <span class="badge bg-secondary">New</span></h6>
  316.                                             </div>
  317.                                         </div>
  318.                                     </div>
  319.                                 </div>
  320.                             </div>
  321.                             <!-- ROW-3 CLOSED -->
  323.                             <!-- ROW-4 OPEN -->
  324.                             <div class="row">
  325.                                 <div class="col-md-12 col-lg-12">
  326.                                     <div class="card ">
  327.                                         <div class="card-header border-bottom">
  328.                                             <h3 class="card-title">Extra-Small Badges</h3>
  329.                                         </div>
  330.                                         <div class="card-body">
  331.                                             <p class="text-muted">Use <code class="highlighter-rouge">badge badge-xs</code> to create Extra-Small badges.</p>
  332.                                             <div class="example">
  333.                                                 <span class="badge badge-xs bg-default">Default</span>
  334.                                                 <span class="badge badge-xs bg-primary">Primary</span>
  335.                                                 <span class="badge badge-xs bg-secondary">Secondary</span>
  336.                                                 <span class="badge badge-xs bg-success">Success</span>
  337.                                                 <span class="badge badge-xs bg-info">Info</span>
  338.                                                 <span class="badge badge-xs bg-warning">Warning</span>
  339.                                                 <span class="badge badge-xs bg-danger">Danger</span>
  340.                                                 <span class="badge badge-xs bg-light">Light</span>
  341.                                                 <span class="badge badge-xs bg-dark">Dark</span>
  342.                                             </div>
  343.                                         </div>
  344.                                     </div>
  345.                                 </div><!-- COL-END -->
  346.                                 <div class="col-md-12 col-lg-12">
  347.                                     <div class="card ">
  348.                                         <div class="card-header border-bottom">
  349.                                             <h3 class="card-title">Small Badges</h3>
  350.                                         </div>
  351.                                         <div class="card-body">
  352.                                             <p class="text-muted">Use <code class="highlighter-rouge">badge badge-sm</code> to create Extra-Small badges.</p>
  353.                                             <div class="example">
  354.                                                 <span class="badge badge-sm bg-default">Default</span>
  355.                                                 <span class="badge badge-sm bg-primary">Primary</span>
  356.                                                 <span class="badge badge-sm bg-secondary">Secondary</span>
  357.                                                 <span class="badge badge-sm bg-success">Success</span>
  358.                                                 <span class="badge badge-sm bg-info">Info</span>
  359.                                                 <span class="badge badge-sm bg-warning">Warning</span>
  360.                                                 <span class="badge badge-sm bg-danger">Danger</span>
  361.                                                 <span class="badge badge-sm bg-light">Light</span>
  362.                                                 <span class="badge badge-sm bg-dark">Dark</span>
  363.                                             </div>
  364.                                         </div>
  365.                                     </div>
  366.                                 </div><!-- COL-END -->
  367.                             </div>
  368.                             <!-- ROW-4 CLOSED -->
  370. {% endblock %}