51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Media

100% 
<figure class="c-media has-caption">
    <div class="c-media__content">
        <picture class="c-media__picture">
            <img class="c-media__image" src="../../../assets/img/landscape.jpg" alt="altText" title="Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus">
        </picture>
    </div>
    <figcaption class="c-media__caption">
        <span class="c-media__title">Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus</span>
        <span class="c-media__credit">Foto: Max Mustermann</span>
    </figcaption>
</figure>
 
{% if gallery %}
<a href="{{ src }}" class="glightbox" data-gallery="{{ gallery }}"
   data-glightbox="description: {{ title }}">
    {% endif %}
    <figure class="c-media{% if caption %} has-caption{% endif %}">
        <div class="c-media__content">
            {% if gallery %}
                <span class="c-media__icon"></span>
            {% endif %}
            <picture class="c-media__picture">
                <img class="c-media__image" src="{{ src }}" alt="altText" title="{{ title }}">
            </picture>
        </div>
        {% if caption %}
            <figcaption class="c-media__caption">
                <span class="c-media__title">{{ title }}</span>
                <span class="c-media__credit">{{ credit }}</span>
            </figcaption>
        {% endif %}
    </figure>
    {% if gallery %}
</a>
{% endif %}
 
{
  "altText": "default",
  "src": "../../../assets/img/landscape.jpg",
  "title": "Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus",
  "credit": "Foto: Max Mustermann",
  "gallery": false,
  "caption": true
}
  • Content: 
    @import "~glightbox/dist/css/glightbox.css";

.c-media {
    margin-bottom: $spacing;
    position: relative;

    &.has-caption {
        figcaption {
            border-bottom: 1px solid $color-grey;
            color: $color-grey;
            margin: 0 auto;
            padding: 1rem 0;
        }
    }

    &__picture {
        display: block;
        height: auto;
        overflow: hidden;
        width: 100%;
    }

    &__image {
        display: block;
        height: auto;

        &--filled {
            width: 100%;
        }

        @include transition(transform);
    }

    &__caption {
        color: $color-grey;
        font-size: $font-size-m;
        line-height: rem-calc(20);
        padding: $spacing 0;
    }

    &__credit {
        font-size: $font-size-s;
    }

    @include breakpoint(medium) {
        &__content {
            margin: 0;
        }
    }
}

a {
    > .c-media {
        .c-media__icon {
            background-color: $color-grey-lightest;
            border: 1px solid $color-white;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(black, .25);
            color: $color-black;
            display: block;
            height: rem-calc(30);
            padding: rem-calc(10);
            position: absolute;
            right: rem-calc(10);
            top: rem-calc(10);
            width: rem-calc(30);
            z-index: 1;

            @include transition(width, height);

            &::before {
                background-image: url('~icons/haz/zoom-in.svg');
                content: '';
                display: block;
                height: rem-calc(15);
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                width: rem-calc(15);

                @include transition(width, height);
            }
        }
    }

    &:hover > .c-media {
        .c-media__icon {
            height: rem-calc(40);
            width: rem-calc(40);

            &::before {
                height: rem-calc(20);
                width: rem-calc(20);
            }
        }

        .c-media__picture .c-media__image {
            transform: scaleX(1.05) scaleY(1.05) scaleZ(1);
        }
    }
}
  • URL: /components/raw/media/media.scss
  • Filesystem Path: src/patterns/20-components/media/media.scss
  • Size: 2.3 KB

There are no notes for this item.