extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'tiles'
  - var parent = 'components'
  - var title = 'Tiles - Components - Spectre.css CSS Framework'
  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'

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