extends ../../layouts/LayoutComponent
include ../../mixins/components/Badges

append variables
  
  -
    var pageHeader = {
      title: 'Badges',
      description: 'Documentation and examples for badges, our small count and labeling component.',
      url: `https://getbootstrap.com/docs/${bootstrapVersion}/components/badge/`,
      linkText: 'Badges on Bootstrap'
    }

block component

  +PageHeader(pageHeader)

  +ComponentCard({title: 'Subtle badges'}).mb-3
    +BadgeSubtleDemo

  +ComponentCard({title: 'Subtle pill badges'}).mb-3
    +BadgeSubtlePillDemo

  +ComponentCard({title: 'Solid badges'}).mb-3
    +BadgeSolidDemo

  +ComponentCard({title: 'Solid pill badges'})
    +BadgePillDemo