extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'badges'
  - var parent = 'components'
  - var title = 'Badges - Components - Spectre.css CSS Framework'
  - var description = 'Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('badges', 'Badges')
    include ../_layout/_ad-g.pug

    p Badges are often used as unread number indicators.

    .docs-demo.columns
      .column.col-3.col-xs-6
        span.badge(data-badge="")
          | Notifications
      .column.col-3.col-xs-6
        span.badge(data-badge="8")
          | Notifications
      .column.col-3.col-xs-6
        span.badge(data-badge="88")
          | Notifications
      .column.col-3.col-xs-6
        span.badge(data-badge="888")
          | Notifications

    p
      | Add the #[code badge] class to non self closing elements.
      | And add the #[code data-badge] attribute to define the content of a badge.
      | The badge will appear in the top-right direction of the element.
    p
      | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot.

    .docs-demo.columns
      .column.col-sm-12
        button.btn.badge(data-badge="") Button
        button.btn.badge(data-badge="8") Button
      .column.col-sm-12
        button.btn.btn-primary.badge(data-badge="") Button
        button.btn.btn-primary.badge(data-badge="8") Button
      .column.col-sm-12
        figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ")
          img(src="../img/avatar-1.png" alt="YZ")
        figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ")
          img(src="../img/avatar-2.png" alt="YZ")
        figure.avatar.badge(data-badge="8" data-initial="YZ")
          img(src="../img/avatar-3.png" alt="YZ")

    p
      | Badges support #[code button] and #[code avatars] elements as well.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <span class="badge">
            Notifications
          </span>

          <span class="badge" data-badge="8">
            Notifications
          </span>

          <button class="btn badge" data-badge="8">
            Button
          </button>

          <figure class="avatar badge" data-badge="8" data-initial="YZ">
            <img src="img/avatar-3.png" alt="YZ">
          </figure>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug