extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'labels'
  - var parent = 'elements'
  - var title = 'Labels - Elements - Spectre.css CSS Framework'
  - var description = 'Labels are formatted text tags for highlighted, informative information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

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

    p Labels are formatted text tags for highlighted, informative information.

    .docs-demo.columns
      .column
        span.label.mr-1 default label
        span.label.label-primary.mr-1 primary label
        span.label.label-secondary.mr-1 secondary label
        span.label.label-success.mr-1 success label
        span.label.label-warning.mr-1 warning label
        span.label.label-error error label
      
    p
      | Add the #[code label] class to #{'<span>'} or #{'<small>'} elements.
      | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <!-- normal labels -->
          <span class="label">default label</span>
          <span class="label label-primary">primary label</span>

    +docs-subheading('labels-rounded', 'Rounded labels')
    
    .docs-demo.columns
      .column
        span.label.label-rounded.mr-1 default label
        span.label.label-rounded.label-primary primary label

    p
      | Add the #[code label-rounded] class to have rounded labels.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <!-- rounded labels -->
          <span class="label label-rounded label-primary">primary label</span>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug