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

Info Box: Article Author

100% 
<aside class="c-info-box c-info-box--article-author">
    <div class="c-info-box__media">
        <figure>
            <img class="lazy lazyload c-info-box__image" src="../../../assets/img/author.png" alt="Theodor Vonderwal" />
        </figure>
        <figcaption>
            <h3 class="c-info-box__title" itemprop="author">Theodor Vonderwal</h3>
            <p class="c-info-box__text">Lead Writer</p>
        </figcaption>
    </div>
    <div class="c-info-box__content">Ich schreibe, also bin ich.<br/>Wer schreibt, bleibt.</div>
    <div class="c-social-menu c-social-menu--text">
        <ul class="c-social-menu__list">
            <li class="c-social-menu__item">
                <a class="c-social-menu__link c-social-menu__link--facebook" href="#">
                <span>Accountname Facebook</span>
            </a>
            </li>
            <li class="c-social-menu__item">
                <a class="c-social-menu__link c-social-menu__link--twitter" href="#">
                <span>@Accountname</span>
            </a>
            </li>
        </ul>
    </div>
</aside>
 
<aside class="c-info-box c-info-box--article-author">
    {% if src %}
        <div class="c-info-box__media">
            <figure>
                <img class="lazy lazyload c-info-box__image" src="{{ src }}" alt="{{ title }}"/>
            </figure>
            <figcaption>
                {% if title %}
                    <h3 class="c-info-box__title" itemprop="author">{{ title }}</h3>
                {% endif %}
                {% if text %}
                    <p class="c-info-box__text">{{ position }}</p>
                {% endif %}
            </figcaption>
        </div>
    {% endif %}
    <div class="c-info-box__content">{{ text }}</div>
    {% include '@social-menu--text' with services %}
</aside>
 
{
  "additionalClasses": "",
  "title": "Theodor Vonderwal",
  "text": "Ich schreibe, also bin ich.<br/>Wer schreibt, bleibt.",
  "src": "../../../assets/img/author.png",
  "position": "Lead Writer",
  "services": {
    "twitter": "tweety23",
    "facebook": "Tweetso"
  }
}
  • Content: 
    .c-info-box {
    &--author {
        border-bottom: rem-calc(2) $color-grey-lightest solid;
        clear: both;
        margin-bottom: rem-calc(28);
        min-height: rem-calc(80);
        overflow: auto;
        position: relative;
        width: 100%;

        .c-info-box__content {
            float: left;
            padding-bottom: rem-calc(6);
            width: 50%;

            p {
                line-height: rem-calc(22);
            }

            @include breakpoint(large) {
                width: 100%;
            }
        }

        .c-info-box__media {
            bottom: 0;
            float: right;
            position: absolute;
            right: 0;

            @include breakpoint(large) {
                position: relative;
            }
        }

        .c-info-box__title,
        .c-info-box__text {
            margin-bottom: 0;
        }

        .c-info-box__image {
            max-height: rem-calc(80);
            width: auto;
        }

        @include breakpoint(large) {
            margin-bottom: 0;
        }
    }

    &--article-author {
        background-color: $color-grey-lightest;
        padding: rem-calc(18);
        width: 100%;

        @include breakpoint(medium) {
            padding: rem-calc(25) rem-calc(33);
            width: 458px;
        }

        @include breakpoint(large) {
            float: right;
            padding: rem-calc(30) rem-calc(40);
            width: 100%; // 370px before but adapted to final position below text
        }

        figure {
            align-content: flex-end;
            align-items: flex-end;
            background-color: $color-white;
            border-radius: 50%;
            display: flex;
            flex-flow: column wrap;
            height: 77px;
            justify-content: flex-end;
            margin: 0;
            overflow: hidden;
            width: 77px;

            @include breakpoint(medium) {
                height: 100px;
                width: 100px;
            }
        }

        figure + figcaption {
            margin-left: rem-calc(20);
        }

        .btn {
            &:hover,
            &:focus {
                .c-info-box__title {
                    color: currentColor;
                }
            }
        }

        .c-info-box {
            &__image {
                height: 100%; // ok, because we only have landscape images.
                max-width: none;
            }

            &__media {
                @include clearfix;

                align-items: center;
                display: flex;
            }

            &__title {
                font-size: rem-calc(23);
                font-weight: 700;
                line-height: rem-calc(24);
                margin: 0;
                transition: color .25s;
            }

            &__text {
                font-size: rem-calc(15);
                margin: 0;
            }

            &__content p {
                font-size: rem-calc(16);
                font-weight: 300;
                line-height: rem-calc(23);
                margin-bottom: .8rem;

                :first-child {
                    margin: rem-calc(16) 0 rem-calc(18);
                }

                @include breakpoint(large) {
                    margin: rem-calc(28) 0 rem-calc(21);
                }
            }
        }
    }
}
  • URL: /components/raw/info-box/info-box.scss
  • Filesystem Path: src/patterns/20-components/info-box/info-box.scss
  • Size: 3.4 KB

There are no notes for this item.