Section: Section: divider

Ready

Notes
Info
HTML
View
Context

No notes defined.

Handle: @col-25-section--divider
Variants (6): Section: none , Section: divider , Section: divider + bordered , Section: divider + shaded , Section: bordered , Section: shaded
Preview:
- With layout
- Component only
Filesystem Path: src/components/02-page-structure/flex grids/04-Four-column-grid-layout/col-25-section/col-25-section.hbs
References (1): @placeholder


        
        <hr />

  <section class="">
      <div class="grid_container">
          <div class="grid_row ">
              <div class="grid_fourth">
                  <p class="placeholder">Content</p>
              </div>
              <div class="grid_fourth">
                  <p class="placeholder">Content</p>
              </div>
              <div class="grid_fourth">
                  <p class="placeholder">Content</p>
              </div>
              <div class="grid_fourth">
                  <p class="placeholder">Content</p>
              </div>
          </div>
          <div class="grid_row ">
              <div class="grid_fourth">
                  <p class="placeholder">Content</p>
              </div>
              <div class="grid_fourth">
                  <p class="placeholder">Content</p>
              </div>
              <div class="grid_fourth">
                  <p class="placeholder">Content</p>
              </div>
              <div class="grid_fourth">
                  <p class="placeholder">Content</p>
              </div>
          </div>
      </div>
  </section>


        {{#if sectionDivider}}
  <hr />
{{/if}}

<section class="{{sectionTreatment}}">
  <div class="grid_container">
    {{#each rows}}
      {{#if ../rowDivider}}
        <hr />
      {{/if}}
      <div class="grid_row {{../rowTreatment}}">
        {{#each cols}}
          <div class="{{width}}">
            {{#if content}}
              {{{content}}}
            {{else}}
              {{render '@placeholder'}}
            {{/if}}
          </div>
        {{/each}}
      </div>
    {{/each}}
  </div>
</section>


        
            
            {
  "rows": [
    {
      "cols": [
        {
          "width": "grid_fourth",
          "content": null
        },
        {
          "width": "grid_fourth",
          "content": null
        },
        {
          "width": "grid_fourth",
          "content": null
        },
        {
          "width": "grid_fourth",
          "content": null
        }
      ]
    },
    {
      "cols": [
        {
          "width": "grid_fourth",
          "content": null
        },
        {
          "width": "grid_fourth",
          "content": null
        },
        {
          "width": "grid_fourth",
          "content": null
        },
        {
          "width": "grid_fourth",
          "content": null
        }
      ]
    }
  ],
  "sectionDivider": true
}