Component Library

list-page 

<div class="container">
    <div class="list-page">
        <div class="list-page-item ">
            <a href="https://google.dk" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://www.novicell.dk/media/59092/dla.jpg" 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. Omnium habemus at nam, erant latine laoreet ex qui, ius sumo splendide inciderint e

                <a class="list-page-item__link" href="https://google.dk">
            https://google.dk
        </a>
            </div>
        </div>
        <div class="list-page-item ">
            <a href="https://google.dk" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://www.novicell.dk/media/59092/dla.jpg" 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. Omnium habemus at nam, erant latine laoreet ex qui, ius sumo splendide inciderint e

                <a class="list-page-item__link" href="https://google.dk">
            https://google.dk
        </a>
            </div>
        </div>
        <div class="list-page-item ">
            <a href="https://google.dk" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://www.novicell.dk/media/59092/dla.jpg" 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. Omnium habemus at nam, erant latine laoreet ex qui, ius sumo splendide inciderint e

                <a class="list-page-item__link" href="https://google.dk">
            https://google.dk
        </a>
            </div>
        </div>
        <div class="list-page-item ">
            <a href="https://google.dk" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://www.novicell.dk/media/59092/dla.jpg" 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. Omnium habemus at nam, erant latine laoreet ex qui, ius sumo splendide inciderint e

                <a class="list-page-item__link" href="https://google.dk">
            https://google.dk
        </a>
            </div>
        </div>
        <div class="list-page-item ">
            <a href="https://google.dk" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://www.novicell.dk/media/59092/dla.jpg" 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. Omnium habemus at nam, erant latine laoreet ex qui, ius sumo splendide inciderint e

                <a class="list-page-item__link" href="https://google.dk">
            https://google.dk
        </a>
            </div>
        </div>
    </div>

    <div class="list-page">
        <div class="list-page-item list-page-item--card">
            <a href="https://google.dk" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://www.novicell.dk/media/59092/dla.jpg" 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. Omnium habemus at nam, erant latine laoreet ex qui, ius sumo splendide inciderint e

                <a class="list-page-item__link" href="https://google.dk">
            https://google.dk
        </a>
            </div>
        </div>
        <div class="list-page-item list-page-item--card">
            <a href="https://google.dk" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://www.novicell.dk/media/59092/dla.jpg" 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. Omnium habemus at nam, erant latine laoreet ex qui, ius sumo splendide inciderint e

                <a class="list-page-item__link" href="https://google.dk">
            https://google.dk
        </a>
            </div>
        </div>
        <div class="list-page-item list-page-item--card">
            <a href="https://google.dk" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://www.novicell.dk/media/59092/dla.jpg" 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. Omnium habemus at nam, erant latine laoreet ex qui, ius sumo splendide inciderint e

                <a class="list-page-item__link" href="https://google.dk">
            https://google.dk
        </a>
            </div>
        </div>
        <div class="list-page-item list-page-item--card">
            <a href="https://google.dk" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://www.novicell.dk/media/59092/dla.jpg" 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. Omnium habemus at nam, erant latine laoreet ex qui, ius sumo splendide inciderint e

                <a class="list-page-item__link" href="https://google.dk">
            https://google.dk
        </a>
            </div>
        </div>
        <div class="list-page-item list-page-item--card">
            <a href="https://google.dk" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="https://www.novicell.dk/media/59092/dla.jpg" 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. Omnium habemus at nam, erant latine laoreet ex qui, ius sumo splendide inciderint e

                <a class="list-page-item__link" href="https://google.dk">
            https://google.dk
        </a>
            </div>
        </div>
    </div>

    <div class="list-page list-page--link">
        <a href="https://google.dk" class="list-page-link">
    læs mere &#x21E2;
</a>
        <a href="https://google.dk" class="list-page-link">
    læs mere &#x21E2;
</a>
        <a href="https://google.dk" class="list-page-link">
    læs mere &#x21E2;
</a>
        <a href="https://google.dk" class="list-page-link">
    læs mere &#x21E2;
</a>
        <a href="https://google.dk" class="list-page-link">
    læs mere &#x21E2;
</a>
    </div>
</div>
 
<div class="container">
    <div class="list-page">
        {{ render '@list-page-item' }} 
        {{ render '@list-page-item' }} 
        {{ render '@list-page-item' }} 
        {{ render '@list-page-item' }} 
        {{ render '@list-page-item' }} 
    </div>

    <div class="list-page">
        {{ render '@list-page-item--card' }} 
        {{ render '@list-page-item--card' }} 
        {{ render '@list-page-item--card' }} 
        {{ render '@list-page-item--card' }} 
        {{ render '@list-page-item--card' }}
    </div>

    <div class="list-page list-page--link">
        {{ render '@list-page-link' }} 
        {{ render '@list-page-link' }}
        {{ render '@list-page-link' }} 
        {{ render '@list-page-link' }} 
        {{ render '@list-page-link' }} 
    </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: src/03-organisms/list-page/list-page.css
  • Size: 179 Bytes

There are no notes for this item.