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

Recently Played