extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'shapes'
  - var parent = 'utilities'
  - var title = 'Shape utilities - Utilities - Spectre.css CSS Framework'
  - var description = 'Shape utilities are used for changing element shapes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('shapes', 'Shape utilities')
    include ../_layout/_ad-g.pug

    p Shape utilities are used for changing element shapes.

    .docs-demo.columns
      .column.col-6.text-center
        .bg-primary.text-light.docs-shape.s-rounded.centered
          | s-rounded
      .column.col-6.text-center
        .bg-primary.text-light.docs-shape.s-circle.centered
          | s-circle

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <!-- rounded element -->
          <div class="s-rounded"></div>
          <!-- circle element -->
          <div class="s-circle"></div>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug