extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/components/badge/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Notifications'},
      'Badge'
    ]
  )

block view
  +docs-components('https://coreui.io/docs/components/badge/')
  .row
    .col-lg-6
      .card.mb-4
        .card-header
          strong Badges
        .card-body
          p.text-body-secondary.small
            | Bootstrap badge scale to suit the size of the parent element by using relative font sizing and 
            code em
            |  units.
          +example('https://coreui.io/docs/components/badge/#headings')
            h1
              | Example heading
              span.badge.bg-secondary New
            h2
              | Example heading
              span.badge.bg-secondary New
            h3
              | Example heading
              span.badge.bg-secondary New
            h4
              | Example heading
              span.badge.bg-secondary New
            h5
              | Example heading
              span.badge.bg-secondary New
            h6
              | Example heading
              span.badge.bg-secondary New
          p.text-body-secondary.small
            | Badges can be used as part of links or buttons to provide a counter.
          +example('https://coreui.io/docs/components/badge/#headings')
            button.btn.btn-primary(type='button')
              | Notifications
              span.badge.bg-secondary 4
    .col-lg-6
      .card.mb-4
        .card-header
          strong Badges
          span.small.ms-1 Contextual variations
        .card-body
          p.text-body-secondary.small
            | Add any of the below-mentioned classes to modify the presentation of a badge. Please note that when using Bootstrap’s default 
            code .bg-light
            | , you’ll likely need a text color utility like 
            code .text-dark
            |  for proper styling. This is because background utilities do not set anything but 
            code background-color
            | .
          +example('https://coreui.io/docs/components/badge/#contextual-variations')
            span.badge.me-1.bg-primary Primary
            = '\n'
            span.badge.me-1.bg-secondary Secondary
            = '\n'
            span.badge.me-1.bg-success Success
            = '\n'
            span.badge.me-1.bg-danger Danger
            = '\n'
            span.badge.me-1.bg-warning Warning
            = '\n'
            span.badge.me-1.bg-info Info
            = '\n'
            span.badge.me-1.bg-light.text-dark Light
            = '\n'
            span.badge.me-1.bg-dark Dark
      .card.mb-4
        .card-header
          strong Badges
          span.small.ms-1 Pill badges
        .card-body
          p.text-body-secondary.small
            | Apply the 
            code .rounded-pill
            |  modifier class to make badges rounded.
          +example('https://coreui.io/docs/components/badge/#pill-badges')
            span.badge.me-1.rounded-pill.bg-primary Primary
            = '\n'
            span.badge.me-1.rounded-pill.bg-secondary Secondary
            = '\n'
            span.badge.me-1.rounded-pill.bg-success Success
            = '\n'
            span.badge.me-1.rounded-pill.bg-danger Danger
            = '\n'
            span.badge.me-1.rounded-pill.bg-warning Warning
            = '\n'
            span.badge.me-1.rounded-pill.bg-info Info
            = '\n'
            span.badge.me-1.rounded-pill.bg-light.text-dark Light
            = '\n'
            span.badge.me-1.rounded-pill.bg-dark Dark
  // /.row