<div class="category-item">
    <div class="category-item__image">
        <a href="https:///kleding/broekjes" title="Broekjes">
            <img class="image" src="https://images.prismic.io/vechtsportonline/a2770a9e-ba6d-4a80-b890-43e868195e67_home_cat_broekjes.png?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/a2770a9e-ba6d-4a80-b890-43e868195e67_home_cat_broekjes.png?auto=compress,format" alt="Broekjes" loading="lazy">
        </a>
    </div>

    <div class="category-item__content">
        <h2 class="category-item__title">
            <a href="https:///kleding/broekjes" class="link link--white" title="Broekjes">
                Broekjes
            </a>
        </h2>
        <p class="category-item__description">
            blah bla
        </p>
        <div class="category-item__button">
            <a href="https:///kleding/broekjes" class="button">
                Broekjes
                <svg class="icon" role="img">
                    <title>View category</title>
                    <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
                </svg>
            </a>
        </div>
    </div>
</div>
<div class="category-item">
    <div class="category-item__image">
        <a href="https://{{relative}}/kleding/broekjes" title="Broekjes">
            <img class="image" src="https://images.prismic.io/vechtsportonline/a2770a9e-ba6d-4a80-b890-43e868195e67_home_cat_broekjes.png?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/a2770a9e-ba6d-4a80-b890-43e868195e67_home_cat_broekjes.png?auto=compress,format" alt="Broekjes" loading="lazy">
        </a>
    </div>

    <div class="category-item__content">
        <h2 class="category-item__title">
            <a href="https://{{relative}}/kleding/broekjes" class="link link--white" title="Broekjes">
                Broekjes
            </a>
        </h2>
        <p class="category-item__description">
            blah bla
        </p>
        <div class="category-item__button">
            <a href="https://{{relative}}/kleding/broekjes"
               class="button">
                Broekjes
                <svg class="icon" role="img">
                    <title>View category</title>
                    <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
                </svg>
            </a>
        </div>
    </div>
</div>
{
  "link": "#",
  "attributes": "aria-label=\"descriptive text about banner action and / or image\"",
  "image": {
    "defaultSrc": "/images/banner/banner-320_176.jpg",
    "alt": "banner-image"
  }
}
  • Content:
    .category-item {
        display: grid;
        border-radius: 4px;
        box-shadow: $box-shadow;
        background-color: $black;
        padding: 0 $spacer--m;
        margin-bottom: $spacer--medium;
        height: calc(100% - 1rem);
        position: relative;
        grid-template-areas: "badge";
        grid-template-columns: 50% 1fr;
    
        &__image {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-right: $spacer--l;
        }
    
        &__content {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    
        &__title {
            font-weight: $font-weight-normal;
            font-size: 20px;
            margin: $spacer--1 0;
            text-transform: uppercase;
    
            & .link {
                font-style: italic;
                font-family: $font-family-evogria;
            }
    
            @include mq($screen-s) {
                font-size: 28px;
                margin: 0 0 $spacer--medium;
            }
        }
    
        &__description {
            font-weight: $font-weight-normal;
            font-size: $font-size-base;
            color: $gray-lightest;
    
            @include mq($screen-m) {
                font-size: 15px;
            }
        }
    
        &__button {
            margin-bottom: $spacer--1;
            width: $spacer--2;
    
            @include mq($screen-s) {
                margin: 0;
                width: unset;
            }
    
            & .button__text {
                display: none;
    
                @include mq($screen-s) {
                    display: block;
                }
            }
    
            & .button__icon {
                margin: 0;
    
                @include mq($screen-s) {
                    margin-left: $spacer--1;
                }
            }
        }
    
        &--red {
            background: $red;
    
            & .button {
                background-color: $gray-darker;
    
                &:hover {
                    background-color: $gray-dark;
                    color: $color-primary;
    
                    & .icon {
                        fill: $color-primary;
                    }
                }
            }
        }
    
        &--badged {
            width: 270px;
            height: 350px;
            grid-template-rows: 30px 1fr;
            grid-template-columns: initial;
            margin: $spacer--large auto;
    
            & .category-item__image {
                position: absolute;
                bottom: 0;
                margin: 0 auto;
                left: 0;
                right: 0;
                max-width: fit-content;
                z-index: 1;
            }
    
            & .category-item__description {
                display: none;
            }
    
            & .button {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                justify-content: flex-end;
                border-radius: 4px;
                border-top-right-radius: 0;
                border-top-left-radius: 0;
    
                & .button__text {
                    display: none;
                }
            }
    
            & .category-item__content {
                width: 100%;
                justify-content: flex-start;
            }
    
            & .category-item__title {
                font-size: $font-size-xxxxl;
                text-align: center;
            }
        }
    }
    
  • URL: /components/raw/category-item/_category-item.scss
  • Filesystem Path: build/components/02-elements/category-item/_category-item.scss
  • Size: 3 KB

There are no notes for this item.