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")
          <!-- hero example -->

    .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