extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'tiles'
  - var parent = 'components'
  - var title = 'Tiles - Components - Spectre.css CSS Framework'
  - var description = 'Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

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

    p Tiles are repeatable or embeddable information blocks.

    .docs-demo.columns
      .column.col-9.col-sm-12
        .tile
          .tile-icon
            figure.avatar.avatar-lg
              img(src="../img/avatar-3.png" alt="Avatar")
          .tile-content
            p.tile-title The Avengers
            p.tile-subtitle
              | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
          .tile-action
            button.btn.btn-primary Join
            button.btn Contact
      .column.col-9.col-sm-12
        .tile
          .tile-icon
            figure.avatar.avatar-lg
              img(src="../img/avatar-2.png" alt="Avatar")
          .tile-content
            p.tile-title The S.H.I.E.L.D.
            p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
            p
              button.btn.btn-primary.btn-sm Join
              button.btn.btn-sm Contact

    p
      | Add a container with the #[code tile] class.
      | And add child elements with the #[code tile-icon], #[code tile-content] or/and #[code tile-action] classes.
      | The #[code tile-icon] and #[code tile-action] are optional.
    p
      | There are #[code tile-title] and #[code tile-subtitle] classes for title and subtitle text styles.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <div class="tile">
            <div class="tile-icon">
              <div class="example-tile-icon">
                <i class="icon icon-file centered"></i>
              </div>
            </div>
            <div class="tile-content">
              <p class="tile-title">The Avengers</p>
              <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
            </div>
            <div class="tile-action">
              <button class="btn btn-primary">Join</button>
            </div>
          </div>

    +docs-subheading('tiles-compact', 'Compact tiles')

    p
      | There is compact version of Tiles component, which is often used as contact and file info blocks.
    p
      | Add the #[code tile-centered] class to the container #[code tile].
      | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered.

    .docs-demo.columns
      .column.col-6.col-md-9.col-xs-12
        .tile.tile-centered
          .tile-icon
            .example-tile-icon
              i.icon.icon-mail.centered
          .tile-content
            .tile-title spectre-docs.pdf
            small.tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017
          .tile-action
            button.btn.btn-link.btn-action
              i.icon.icon-more-vert

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <div class="tile tile-centered">
            <div class="tile-icon">
              <div class="example-tile-icon">
                <i class="icon icon-file centered"></i>
              </div>
            </div>
            <div class="tile-content">
              <div class="tile-title">spectre-docs.pdf</div>
              <small class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</small>
            </div>
            <div class="tile-action">
              <button class="btn btn-link">
                <i class="icon icon-more-vert"></i>
              </button>
            </div>
          </div>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug