Column: Left column: bordered

Ready

Notes
Info
HTML
View
Context

No notes defined.

Handle: @col-66-33-column--left-col-bordered
Variants (16): Column: none , Column: divider , Column: divider + bordered , Column: divider + shaded , Column: bordered , Column: shaded , Left column: divider , Left column: shaded , Left column: bordered , Left column: divider + shaded , Left column: divider + bordered , Right column: divider , Right column: shaded , Right column: bordered , Right column: divider + shaded , Right column: divider + bordered
Preview:
- With layout
- Component only
Filesystem Path: src/components/02-page-structure/flex grids/02-Two-column-grid-layout/col-66-33/col-66-33-column/col-66-33-column.hbs
References (1): @placeholder


        
        <section class="">
    <div class="grid_container">

        <div class="grid_row ">

            <div class="grid_twothirds">

                <div class="Bordered">
                    <p class="placeholder">Content</p>
                </div>
            </div>

            <div class="grid_third">

                <p class="placeholder">Content</p>
            </div>

        </div>

        <div class="grid_row ">

            <div class="grid_twothirds">

                <div class="Bordered">
                    <p class="placeholder">Content</p>
                </div>
            </div>

            <div class="grid_third">

                <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}}

          {{!-- detect column index --}}
          {{#if @first}}

            {{!-- LEFT COLUMN --}}
            <div class="{{width}}">
              {{#if ../../colDivider}}
                <hr />
              {{else if ../../colDividerA}}
                <hr />
              {{/if}}

              {{#if ../../colTreatment}}
                <div class="{{../../colTreatment}}">
                  {{#if content}}
                    {{{content}}}
                  {{else}}
                    {{render '@placeholder'}}
                  {{/if}}
                </div>
              {{else if ../../colTreatmentA}}
                <div class="{{../../colTreatmentA}}">
                  {{#if content}}
                    {{{content}}}
                  {{else}}
                    {{render '@placeholder'}}
                  {{/if}}
                </div>
              {{else}}
                {{#if content}}
                  {{{content}}}
                {{else}}
                  {{render '@placeholder'}}
                {{/if}}
              {{/if}}
            </div>

          {{else}}

          {{!-- RIGHT COLUMN --}}
            <div class="{{width}}">
              {{#if ../../colDivider}}
                <hr />
              {{else if ../../colDividerB}}
                <hr />
              {{/if}}

              {{#if ../../colTreatment}}
                <div class="{{../../colTreatment}}">
                  {{#if content}}
                    {{{content}}}
                  {{else}}
                    {{render '@placeholder'}}
                  {{/if}}
                </div>
              {{else if ../../colTreatmentB}}
                <div class="{{../../colTreatmentB}}">
                  {{#if content}}
                    {{{content}}}
                  {{else}}
                    {{render '@placeholder'}}
                  {{/if}}
                </div>
              {{else}}
                {{#if content}}
                  {{{content}}}
                {{else}}
                  {{render '@placeholder'}}
                {{/if}}
              {{/if}}
            </div>

          {{/if}}

        {{/each}}
      </div>
    {{/each}}
  </div>
</section>


        
            
            {
  "rows": [
    {
      "cols": [
        {
          "width": "grid_twothirds",
          "content": null
        },
        {
          "width": "grid_third",
          "content": null
        }
      ]
    },
    {
      "cols": [
        {
          "width": "grid_twothirds",
          "content": null
        },
        {
          "width": "grid_third",
          "content": null
        }
      ]
    }
  ],
  "colTreatmentA": "Bordered"
}