UI Components

Toast

The toast component is used to display small pieces of information to the user. They are typically paired with card components as seen in the examples below.

The toast component is an optional mixin within Fozzie — if you'd like to use it in your project you can include it by adding @include toast(); into your SCSS dependencies file.

Default Toast – .c-toast

Example

Default toast

Card Content

<div class="g g--stack g--gutter" style="height: 135px; padding-top: 90px;">
    <div class="g-col g-span12" style="position: relative;">
        <div class="c-toast l-centred">
            <p>Default toast</p>
        </div>

        <div class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large">
            <p>Card Content</p>
        </div>
    </div>
</div>

Alert Toast – .c-toast c-toast--alert

Example

Alert toast

Card Content

<div class="g g--stack g--gutter" style="height: 135px; padding-top: 90px;">
    <div class="g-col g-span12" style="position: relative;">
        <div class="c-toast c-toast--alert l-centred">
            <p>Alert toast</p>
        </div>

        <div class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large">
            <p>Card Content</p>
        </div>
    </div>
</div>

Toast with multiple lines of content – .c-toast

Note that the text must be contained within a single element.

Example

This restaurant’s popular right now
Delivery could take longer than usual

Card Content

<div class="g g--stack g--gutter" style="height: 135px; padding-top: 90px;">
    <div class="g-col g-span12" style="position: relative;">
        <div class="c-toast c-toast--alert l-centred">
                <p><strong>This restaurant’s popular right now</strong><br />
                    Delivery could take longer than usual</p>
        </div>

        <div class="c-card c-card--outline c-card--outline--aboveMid c-card--rounded--large">
            <p>Card Content</p>
        </div>
    </div>
</div>