No notes defined.

<div class="slab  slab--bg-box-knot  lavender-on-dark-blue  align-full">
    <div class="wrap">
        <div class="accolade-container  accolade-container--divider">
            <article class="accolade  accolade--divider " 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--divider " 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--divider " 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>
<div class="slab  slab--bg-box-knot  lavender-on-dark-blue  align-full">
    <div class="wrap">
        <div class="accolade-container  accolade-container--divider">
            {% include '@accolade--item' with {
                headline: '8th for student satisfaction',
                source: 'Complete University Guide 2024',
                image: '/images/icons/icon-brain.png',
                style: 'divider',
                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: 'divider',
                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: 'divider',
                colour: 'peach'
            } %}
        </div>
    </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