<div id="styleguide">
  {{#freestyle-guide title='Nomad UI' subtitle='Styles and Patterns'}}
    {{#freestyle-section name="Theme" as |section|}}
      {{#section.subsection name="Font Stacks"}}
        {{freestyle/sg-font-stacks}}
      {{/section.subsection}}

      {{#section.subsection name="Text Sizing"}}
        {{freestyle/sg-font-sizing}}
      {{/section.subsection}}

      {{#section.subsection name="Colors"}}
        {{freestyle/sg-colors}}
      {{/section.subsection}}
    {{/freestyle-section}}

    {{#freestyle-section name="Components" as |section|}}
      {{#section.subsection name="Boxed section"}}
        {{freestyle/sg-boxed-section}}
      {{/section.subsection}}

      {{#section.subsection name="Breadcrumbs"}}
        {{freestyle/sg-breadcrumbs}}
      {{/section.subsection}}

      {{#section.subsection name="Buttons"}}
        {{freestyle/sg-buttons}}
      {{/section.subsection}}

      {{#section.subsection name="Diff Viewer"}}
      {{/section.subsection}}
      {{#section.subsection name="Dropdown"}}
      {{/section.subsection}}
      {{#section.subsection name="Event stream"}}
      {{/section.subsection}}
      {{#section.subsection name="Gutter navigation"}}
      {{/section.subsection}}
      {{#section.subsection name="Header"}}
      {{/section.subsection}}
      {{#section.subsection name="Inline definitions"}}
      {{/section.subsection}}
      {{#section.subsection name="JSON Viewer"}}
      {{/section.subsection}}
      {{#section.subsection name="Log Stream"}}
      {{/section.subsection}}
      {{#section.subsection name="Metric"}}
      {{/section.subsection}}
      {{#section.subsection name="Page tabs"}}
      {{/section.subsection}}
      {{#section.subsection name="Page title"}}
      {{/section.subsection}}
      {{#section.subsection name="Search box"}}
      {{/section.subsection}}
      {{#section.subsection name="Table"}}
      {{/section.subsection}}
      {{#section.subsection name="Table, Configuration"}}
      {{/section.subsection}}
    {{/freestyle-section}}

    {{#freestyle-section name="Charts" as |section|}}
      {{#section.subsection name="Distribution Bar"}}
        {{freestyle/sg-distribution-bar}}
      {{/section.subsection}}

      {{#section.subsection name="Jumbo Distribution Bar"}}
        {{freestyle/sg-distribution-bar-jumbo}}
      {{/section.subsection}}

      {{#section.subsection name="Progress Bar"}}
      {{/section.subsection}}
    {{/freestyle-section}}
  {{/freestyle-guide}}
</div>