#sg-layouts.showcase.shadow-1
  header.showcase-header
    h2 Basic Layouts
    p.
      You will use the following layouts throughout your documenation
      to specify sections and sub-sections of content.

  .showcase-content
    .l-main-section
      h2 Main Section Title
      p Main section content...

      code-example(language="html" format="linenums").
        .l-main-section
          h2 Section Title
          p section content...
      .l-sub-section
        h3 Sub Section Title
        p.
          sub section content... This content is related to the main section
          content and <strong>falls within</strong> the main section.

        code-example(language="html" format="linenums").
          .l-sub-section
            h3 Sub Section Title
            p sub section content...