<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