Prototyping Demo

List page item: Default 

<div class="list-page-item ">
    <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 {{ 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://picsum.photos/600/300?image=0",
    "headline": "Headline",
    "text": "usu graeci debitis ea, impetus accusamus eam ad. Cu inimicus molestiae quo, at per iusto tritani eruditi.",
    "url": "/"
  }
}
  • 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,.2);
        border-radius: 4px;
        background-color: white;
        transition: .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: patterns/02-molecules/list-page-item/list-page-item.css
  • Size: 1.5 KB