Award Cards

Dependencies

This layout uses the following framework items as "atoms" to create the full UI.

Extends: Components:

Cards

Award Shelf Card

Show off awards and nominations on top of the shelf given to Listers. See below for variations of awards.

Award Title

Day^th Month, Year

Awards

Use the award shelf card with these variations of awards.

<a class="c-card c-card--award | u-w-18" href="#award_1">
    <div class="c-card__thumb">
        <div class="c-card__thumb-link">
            <img class="c-img" src="/assets/img/ui/awards/listers-award-@2x.webp" width="180" height="180" alt/>
        </div>
        <div class="c-card__shelf"></div>
    </div>
    <div class="c-card__body | u-center">
        <h3 class="u-heading u-delta | u-trunc u-trunc-2 u-center u-mb-sm">
            Award Title
        </h3>
        <span class="u-size-sm">
            <svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                <defs>
                    <linearGradient id="a" x1="0%" x2="98.387%" y1="44.444%" y2="55.376%">
                        <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
                        <stop offset="100%" stop-color="#3A82ED"/>
                    </linearGradient>
                </defs>
                <g fill="none" fill-rule="evenodd">
                    <path fill="url(#a)" d="M2 2h8a2 2 0 0 1 2 2v2H0V4a2 2 0 0 1 2-2Z" transform="translate(2 1)"/>
                    <path stroke="#00377C" stroke-width="1.5" d="M4.3 3h7.4A2.3 2.3 0 0 1 14 5.3v6.4a2.3 2.3 0 0 1-2.3 2.3H4.3A2.3 2.3 0 0 1 2 11.7V5.3A2.3 2.3 0 0 1 4.3 3Z"/>
                    <path stroke="#00377C" stroke-linecap="round" stroke-width="1.5" d="M11 3V1M5 3V1"/>
                    <path stroke="#00377C" stroke-linecap="square" stroke-width="1.5" d="M2 7h12"/>
                </g>
            </svg>
            <span>Day<sup>th</sup> Month, Year</span>
        </span>
    </div>
</a>

<a class="c-card c-card--award | u-w-18" href="#award_1">
    <div class="c-card__thumb">
        <div class="c-card__thumb-link">
            <img class="c-img" src="/assets/img/ui/awards/listers-award-2-@2x.webp" width="180" height="180" alt/>
        </div>
        <div class="c-card__shelf"></div>
    </div>
    <div class="c-card__body | u-center">
        <h3 class="u-heading u-delta | u-trunc u-trunc-2 u-center u-mb-sm">
            Award Title
        </h3>
        <span class="u-size-sm">
            <svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                <defs>
                    <linearGradient id="a" x1="0%" x2="98.387%" y1="44.444%" y2="55.376%">
                        <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
                        <stop offset="100%" stop-color="#3A82ED"/>
                    </linearGradient>
                </defs>
                <g fill="none" fill-rule="evenodd">
                    <path fill="url(#a)" d="M2 2h8a2 2 0 0 1 2 2v2H0V4a2 2 0 0 1 2-2Z" transform="translate(2 1)"/>
                    <path stroke="#00377C" stroke-width="1.5" d="M4.3 3h7.4A2.3 2.3 0 0 1 14 5.3v6.4a2.3 2.3 0 0 1-2.3 2.3H4.3A2.3 2.3 0 0 1 2 11.7V5.3A2.3 2.3 0 0 1 4.3 3Z"/>
                    <path stroke="#00377C" stroke-linecap="round" stroke-width="1.5" d="M11 3V1M5 3V1"/>
                    <path stroke="#00377C" stroke-linecap="square" stroke-width="1.5" d="M2 7h12"/>
                </g>
            </svg>
            <span>Day<sup>th</sup> Month, Year</span>
        </span>
    </div>
</a>

<a class="c-card c-card--award | u-w-18" href="#award_1">
    <div class="c-card__thumb">
        <div class="c-card__thumb-link">
            <img class="c-img" src="/assets/img/ui/awards/listers-award-3-@2x.webp" width="180" height="180" alt/>
        </div>
        <div class="c-card__shelf"></div>
    </div>
    <div class="c-card__body | u-center">
        <h3 class="u-heading u-delta | u-trunc u-trunc-2 u-center u-mb-sm">
            Award Title
        </h3>
        <span class="u-size-sm">
            <svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                <defs>
                    <linearGradient id="a" x1="0%" x2="98.387%" y1="44.444%" y2="55.376%">
                        <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
                        <stop offset="100%" stop-color="#3A82ED"/>
                    </linearGradient>
                </defs>
                <g fill="none" fill-rule="evenodd">
                    <path fill="url(#a)" d="M2 2h8a2 2 0 0 1 2 2v2H0V4a2 2 0 0 1 2-2Z" transform="translate(2 1)"/>
                    <path stroke="#00377C" stroke-width="1.5" d="M4.3 3h7.4A2.3 2.3 0 0 1 14 5.3v6.4a2.3 2.3 0 0 1-2.3 2.3H4.3A2.3 2.3 0 0 1 2 11.7V5.3A2.3 2.3 0 0 1 4.3 3Z"/>
                    <path stroke="#00377C" stroke-linecap="round" stroke-width="1.5" d="M11 3V1M5 3V1"/>
                    <path stroke="#00377C" stroke-linecap="square" stroke-width="1.5" d="M2 7h12"/>
                </g>
            </svg>
            <span>Day<sup>th</sup> Month, Year</span>
        </span>
    </div>
</a>