extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'hero'
  - var parent = 'layout'
  - var title = 'Hero - Layout - Spectre.css CSS Framework'
  - var description = 'The Hero container shows key featured content or information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

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

    p
      | The Hero container shows key featured content or information.

    .docs-demo.columns
      .column
        .hero.bg-gray
          .hero-body
            h1 Hero title
            p This is a hero example


    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <div class="hero bg-gray">
            <div class="hero-body">
              <h1>Hero title</h1>
              <p>This is a hero example</p>
            </div>
          </div>

    p
      | Use 
      code hero-sm
      |  and 
      code hero-lg 
      | to the hero container for smaller and larger padding. 

    .docs-demo.columns
      .column
        .hero.hero-sm.bg-dark
          .hero-body
            h1 Hero title
            p This is a hero example
            
    .docs-demo.columns
      .column
        .hero.hero-lg.bg-primary
          .hero-body
            h1 Hero title
            p This is a hero example

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug