Ribbon

A Ribbon Component is used to highlight important information such as discounts, new arrivals, featured items, or badges on UI elements like cards, banners, or sections.


Primary Ribbon

<section class="branding-primary-secondary position--relative">
    <aside class="ribbon display--flex items--center position--relative text-white">
        <div class="ribbon__content-parent">
        <p class="ribbon__info-txt display--inline-block">Lorem ipsum dolor sit and ipsum</p>
        </div>
        <a target="_blank" rel="noreferrer" class="text-center link text-uppercase text-decoration-underline rounded-0 dynamic-ribbon__link text-white" data-track='{"type":"click","event":"testribbon"}' href="#?source=ribbon"> Lorem ipsum </a>
        <button class="ribbon__close" type="button" data-track='{"type":"click","event":"dynamic-ribbon-close-button"}'>
        <span class="material-symbols-outlined">close</span>
        </button>
    </aside>
</section>

Secondary Ribbon

<section class="branding-secondary-primary position--relative">
    <aside class="ribbon display--flex items--center position--relative text-white">
        <div class="ribbon__content-parent">
        <p class="ribbon__info-txt display--inline-block">Lorem ipsum dolor sit and ipsum</p>
        </div>
        <a target="_blank" rel="noreferrer" class="text-center link text-uppercase text-decoration-underline rounded-0 dynamic-ribbon__link text-white" data-track='{"type":"click","event":"testribbon"}' href="#?source=ribbon"> Lorem ipsum </a>
        <button class="ribbon__close" type="button" data-track='{"type":"click","event":"dynamic-ribbon-close-button"}'>
        <span class="material-symbols-outlined">close</span>
        </button>
    </aside>
</section>

Reverse Ribbon

<section class="branding-reverse-secondary position--relative">
    <aside class="ribbon display--flex items--center position--relative text-white">
        <div class="ribbon__content-parent">
        <p class="ribbon__info-txt display--inline-block">Lorem ipsum dolor sit and ipsum</p>
        </div>
        <a target="_blank" rel="noreferrer" class="text-center link text-uppercase text-decoration-underline rounded-0 dynamic-ribbon__link text-white" data-track='{"type":"click","event":"testribbon"}' href="#?source=ribbon"> Lorem ipsum </a>
        <button class="ribbon__close" type="button" data-track='{"type":"click","event":"dynamic-ribbon-close-button"}'>
        <span class="material-symbols-outlined">close</span>
        </button>
    </aside>
</section>

Ribbon Without Close

<section class="branding-reverse-secondary position--relative">
    <aside class="ribbon display--flex items--center position--relative text-white">
        <div class="ribbon__content-parent">
        <p class="ribbon__info-txt display--inline-block">Lorem ipsum dolor sit and ipsum</p>
        </div>
        <a target="_blank" rel="noreferrer" class="text-center link text-uppercase text-decoration-underline rounded-0 dynamic-ribbon__link text-white" data-track='{"type":"click","event":"testribbon"}' href="#?source=ribbon"> Lorem ipsum </a>
    </aside>
</section>

Ribbon With Long Text

<aside class="ribbon bg-primary display--flex items--center position--relative text-white">
    <div class="ribbon__content-parent"><p class="ribbon__info-txt display--inline-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <a
        target="_blank"
        rel="noreferrer"
        class="text-center link text-uppercase text-decoration-underline rounded-0 dynamic-ribbon__link text-white"
        data-track='{"type":"click","event":"testribbon"}'
        href="#?source=ribbon">
        Lorem ipsum
    </a>
    <button class="ribbon__close" type="button" data-track='{"type":"click","event":"dynamic-ribbon-close-button"}'><span class="material-symbols-outlined">close</span></button>
</aside>