extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'cards'
  - var parent = 'components'
  - var title = 'Cards - Components - Spectre.css CSS Framework'
  - var description = 'Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

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

    p Cards are flexible content containers.

    .docs-demo.columns
      .column.col-6.col-xs-12
        .card
          .card-image
            img.img-responsive(src="../img/osx-el-capitan.jpg" alt="OS X El Capitan")
          .card-header
            .card-title.h5 Microsoft
            .card-subtitle.text-gray Software and hardware
          .card-body
            | Empower every person and every organization on the planet to achieve more.
          .card-footer
            a.btn.btn-primary(href="#cards") Do
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Apple
            .card-subtitle.text-gray Hardware and software
          .card-image
            img.img-responsive(src="../img/osx-yosemite.jpg" alt="OS X Yosemite")
          .card-body
            | To make a contribution to the world by making tools for the mind that advance humankind.
          .card-footer
            .btn-group.btn-group-block
              button.btn.btn-primary Buy
              button.btn Buy
              button.btn Buy
      .column.col-6.col-xs-12
        .card
          .card-image
            img.img-responsive(src="../img/macos-sierra-2.jpg" alt="macOS Sierra")
          .card-header
            button.btn.btn-primary.float-right
              i.icon.icon-plus
            .card-title.h5 Google I/O
            .card-subtitle.text-gray Software and hardware
          .card-body
            | An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
      .column.col-6.col-xs-12
        .card
          .card-image
            img.img-responsive(src="../img/osx-el-capitan-2.jpg" alt="OS X El Capitan")
          .card-footer
            a.btn.btn-primary(href="#cards") Buy
            a.btn.btn-link(href="#cards") Share
          .card-body
            strong Surface Studio
            | . Turn your desk into a Studio. Surface Studio is designed for the creative process.
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Apple
            .card-subtitle.text-gray Hardware and software
          .card-body
            | To make a contribution to the world by making tools for the mind that advance humankind.
          .card-image
            img.img-responsive(src="../img/macos-sierra.jpg" alt="macOS Sierra")
      .column.col-6.col-xs-12
        .card
          .card-header
            .card-title.h5 Google
            .card-subtitle.text-gray Software and hardware
          .card-body
            | Organize the world’s information and make it universally accessible and useful.
          .card-image
            img.img-responsive(src="../img/osx-yosemite-2.jpg" alt="OS X Yosemite")
          .card-footer
            a.btn.btn-primary(href="#cards") Search
            a.btn.btn-link(href="#cards") Share

    p
      | Add a container element with the #[code card] class.
      | And add child elements with the #[code card-image], #[code card-header], #[code card-body] and/or #[code card-footer] classes.
      | The #[code card-image] can be placed in any position.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <div class="card">
            <div class="card-image">
              <img src="img/osx-el-capitan.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <div class="card-title h5">...</div>
              <div class="card-subtitle text-gray">...</div>
            </div>
            <div class="card-body">
              ...
            </div>
            <div class="card-footer">
              <button class="btn btn-primary">...</button>
            </div>
          </div>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug