University of Staffordshire Pattern Library

Accolade

No notes defined.

<div class="wrap">
    <div class="accolade-container">
        <article class="accolade  accolade--box " aria-label="8th for student satisfaction">
            <div class="accolade__content">
                <div class="title  title--bg-yellow-light">
                    <h3 class="h4  title__highlight">8th for student satisfaction</h3>
                </div>
                <p class="accolade__source">Complete University Guide 2024</p>
            </div>

            <figure class="accolade__figure  align-center">
                <img src="../../images/icons/icon-brain.png" alt="" />
            </figure>

        </article>

        <article class="accolade  accolade--box " aria-label="TIGA Games Industry Award Winners">
            <div class="accolade__content">
                <div class="title  title--bg-pale-blue">
                    <h3 class="h4  title__highlight">TIGA Games Industry Award Winners</h3>
                </div>
                <p class="accolade__source">TIGA Games Industry 2024</p>
            </div>

            <figure class="accolade__figure  align-center">
                <img src="../../images/icons/icon-tiga-awards.png" alt="" />
            </figure>

        </article>

        <article class="accolade  accolade--box " aria-label="Top 10 for Mental Health Nursing">
            <div class="accolade__content">
                <div class="title  title--bg-peach">
                    <h3 class="h4  title__highlight">Top 10 for Mental Health Nursing</h3>
                </div>
                <p class="accolade__source">Guardian University Guide 2024</p>
            </div>

            <figure class="accolade__figure  align-center">
                <img src="../../images/icons/icon-trophy.png" alt="" />
            </figure>

        </article>
    </div>
</div>
 
<div class="wrap">
    <div class="accolade-container">
        {% include '@accolade--item' with {
            headline: '8th for student satisfaction',
            source: 'Complete University Guide 2024',
            image: '/images/icons/icon-brain.png',
            style: 'box',
            colour: 'yellow-light'
        } %}

        {% include '@accolade--item' with {
            headline: 'TIGA Games Industry Award Winners',
            source: 'TIGA Games Industry 2024',
            image: '/images/icons/icon-tiga-awards.png',
            style: 'box',
            colour: 'pale-blue'
        } %}

        {% include '@accolade--item' with {
            headline: 'Top 10 for Mental Health Nursing',
            source: 'Guardian University Guide 2024',
            image: '/images/icons/icon-trophy.png',
            style: 'box',
            colour: 'peach'
        } %}
    </div>
</div>
  • 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