University of Staffordshire Pattern Library

Accolade: Item

No notes defined.

<article class="accolade" aria-label="">
    <div class="accolade__content">
        <div class="title  title--bg-">
            <h3 class="h4  title__highlight"></h3>
        </div>
        <p class="accolade__source"></p>
    </div>

</article>
 
<article class="accolade{% if style %}  accolade--{{ style }} {% endif %}" aria-label="{{ headline }}">
    <div class="accolade__content">
        <div class="title  title--bg-{{ colour }}">
            <h3 class="h4  title__highlight">{{ headline }}</h3>
        </div>
        <p class="accolade__source">{{ source }}</p>
    </div>
    {% if image %}
        <figure class="accolade__figure  align-center">
            <img src="{{ image | path }}" alt="" />
        </figure>
    {% endif %}
</article>
  • Content: 
    .accolade {
    color: black;
    background: $grey-50-pc;
    padding: $spacing-xl;
    text-align: center;
    margin-bottom: $spacing-lg;

    @media(min-width: map_get($breakpoint-stages, 'mobile-wide')) {
        width: 30%;
        margin-right: 2%;
        margin-bottom: 0;

        &:last-child {
            margin-right: 0;
        }

        &-container {
            display: flex;
            justify-content: center;

            &--divider {
                padding: $spacing-lg 0;
                background: $grey-50-pc;
            }
        }
    }

    &__figure {
        max-width: 100px;
    }

    &--divider {
        width: 100%;
        margin-right: 0;

        @media(min-width: map_get($breakpoint-stages, 'tablet')) {
            display: flex;
            flex-direction: row-reverse;

            & .accolade__figure {
                float: left;
                min-width: 75px;
            }

            &:not(:last-child) {
                border-right: 1px solid $grey;
            }
        }
    }
}
  • URL: /components/raw/accolade/_accolade.scss
  • Filesystem Path: src\components\accolade\_accolade.scss
  • Size: 1.1 KB