Four columns - 25% each

Ready

Notes
Info
HTML
View
Context

No notes defined.

Handle: @col-25-tout-sample
Preview:
- With layout
- Component only
Filesystem Path: src/components/_col-25-tout-sample/_col-25-tout-sample.hbs
References (1): @tout
Referenced by (2): @mlp-guide, @mlp-guide--mlp-wp


        
        <section class="">
    <div class="grid_container">
        <div class="grid_row ">
            <div class="grid_fourth ">
                <div class="ContentBlock tout">
                    <div class="image-container">
                        <img class="image" src="http://picsum.photos/1920/1080?random" alt="" loading="lazy">
                    </div>
                    <div class="container">
                        <div class="eyebrow">Lorem ipsum dolor</div>
                        <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.
                        </p>
                    </div>
                </div>
            </div>
            <div class="grid_fourth ">
                <div class="ContentBlock tout">
                    <div class="image-container">
                        <img class="image" src="http://picsum.photos/1920/1080?random" alt="" loading="lazy">
                    </div>
                    <div class="container">
                        <div class="eyebrow">Lorem ipsum dolor</div>
                        <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.
                        </p>
                    </div>
                </div>
            </div>
            <div class="grid_fourth ">
                <div class="ContentBlock tout">
                    <div class="image-container">
                        <img class="image" src="http://picsum.photos/1920/1080?random" alt="" loading="lazy">
                    </div>
                    <div class="container">
                        <div class="eyebrow">Lorem ipsum dolor</div>
                        <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.
                        </p>
                    </div>
                </div>
            </div>
            <div class="grid_fourth ">
                <div class="ContentBlock tout">
                    <div class="image-container">
                        <img class="image" src="http://picsum.photos/1920/1080?random" alt="" loading="lazy">
                    </div>
                    <div class="container">
                        <div class="eyebrow">Lorem ipsum dolor</div>
                        <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


        <section class="{{sectionTreatment}}">
  {{#if topDividerLines}}
  <hr />
  {{/if}}
  <div class="grid_container">
    <div class="grid_row {{rowTreatment}}">
      <div class="grid_fourth {{colTreatment}}">
        {{render '@tout'}}
      </div>
      <div class="grid_fourth {{colTreatment}}">
        {{render '@tout'}}
      </div>
      <div class="grid_fourth {{colTreatment}}">
        {{render '@tout'}}
      </div>
      <div class="grid_fourth {{colTreatment}}">
        {{render '@tout'}}
      </div>
    </div>
  </div>
</section>


        
            
            {
  "topDividerLines": null,
  "columnContentA": "One fourth",
  "redefineColumnA": null,
  "columnContentB": "One fourth",
  "redefineColumnB": null,
  "columnContentC": "One fourth",
  "redefineColumnC": null,
  "columnContentD": "One fourth",
  "redefineColumnD": null
}