Component Library

List page item 

<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 {{ modifier }}">
    <a href="{{ list-page-item.url }}" class="list-page-item__image-holder">
        <img class="list-page-item__image lazyload lazyload-measure lazyload-bg" alt="Alt text" data-src="{{ list-page-item.img }}" 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">
            {{ list-page-item.headline }}
        </h2>
        {{ list-page-item.text }}

        <a class="list-page-item__link" href="{{ list-page-item.url }}">
            {{ list-page-item.url }}
        </a>
    </div>
</div>
 
{
  "list-page-item": {
    "img": "https://www.novicell.dk/media/59092/dla.jpg",
    "headline": "Headline",
    "text": "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",
    "url": "https://google.dk"
  }
}
  • Content: 
    :root {
    --list-page-item-color: #333;
}

.list-page-item {
    color: var(--list-page-item-color);
    display: flex;
    min-height: 200px;
    margin: 20px;
    width: calc(100% - 40px);

    @media (--viewport-xs-max) {
        flex-direction: column;
    }

    &__headline {
        margin-top: 0;
        margin-bottom: 10px;
    }

    &__content {
        display: flex;
        flex-direction: column;
        padding: 20px;
        flex-basis: 80%;
        flex-grow: 1;
    }

    &__image-holder {
        background-repeat: no-repeat;
        flex-basis: 20%;
        flex-grow: 1;

        @media (--viewport-xs-max) {
            min-height: 250px;
        }
    }

    &__image {
        opacity: 0;
    }

    &__link {
        margin-left: auto;
        margin-top: auto;
        margin-bottom: 0;
        color: var(--list-page-item-color);
    }

    &--card {
        flex-direction: column;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        background-color: white;
        transition: 0.2s transform var(--easeInSine);
        will-change: transform;
        backface-visibility: visible;

        &:hover {
            transform: translateY(-5px);
        }

        @media (--viewport-ms-min) {
            width: calc(50% - 40px);
        }

        @media (--viewport-md-min) {
            width: calc((100% / 3) - 40px);
        }

        .list-page-item__image-holder {
            min-height: 250px;
            width: 100%;
        }
    }
}
  • URL: /components/raw/list-page-item/list-page-item.css
  • Filesystem Path: src/02-molecules/list-page-item/list-page-item.css
  • Size: 1.5 KB

There are no notes for this item.