larva algorithms: a-carousel-grid
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a-carousel-grid README
Layout pattern for carousel-grid module.
Default pattern displays a primary or main post and two secondary posts in a sidebar.
Overlay pattern displays a fuller width primary post with text overlay, and a stacked row of three secondary posts.
a-carousel-grid Twig The markup file.
<div class="lrv-a-wrapper">
<div class="lrv-a-carousel-grid {{ carousel_grid_overlay_layout_class }}">
<div class="lrv-a-carousel-grid__primary lrv-u-padding-a-1">
<div class=" {{ carousel_grid_overlay_content_class }}">
<div class="{{ carousel_grid_overlay_img_class }}" style="background-color: #f7f7f7; height: 300px;"></div>
<div class="{{ carousel_grid_overlay_content_class }}">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="lrv-a-carousel-grid__secondary {{ carousel_grid_overlay_secondary_class }} lrv-u-padding-a-1">
<div class="lrv-a-carousel-grid__overlay--secondary-card lrv-u-flex lrv-u-align-items-center lrv-u-margin-b-1@mobile-max">
<div class="lrv-u-width-75p" style="background-color: #f7f7f7; height: 150px;"></div>
<div>Magna hexagon stumptown pork belly paleo tilde.</div>
</div>
<div class="lrv-a-carousel-grid__overlay--secondary-card lrv-u-flex lrv-u-align-items-center lrv-u-margin-b-1@mobile-max">
<div class="lrv-u-width-75p" style="background-color: #f7f7f7; height: 150px;"></div>
<div>Cat ipsum dolor sit amet, Why dog in house?</div>
</div>
<div class="lrv-a-carousel-grid__overlay--secondary-card lrv-u-flex lrv-u-align-items-center lrv-u-margin-b-1@mobile-max">
<div class="lrv-u-width-75p" style="background-color: #f7f7f7; height: 150px;"></div>
<div>Cat ipsum dolor sit amet, Why dog in house?</div>
</div>
</div>
</div>
</div>