CSS Styles Crib Sheet

XXXL XXL XL L

o-headline

o-headline-alt

Light Heavy

Blocked Blocked Alt

Remember - you can apply multiple classes to any item. Just put a space between them EG. class="classa class2"

This is XXXL text class, with light class also applied
This is XL text class, with heavy and blocked class also applied

Testimonial text goes here.

Participant's Name

Location / Course / Company

Responsive Image and Text Classes

Responsive Image + Text Block

Is designed for podcast use but can just as easily be adapted for any image with a description. Image needs to be 400px wide minimum.

                
                    <div class="aiir-podcasts__series-top">
                        <img class="aiir-podcasts__series-img" src="http://placekitten.com/400/400" />
                        <h3 class="aiir-podcasts__episode-subhead title  o-headline--secondary"> Text Header </h3>
                        <h4 class="aiir-podcasts__episode-subhead"> Text sub-header </h4>
                        <p> Lorum ipsum flipsum jipson jackson cracksome mapson. Lorum ipsum flipsum jipson jackson cracksome mapson.Lorum ipsum flipsum jipson jackson cracksome mapson.Lorum ipsum flipsum jipson jackson cracksome mapson. </p>
                    </div>

Image Button Array With Dark Mode

A list of buttons with an accompanying icon for each. Individual buttons or the whole block can be set as 'dark mode'.

                
                    <div class="aiir-podcasts-sub-list">
                        <div class="aiir-podcasts-sub-list__item">
                            <a href="#" class="aiir-podcasts-sub-button">
                            <img src="http://placekitten.com/40" alt="Podcast Icon" class="aiir-podcasts-sub-button__icon">
                            <span class="aiir-podcasts-sub-button__label">Button</span>
                            </a>
                        </div>
                        <div class="aiir-podcasts-sub-list__item">
                            <a href="#" class="aiir-podcasts-sub-button">
                            <img src="http://placekitten.com/50" alt="Podcast Icon" class="aiir-podcasts-sub-button__icon">
                            <span class="aiir-podcasts-sub-button__label">Button</span>
                            </a>
                        </div>
                        <div class="aiir-podcasts-sub-list__item dark-theme">
                            <a href="#" class="aiir-podcasts-sub-button">
                            <img src="http://placekitten.com/70" alt="Podcast Icon" class="aiir-podcasts-sub-button__icon">
                            <span class="aiir-podcasts-sub-button__label">Button</span>
                            </a>
                        </div>
                    </div>

Listen To Gaydio

On Air

Wh0
Midnight - 1:00am
Gaydio Non-Stop
1:00am - 4:00am

Recently Played

Midnight

so we can't display 'now playing' data right now
in the mix
8:56pm

With You
Sigala x Ely Oaks
8:54pm

sympathy is a knife
Charli XCX feat. Ariana Grande