Prototyping Demo

list-page 

<div class="container">
    <div class="list-page">
        <div class="list-page-item list-page-item--card">
            <a href="/" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://picsum.photos/600/300?image&#x3D;0" data-query-obj='{"mode":"crop", "quality":"70", "center": "0.8,0.3"}'>
    </a>
            <div class="list-page-item__content">
                <h2 class="list-page-item__headline">
                    Headline
                </h2>
                usu graeci debitis ea, impetus accusamus eam ad. Cu inimicus molestiae quo, at per iusto tritani eruditi.

                <a class="list-page-item__link" href="/">
            /
        </a>
            </div>
        </div>
        <div class="list-page-item list-page-item--card">
            <a href="/" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://picsum.photos/600/300?image&#x3D;0" data-query-obj='{"mode":"crop", "quality":"70", "center": "0.8,0.3"}'>
    </a>
            <div class="list-page-item__content">
                <h2 class="list-page-item__headline">
                    Headline
                </h2>
                usu graeci debitis ea, impetus accusamus eam ad. Cu inimicus molestiae quo, at per iusto tritani eruditi.

                <a class="list-page-item__link" href="/">
            /
        </a>
            </div>
        </div>
        <div class="list-page-item list-page-item--card">
            <a href="/" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://picsum.photos/600/300?image&#x3D;0" data-query-obj='{"mode":"crop", "quality":"70", "center": "0.8,0.3"}'>
    </a>
            <div class="list-page-item__content">
                <h2 class="list-page-item__headline">
                    Headline
                </h2>
                usu graeci debitis ea, impetus accusamus eam ad. Cu inimicus molestiae quo, at per iusto tritani eruditi.

                <a class="list-page-item__link" href="/">
            /
        </a>
            </div>
        </div>
    </div>
</div>
 
<div class="container">
    <div class="list-page">
        {{ render '@list-page-item--card' }} 
        {{ render '@list-page-item--card' }} 
        {{ render '@list-page-item--card' }} 
    </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .list-page {
    display: flex;
    flex-wrap: wrap;
    margin: -20px;

    &--link {
        align-items: flex-start;
        flex-direction: column;
        margin: 0;
    }
}
  • URL: /components/raw/list-page/list-page.css
  • Filesystem Path: patterns/03-organisms/list-page/list-page.css
  • Size: 178 Bytes