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.text-gray
          | 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.text-gray 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")

The Avengers
          
Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

          Join

+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
        .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")

spectre-docs.pdf
          
14MB · Public · 1 Jan, 2017

