Website Style Guide

This is a collection of elements that can be used throughout your site. The build includes common elements (buttons, titles, and so on) as well as a grid system and some javascript-powered widgets.

Colors  Back to top

Branding and Theming

 

AAEM Red

Primary theme color

Hex: #ec1c2d

RGB: 236, 28, 45

 

#fff5f5

255, 245, 245

 

#ffdada

255, 218, 218

 

#ff9799

255, 151, 153

 

#ff5c65

255, 92, 101

 

#ca0619

202, 6, 25

 

#8a0010

138, 0, 16

 

#5a000c

90, 0, 12

 

#1e0004

30, 0, 4

 

AAEM Gray

Accent color

Hex: #4f5959

RGB: 79, 89, 89

 

#f7f8f8

247, 248, 248

 

#dbe4e4

219, 228, 228

 

#b3bcbc

179, 188, 188

 

#808a8a

128, 138, 138

 

#394242

57, 66, 66

 

#293232

41, 50, 50

 

#151f1f

21, 31, 31

 

#0a0f0f

10, 15, 15

 

Warning Orange

Action/callout color

Hex: #e27306

RGB: 226, 115, 6

 

#fff4e5

255, 244, 229

 

#fbdcb6

251, 220, 182

 

#ffbd72

255, 189, 114

 

#fb9120

251, 145, 32

 

#b55700

181, 87, 0

 

#823e03

130, 62, 3

 

#4a2303

74, 35, 3

 

#130800

19, 8, 0

Type

 

Primary

Headings, item titles, important info

Hex: #58585a

RGB: 88, 88, 90

About the Organization

Record Attendance Numbers Recorded for June Summit

Section II: Definitions
 

Secondary

Body copy, list contents, card text

Hex: #394242

RGB: 57, 66, 66

Mr. Sherlock Holmes, who was usually very late in the mornings, save upon those not infrequent occasions when he was up all night, was seated at the breakfast table. I stood upon the hearth-rug and picked up the stick which our visitor had left behind him the night before. It was a fine, thick piece of wood, bulbous-headed, of the sort which is known as a “Penang lawyer.” Just under the head was a broad silver band nearly an inch across. “To James Mortimer, MRCS, from his friends of the CCH,” was engraved upon it, with the date “1884.” It was just such a stick as the old-fashioned family practitioner used to carry—dignified, solid, and reassuring.

“Well, Watson, what do you make of it?”

 

Tertiary

Notes, help text, copyright info, metadata

Hex: #808a8a

RGB: 128, 138, 138

January 1, 1970

Your data will remain private and confidential.

© 2022 Organization Name

Grays

 

#fbfcfd

251, 252, 253

 

#eef1f2

238, 241, 242

 

#d2d6d8

210, 214, 216

 

#bec1c2

190, 193, 194

 

#a1a5a8

161, 165, 168

 

#747c81

116, 124, 129

 

#4b5459

75, 84, 89

 

#20282e

32, 40, 46

 

#02101a

2, 16, 26

Typography  Back to top

AAEM is set in Source Sans Pro. Various weights and styles of Source Sans Pro are utilized as webfonts on the site.

Source Sans Pro at 15px
Source Sans Pro at 16px
Source Sans Pro at 18px
Source Sans Pro at 22px
Source Sans Pro at 26px
Source Sans Pro at 30px
Source Sans Pro at 38px
Source Sans Pro at 50px
Source Sans Pro at 60px

Montserrat is used for the site’s headings and titles.

Montserrat at 22px
Montserrat at 26px
Montserrat at 30px
Montserrat at 38px
Montserrat at 50px
Montserrat at 60px

The following are the basic typographic elements that form the foundation of the site’s text styling. Please note that Sitefinity’s WYSIWYG editor will offer much of this functionality out of the box, and those functions should be used over manual HTML editing.

<h1>Heading 1</h1>

Heading 1

<h2>Heading 2</h2>

Heading 2

<h3>Heading 3</h3>

Heading 3

<h4>Heading 4</h4>

Heading 4

<h4 class="teal-text uppercase">Teal Heading 4</h4>

Teal Heading 4

<h5>Heading 5</h5>
Heading 5
<h6>Heading 6</h6>
Heading 6
<p>This is a paragraph.</p>
<p>Multiple paragraphs are visually separated by a space.</p>

This is a paragraph.

Multiple paragraphs are visually separated by a space.

<p>Lines can be <br /> manually broken up <br /> e.g. for addresses</p>

Lines can be
manually broken up
e.g. for addresses

<p><a href="http://google.com">Links</a> come with <a href="http://google.com">their own style</a> by default</p>

Links come with their own style by default

<ol>
<li>This is a numbered ("ordered") list</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Nobis minima facilis magni</li>
</ol>
  1. This is a numbered (“ordered”) list
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
  3. Nobis minima facilis magni
<ul>
<li>This is a dotted ("unordered") list</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Nobis minima facilis magni</li>
</ul>
  • This is a dotted (“unordered”) list
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Nobis minima facilis magni
<div class="align-left">This text has been left-aligned.</div>
This text has been left-aligned.
<div class="align-right">This text has been right-aligned.</div>
This text has been right-aligned.
<div class="align-center">This text has been centered.</div>
This text has been centered.
<pre><code class="language-html">&lt;p&gt;This is a snippet of &lt;strong&gt;HTML&lt;/strong&gt;&lt;/p&gt;</code></pre>
<pre><code class="language-css">.this-is { some: css; }</code></pre>
<pre><code class="language-javascript">this.is('a snippet of ' + js);</code></pre>

Note: don’t forget to entitize your HTML!

<p>This is a snippet of <strong>HTML</strong></p>
.this-is { some: css; }
this.is('a snippet of ' + js);
<p class="note">Note: this is a small hint or elaboration</p>

Note: this is a small hint or elaboration

<h3 class="highlight">Highlighted Text</h3>
<p>Certain parts of sentences might be more <span class="highlight">important</span> than others. <strong class="highlight">Make sure</strong> they're not confused for links.</p>

Highlighted Text

Certain parts of sentences might be more important than others. Make sure they’re not confused for links.

<h3 class="warn">Oh No!</h3>
<p><span class="warn">This is a warning.</span> It might mean that <strong class="warn">something's gone wrong</strong> or perhaps <em class="warn">something really needs to be seen.</em></p>

Oh No!

This is a warning. It might mean that something’s gone wrong or perhaps something really needs to be seen.

Buttons  Back to top

Button styles can be applied to most any element, though they make most sense on <a>, <button>, and <input type="submit" /> elements.

Note: the #0 that can be seen in href attributes here is simply a placeholder that can be replaced by any url.

Note: modifier classes (e.g. button--highlight) are added to their base classes (e.g. button) in accordance with the BEM naming convention.

<a href="#0" class="button">Standard Button</a>
<a href="#0" class="button button--secondary">Standard Secondary</a>
<a href="#0" class="button button--tertiary">Standard Tertiary</a>
<a href="#0" class="button button--highlight">Highlighted Button</a>
<a href="#0" class="button button--highlight button--secondary">Highlighted Secondary</a>
<a href="#0" class="button button--highlight button--tertiary">Highlighted Tertiary</a>
<a href="#0" class="button button--action">Action Button</a>
<a href="#0" class="button button--action button--secondary">Action Secondary</a>
<a href="#0" class="button button--action button--tertiary">Action Tertiary</a>
<a href="#0" class="button button--warn">Warning Button</a>
<a href="#0" class="button button--warn button--secondary">Warning Secondary</a>
<a href="#0" class="button button--warn button--tertiary">Warning Tertiary</a>
<a href="#0" class="button button--teal uppercase">Teal button</a>
<a href="#0" class="button button--black uppercase">Black button</a>
<a href="#0" class="button button--cancel">Cancel button</a>
<a href="#0" class="button button--large">Large Button</a>
<a href="#0" class="button">Normal Button</a>
<a href="#0" class="button button--small">Small Button</a>
<a href="#0" class="button button--tiny">Tiny Button</a>
<a href="#0" class="button button--disclose">Learn More</a>
<a href="#0" class="button button--small button--cancel button--disclose">Learn More</a>
<a href="#0" class="button button--fill">Fills Available Space</a>

Instead of laying out inline with text and other buttons, this tells the button to fill its entire available horizontal space

<div class="align-center">
<a href="#0" class="button">Combining Button and Alignment</a>
</div>
<a href="#0" class="button button--highlight button--large">Combining Style and Size</a>
<p><a href="#0" class="button">Confirm</a> &nbsp; or &nbsp; <a href="#0" class="button button--cancel">Cancel</a></p>

Buttons lay out in line with text by default

Confirm   or   Cancel

<div class="button-group button-group--justify-stretch button-group--mobile-stretch">
<a href="#0" class="button button--highlight">Register</a>
<a href="#0" class="button button--highlight button--secondary">Learn More</a>
</div>

Button groups will calculate an optimized responsive button layout that fills the given space.

Cards  Back to top

<div class="card">
    <div class="card__body">
        <h4>Basic Card</h4>
        <p>Cards provide a container for arbitrary content. They stretch horizontally to fill their containers.</p>
        <p>Use any usual elements inside a card. Cards won't impose their own styles on inner elements until an explicit coloration is selected (see below). Since cards are flex containers, use a <code>card__body</code> to add padding and make inner contents behave as normal.</p>
    </div>
</div>

Basic Card

Cards provide a container for arbitrary content. They stretch horizontally to fill their containers.

Use any usual elements inside a card. Cards won’t impose their own styles on inner elements until an explicit coloration is selected (see below). Since cards are flex containers, use a card__body to add padding and make inner contents behave as normal.

<div class="card">
    <img src="https://placeimg.com/300/100/nature" alt="" class="card__image" />
    <div class="card__body">
        <p>Use a <code>card__image</code> to make a thumbnail or graphic flush with the top or bottom of a card. Images' widths will be locked to the width of the card, meaning smaller images will be scaled up and larger ones scaled down.</p>
    </div>
</div>

Use a card__image to make a thumbnail or graphic flush with the top or bottom of a card. Images’ widths will be locked to the width of the card, meaning smaller images will be scaled up and larger ones scaled down.

<div class="card">
    <div class="card__header">
        <p>This is a card header, which is visually separated from the body content.</p>
    </div>
    <div class="card__body">
        <p>This is the card's body content.</p>
    </div>
    <div class="card__footer">
        <p>This is a card footer, which is visually separated from the body content.</p>
    </div>
</div>

This is a card header, which is visually separated from the body content.

This is the card’s body content.

<div class="card">
    <div class="card__header card__header--secondary">
        <p>Card headers have some emphasis classes available.</p>
    </div>
    …
    <div class="card__footer card__footer--secondary">
        <p>Card footers have some emphasis classes available.</p>
    </div>
</div>
<div class="card">
    <div class="card__header card__header--tertiary">
        <p>Card headers have some emphasis classes available.</p>
    </div>
    …
    <div class="card__footer card__footer--tertiary">
        <p>Card footers have some emphasis classes available.</p>
    </div>
</div>
<div class="card">
    <div class="card__header card__header--secondary card__header--borderless">
        <p>Borders can be removed from card headers with another class.</p>
    </div>
    …
    <div class="card__footer card__footer--secondary card__footer--borderless">
        <p>Borders can be removed from card footers with another class.</p>
    </div>
</div>

Card headers have some emphasis classes available.

This is the card’s body content.

Card headers have some emphasis classes available.

This is the card’s body content.

Borders can be removed from card headers with another class.

This is the card’s body content.

<div class="card">
    <div class="card__body">
        <h4>Card Title</h4>
        <div class="card__section">
            <p>Use card sections to divide inner card contents.</p>
        </div>
        <div class="card__section card__section--secondary">
            <p>Sections can be tinted or reduced in importance.</p>
        </div>
        <div class="card__section card__section--tertiary">
            <p>Sections can be tinted or reduced in importance.</p>
        </div>
        <p>Borders can also be removed for a more subtle look:</p>
        <div class="card__section card__section--tertiary card__section--borderless">
            <p>Example tertiary section without borders</p>
        </div>
        <p>These sections are handy for pricing cards, inner lists, and more.</p>
    </div>
</div>

Card Title

Use card sections to divide inner card contents.

Sections can be tinted or reduced in importance.

Sections can be tinted or reduced in importance.

Borders can also be removed for a more subtle look:

Example tertiary section without borders

These sections are handy for pricing cards, inner lists, and more.

<div class="card-grid">
    <div class="card">
        <div class="card__body">
            <h4>Card Title</h4>
            <p>Use card grids to easily lay out columns of cards. Cards are sized naturally and break to new lines as needed.</p>
        </div>
        <div class="card__footer">
            <p>Marking a card section as a footer will keep it pinned to the bottom when the card is taller than its contents. This can be handy for actions or buttons, for example. Combine with text alignment classes or button groups for more flexibility.</p>
        </div>
    </div>
    <div class="card">
        <div class="card__body">
            <h4>Card Title</h4>
            <p>Use card grids to easily lay out columns of cards. Cards are sized naturally and break to new lines as needed.</p>
        </div>
        <div class="card__footer card__footer--secondary card__footer--borderless align-right">
            <a href="#0" class="more">Learn More <i class="fas fa-arrow-right"></i></a>
        </div>
    </div>
    <div class="card">
        <div class="card__body">
            <h4>Card Title</h4>
            <p>Use card grids to easily lay out columns of cards. Cards are sized naturally and break to new lines as needed.</p>
        </div>
        <div class="card__footer card__footer--borderless">
            <div class="button-group">
                <a href="#0" class="button">Action 1</a>
                <a href="#0" class="button button--secondary">Action 2</a>
            </div>
        </div>
    </div>
</div>

Card Title

Use card grids to easily lay out columns of cards. Cards are sized naturally and break to new lines as needed.

Card Title

Use card grids to easily lay out columns of cards. Cards are sized naturally and break to new lines as needed.

Card Title

Use card grids to easily lay out columns of cards. Cards are sized naturally and break to new lines as needed.

<div class="card-grid card-grid--compact">
    …
</div>

Compact card grids reduce spacing between cards.

Compact card grids reduce spacing between cards.

Compact card grids reduce spacing between cards.

<div class="card card--primary">
    …
</div>
<div class="card card--accent">
    …
</div>
<div class="card card--action">
    …
</div>
<div class="card card--fill-primary">
    …
</div>
<div class="card card--fill-accent">
    …
</div>
<div class="card card--fill-action">
    …
</div>
<div class="card card--inverse">
    …
</div>
Primary Card

Card body content, temporibus, nobis. Incidunt harum vel possimus nemo repudiandae facilis non quasi? Fuga suscipit provident voluptatibus dolore deserunt similique qui eos voluptatum voluptatem.

Accent Card

Card body content, temporibus, nobis. Incidunt harum vel possimus nemo repudiandae facilis non quasi? Fuga suscipit provident voluptatibus dolore deserunt similique qui eos voluptatum voluptatem.

Action Card

Card body content, temporibus, nobis. Incidunt harum vel possimus nemo repudiandae facilis non quasi? Fuga suscipit provident voluptatibus dolore deserunt similique qui eos voluptatum voluptatem.

Filled Primary Card

Card body content, temporibus, nobis. Incidunt harum vel possimus nemo repudiandae facilis non quasi? Fuga suscipit provident voluptatibus dolore deserunt similique qui eos voluptatum voluptatem.

Filled Accent Card

Card body content, temporibus, nobis. Incidunt harum vel possimus nemo repudiandae facilis non quasi? Fuga suscipit provident voluptatibus dolore deserunt similique qui eos voluptatum voluptatem.

Filled Action Card

Card body content, temporibus, nobis. Incidunt harum vel possimus nemo repudiandae facilis non quasi? Fuga suscipit provident voluptatibus dolore deserunt similique qui eos voluptatum voluptatem.

Inverse Card

Card body content, temporibus, nobis. Incidunt harum vel possimus nemo repudiandae facilis non quasi? Fuga suscipit provident voluptatibus dolore deserunt similique qui eos voluptatum voluptatem.

Icons

Icons are brought in via Font Awesome, and any icon in the Font Awesome 6 Pro collection may be used. Simply select an icon from that directory and copy its markup anywhere in the site.

<i class="fas fa-arrow-right"></i>
<i class="fas fa-binoculars"></i>
<i class="fas fa-bath"></i>
<i class="far fa-calendar-alt"></i>
<i class="fab fa-dropbox"></i>
<i class="fab fa-firefox"></i>
<i class="fas fa-expand-arrows-alt"></i>
<i class="fas fa-folder-open"></i>
<i class="far fa-image"></i>
<h1><i class="fas fa-arrow-right"></i></h1>
<h2><i class="fas fa-arrow-right"></i></h2>
<h3><i class="fas fa-arrow-right"></i></h3>

Icons inherit surrounding text sizes

<div class="highlight">
<i class="fas fa-arrow-right"></i>
</div>
<div style="color: #bada55;">
<i class="fas fa-arrow-right"></i>
</div>

Icons inherit surrounding text color

<i class="fas fa-expand-arrows-alt"></i>
<i class="fas fa-expand-arrows-alt fa-2x"></i>
<i class="fas fa-expand-arrows-alt fa-3x"></i>
<i class="fas fa-expand-arrows-alt fa-5x"></i>
<i class="fas fa-expand-arrows-alt fa-7x"></i>

Font Awesome also includes built-in sizing classes. Any class from fa-2x to fa-10x may be used.

Other Content  Back to top

Additional self-contained elements that can be used within content in order to enhance the look and feel.

<a href="#0" class="more">Learn More <i class="fas fa-arrow-right"></i></a>
<img src="https://placeimg.com/100/100/nature" alt="" class="img-left" />
<p>This image has been pulled to the side. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut voluptates voluptate, vel, culpa similique unde sapiente doloribus repudiandae illo fugit atque explicabo quibusdam recusandae optio sint quisquam, quam animi, maxime. Veniam adipisci facere porro enim et dolor magnam est tenetur amet debitis.</p>
<img src="https://placeimg.com/100/100/nature" alt="" class="img-right" />
<p>In quidem odit, ipsa sint fuga reprehenderit aut assumenda temporibus omnis repellendus! Temporibus dignissimos, magni, asperiores eaque, beatae perspiciatis ducimus dolorem sunt ad tenetur architecto at eligendi itaque maxime? Quibusdam!</p>

Note: the Sitefinity WYSIWYG editor includes options to float images manually. Both methods will work. The above classes have the benefit of including natural-feeling spacing and a maximum width by default.

These images have been pulled to the sides. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut voluptates voluptate, vel, culpa similique unde sapiente doloribus repudiandae illo fugit atque explicabo quibusdam recusandae optio sint quisquam, quam animi, maxime. Veniam adipisci facere porro enim et dolor magnam est tenetur amet debitis.

In quidem odit, ipsa sint fuga reprehenderit aut assumenda temporibus omnis repellendus! Temporibus dignissimos, magni, asperiores eaque, beatae perspiciatis ducimus dolorem sunt ad tenetur architecto at eligendi itaque maxime? Quibusdam!

<figure class="img-left">
<img src="https://placeimg.com/300/200/nature" alt="" />
<figcaption>This is a small snippet about this image</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione eveniet, sit quod quae aspernatur omnis molestias eligendi aperiam, architecto error debitis! Totam a doloremque, illo dolorum, aliquam iusto iste. Recusandae!</p>
<p>Minima libero dignissimos, temporibus! Minus sunt provident cumque temporibus hic recusandae consequuntur reprehenderit quis modi ratione, maiores minima. Possimus rerum, molestias officia.</p>

Note: img-left may be replaced with img-right or omitted altogether.

This is a small snippet about this image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione eveniet, sit quod quae aspernatur omnis molestias eligendi aperiam, architecto error debitis! Totam a doloremque, illo dolorum, aliquam iusto iste. Recusandae!

Minima libero dignissimos, temporibus! Minus sunt provident cumque temporibus hic recusandae consequuntur reprehenderit quis modi ratione, maiores minima. Possimus rerum, molestias officia.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores architecto iusto eum pariatur ut molestias eligendi laboriosam dignissimos sunt ea, facilis dolorum, vitae nisi ratione aliquid iure nostrum. Placeat, vero.</p>
<blockquote class="pull-quote">
<p>I'm a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat</p>
<cite class="pull-quote__attribution">Firstname Lastname</cite>
</blockquote>
<p>Officiis modi officia inventore nesciunt enim alias dignissimos iusto totam! Dolorem quibusdam placeat nam. Ipsum dolores vitae at sit impedit voluptatum. Possimus?</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores architecto iusto eum pariatur ut molestias eligendi laboriosam dignissimos sunt ea, facilis dolorum, vitae nisi ratione aliquid iure nostrum. Placeat, vero.

I’m a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat

Firstname Lastname

Officiis modi officia inventore nesciunt enim alias dignissimos iusto totam! Dolorem quibusdam placeat nam. Ipsum dolores vitae at sit impedit voluptatum. Possimus?

<blockquote class="pull-quote pull-quote--left">
<p>I'm a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat</p>
<cite class="pull-quote__attribution">Firstname Lastname</cite>
</blockquote>
<p>I'll flow up and around the quote, just like it's an <code>img-left</code>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores architecto iusto eum pariatur ut molestias eligendi laboriosam dignissimos sunt ea, facilis dolorum, vitae nisi ratione aliquid iure nostrum. Placeat, vero.</p>
<blockquote class="pull-quote pull-quote--right">
<p>I'm a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat</p>
<cite class="pull-quote__attribution">Firstname Lastname</cite>
</blockquote>
<p>I'll flow up and around the second quote as though it's an <code>img-right</code>. Officiis modi officia inventore nesciunt enim alias dignissimos iusto totam! Dolorem quibusdam placeat nam. Ipsum dolores vitae at sit impedit voluptatum. Possimus?</p>

Note: these will revert to full-width pull quotes for small screens

I’m a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat

Firstname Lastname

I’ll flow up and around the quote, just like it’s an img-left. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores architecto iusto eum pariatur ut molestias eligendi laboriosam dignissimos sunt ea, facilis dolorum, vitae nisi ratione aliquid iure nostrum. Placeat, vero.

I’m a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat

Firstname Lastname

I’ll flow up and around the second quote as though it’s an img-right. Officiis modi officia inventore nesciunt enim alias dignissimos iusto totam! Dolorem quibusdam placeat nam. Ipsum dolores vitae at sit impedit voluptatum. Possimus?

<ul class="item-list">
    <li class="item-list__item">
        <a href="#0" class="item-list__link">
            <div class="item-list__media">
                <img src="https://placeimg.com/120/120/nature" alt="" />
            </div>
            <div class="item-list__content">
                <h4 class="item-list__title">I'm a List of Content with Thumbnails</h4>
                <p class="item-list__date">January 1, 2018</p>
                <p class="item-list__description">Each item can have a date and a short description or abstract</p>
            </div>
        </a>
    </li>
    <li class="item-list__item">
        <a href="#0" class="item-list__link">
            <div class="item-list__media">
                <img src="https://placeimg.com/120/120/nature" alt="" />
            </div>
            <div class="item-list__content">
                <h4 class="item-list__title">Lorem Ipsum Sit Dolor Amet</h4>
                <p class="item-list__date">January 1, 2018</p>
                <p class="item-list__description">Consectetur adipisicing elit. Beatae iste maxime tempora dolores sed amet, excepturi, sit quam ducimus provident dolorem eum deserunt praesentium qui asperiores</p>
            </div>
        </a>
    </li>
</ul>

Note: 120px wide thumbnails are recommended here.

Forms  Back to top

Inputs and labels used to assemble HTML forms. For submit buttons, the above button classes may be used.

<input type="text" placeholder="Placeholder label" />
<textarea></textarea>
<textarea class="textarea-large"></textarea>

Alternatively, an inline min-height style may be used.

<label for="id-1">Stacked Label</label>
<input id="id-1" type="text" />
<p class="note">Help text or elaboration</p>

Help text or elaboration

<select>
<option value="value">Option</option>
<option value="value">Option</option>
</select>
<div>
<input id="id-3" type="radio" />
<label for="id-3">Radio input</label>
</div>
<div>
<input id="id-4" type="checkbox" />
<label for="id-4">Checkbox input</label>
</div>

The <div>s may be omitted if these should lay out inline with each other, or replaced with <p>s if additional vertical spacing is needed.

<label for="id-5" class="required">Required Field</label>
<input id="id-5" type="text" required="required" />
<div class="grid__unit grid__unit--1-2-m">
<label for="id-6" class="input-validation-error">Stacked Label</label>
<input id="id-6" type="text" class="input-validation-error" />
<p class="field-validation-error">This field has an error!</p>
</div>

This field has an error!

Grids  Back to top

This grid system is able to exist side-by-side with other grid systems such as Bootstrap or the Sitefinity page builder. If you’re planning on using those, this section may be safely skipped.

The WordPress page builder offers the ability to replace the classes of its grids with our own custom classes. This should be considered for cases where precision or complex responsive behavior is called for.

Grids consist of a container (a div with a class of grid) and any number of grid units (divs with varying grid__unit classes). These units can be used to easily create small layouts by combining smaller pieces to form a row (or many rows). Here’s a simple grid that puts two pieces of text side by side:

<div class="grid">
<div class="grid__unit grid__unit--1-2">
    <div class="card card--primary"><div class="card__body">This is the first bit of text</div></div>
</div>
<div class="grid__unit grid__unit--1-2">
    <div class="card card--primary"><div class="card__body">And this is the second</div></div>
</div>
</div>
This is the first bit of text
And this is the second

Note how the classes are fractional: a grid__unit--1-2 will take up 1/2 (50%) of the available space. A grid__unit--1-3 will take up 1/3 (33.3%), grid__unit--1-4 will take up 1/4 (25%), and so on. A grid__unit without any additional modifier classes will default to a width of 100%.

Sizes can be mixed and matched, and the grids will wrap to multiple rows:

<div class="grid__unit grid__unit--1-2"></div>
<div class="grid__unit grid__unit--1-4"></div>
<div class="grid__unit grid__unit--1-4"></div>
<div class="grid__unit grid__unit--2-5"></div>
<div class="grid__unit grid__unit--3-5"></div>

Grids can be made responsive by appending a breakpoint suffix (-s (small), -m (medium), and -l (large)) to the fractional classes. Those fractions will be applied only at the specified breakpoint and above. Resize your browser window to see the change:

<div class="grid__unit grid__unit--1-2-m grid__unit--1-3-l"></div>
<div class="grid__unit grid__unit--1-2-m grid__unit--1-3-l"></div>
<div class="grid__unit grid__unit--1-3-l"></div>

Classes are provided all the way down to 1/12 size.

1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
 
 
 
 
 
 
 
 
 
 
 
 

And, of course, these sizes can be composed to form unique rows. All fractions should be reduced (e.g. 4/12 should be converted to 1/3).

1/6
1/2
1/3
5/6
 
 
3/8
1/8
1/8
3/8

Spacing  Back to top

The stylesheet provides several utility classes for spacing. These classes define a direction, a magnitude, and an optional breakpoint as follows:

space-[direction]-[amount] or space-[direction]-[amount]-[breakpoint]

    direction
    t, r, b, or l, meaning top, right, bottom, and left, respectively
    amount
    A value of 0 will apply no spacing (useful for canceling out existing unwanted spacing). 100 is equivalent to one unit in the baseline grid (the body copy’s line height). 050 is half that, 200 is twice that, and so on. The full list of possible values is as follows: 0 (or 000), 025, 050, 075, 100, 150, 200, 250, 300, 350, 400
    breakpoint
    Currently supports only m, for spacing to be applied only at the medium breakpoint (traditional “mobile”/”not mobile” switchover) and up
<div class="space-b-025"></div>
<div class="space-b-050"></div>
<div class="space-b-100"></div>
<div class="space-b-200"></div>
<div class="space-b-300"></div>
<div></div>

Note: the blocks shown are illustrative and empty divs do not have this default style. The height of these blocks is one unit of the site’s baseline grid for visual reference

<div></div>
<div class="space-b-050 space-t-050 space-b-250-m space-t-250-m"></div>
<div></div>
<div class="space-r-300"></div>
<div></div>

Widgets  Back to top

Tabs

Tabs widgets can contain any number of tabs, so long as each has a corresponding pane (one tabs__tab per one tabs__pane). However, it’s not recommended to go over a small number of these, as small screens will have trouble fitting all the tabs into a single row.

RD will build preconfigured tabs widgets that will be available in the Layout section of Sitefinity’s page builder, but this section may provide a more technical understanding of what’s going on under the hood.

<div class="tabs tabs--standard">
<a class="tabs__tab">Tab 1</a>
<a class="tabs__tab">Tab 2</a>
<a class="tabs__tab">Tab 3</a>
<div class="tabs__pane">
    <p>Tab 1 content</p>
    <p>Architecto eum eius illum obcaecati consectetur ratione, harum, vitae, neque perspiciatis ipsam inventore consequuntur odio dicta. Amet tempora quod, obcaecati, rem voluptate doloribus maxime, officiis accusantium consectetur adipisci dolore odio!</p>
</div>
<div class="tabs__pane">
    <p>Tab 2 content</p>
    <p>Excepturi doloribus rerum libero necessitatibus quae eveniet voluptatibus cumque, praesentium natus vero eum consequatur cupiditate pariatur porro odio incidunt, eius culpa earum.</p>
</div>
<div class="tabs__pane">
    <p>Tab 3 content</p>
    <p>Labore saepe, aut eveniet incidunt reprehenderit. Iure vel molestiae dignissimos laboriosam quam nostrum explicabo expedita dolor tempore fuga odio odit placeat quo ipsum rerum unde ex tenetur, harum eius cupiditate libero quos! Accusamus mollitia eum, in aperiam veritatis alias eius ipsum dignissimos eligendi totam, atque impedit minima, ipsa enim.</p>
</div>
</div>
Tab 1 Tab 2 Tab 3

Tab 1 content

Architecto eum eius illum obcaecati consectetur ratione, harum, vitae, neque perspiciatis ipsam inventore consequuntur odio dicta. Amet tempora quod, obcaecati, rem voluptate doloribus maxime, officiis accusantium consectetur adipisci dolore odio!

Tab 2 content

Excepturi doloribus rerum libero necessitatibus quae eveniet voluptatibus cumque, praesentium natus vero eum consequatur cupiditate pariatur porro odio incidunt, eius culpa earum.

Tab 3 content

Labore saepe, aut eveniet incidunt reprehenderit. Iure vel molestiae dignissimos laboriosam quam nostrum explicabo expedita dolor tempore fuga odio odit placeat quo ipsum rerum unde ex tenetur, harum eius cupiditate libero quos! Accusamus mollitia eum, in aperiam veritatis alias eius ipsum dignissimos eligendi totam, atque impedit minima, ipsa enim.

Tabs can be automated, which means they’ll switch to the next tab automatically after a small interval. This can be helpful for building custom slideshows in the future.

<div class="tabs tabs--standard tabs--automated">
...
</div>
Tab 1 Tab 2 Tab 3

Tab 1 content

Tab 2 content

Tab 3 content

Tabs can also generate fragment identifiers based on the tab label, allowing users to link directly to a specific tab:

<div class="tabs tabs--standard tabs--use-fragments">
...
</div>
Tab 1 Tab 2 Tab 3

Tab 1 content

Tab 2 content

Tab 3 content

A vertical tabs style is also available. This is recommended over the horizontal style in cases where many tabs are needed.

<div class="tabs tabs--vertical">
<a class="tabs__tab">Tab 1</a>
<a class="tabs__tab">Tab 2</a>
<a class="tabs__tab">Tab 3</a>
<div class="tabs__pane">
    <p>Tab 1 content</p>
    <p>Architecto eum eius illum obcaecati consectetur ratione, harum, vitae, neque perspiciatis ipsam inventore consequuntur odio dicta. Amet tempora quod, obcaecati, rem voluptate doloribus maxime, officiis accusantium consectetur adipisci dolore odio!</p>
</div>
<div class="tabs__pane">
    <p>Tab 2 content</p>
    <p>Excepturi doloribus rerum libero necessitatibus quae eveniet voluptatibus cumque, praesentium natus vero eum consequatur cupiditate pariatur porro odio incidunt, eius culpa earum.</p>
</div>
<div class="tabs__pane">
    <p>Short panes should extend past all tabs</p>
</div>
</div>
Tab 1 Tab 2 Tab 3

Tab 1 content

Architecto eum eius illum obcaecati consectetur ratione, harum, vitae, neque perspiciatis ipsam inventore consequuntur odio dicta. Amet tempora quod, obcaecati, rem voluptate doloribus maxime, officiis accusantium consectetur adipisci dolore odio!

Tab 2 content

Excepturi doloribus rerum libero necessitatibus quae eveniet voluptatibus cumque, praesentium natus vero eum consequatur cupiditate pariatur porro odio incidunt, eius culpa earum.

Short panes should extend past all tabs

Toggles

A toggle is a simple class switcher that adds or removes the state class is-active to/from itself and any number of target elements. Elements with the class toggle-target will be hidden unless toggled on, making it easy to add a simple show/hide behavior to elements.

Anything with a data-toggle-target attribute will be made into a toggle. This can include links, buttons, plain text, images, and more. Note that the default behavior of this element will be suppressed; for example, a link will no longer take the user to that link’s href value.

The value of the data-toggle-target attribute will determine the element or elements to be toggled. This value may be a keyword (next, parentnext) or a CSS selector (#some-id, .some-class, .complex > li + li).

<button type="button" class="button space-b-2" data-toggle-target="next">Toggle next element</button>
<p class="toggle-target">I'm hidden until the toggle is clicked!</p>

I’m hidden until the toggle is clicked!

Like tabs, we can use url fragments to link to a specific toggle and make sure it’s open on page load

<button type="button" class="button space-b-2" data-toggle-target="next" data-toggle-fragment="true">Toggle with fragments</button>
<p class="toggle-target">Check out your browser address bar now that you can see me. You can also reload the page and this toggle will still be active!</p>

Check out your browser address bar now that you can see me. You can also reload the page and this toggle will still be active!

Toggles may also be set to automatically deactivate based on external factors. We can deactivate a toggle if the esc key is pressed or if the user clicks somewhere outside the toggle’s elements.

<button type="button" class="button space-b-2" data-toggle-target="next" data-toggle-exit="esc">Close me with the esc key</button>
<p class="toggle-target">If you can see me, press escape to hide me</p>
<button type="button" class="button space-b-2" data-toggle-target="next" data-toggle-exit="esc outside">Close me with esc or by clicking outside</button>
<p class="toggle-target">If you can see me, press escape or click anywhere else on the page to hide me</p>

If you can see me, press escape to hide me

If you can see me, press escape or click anywhere else on the page to hide me

Accordions

This is a stylized usage of the above toggles (therefore, any of the above toggle enhancements are available for use here). In an accordion, content is laid out in long ‘tabs’ that can be shown or hidden.

As with the tabs, RD will build an accordion widget that will be available in the Layout section of the Sitefinity page builder.

<div class="accordion">
    <div class="accordion__label" data-toggle-target="next">Accordion Label 1 <i class="fa-regular fa-arrow-right"></i></div>
    <div class="accordion__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum qui sit quo est deserunt, quae, eveniet itaque doloribus possimus, quia fugit dolores voluptate autem unde cum error eaque voluptatem dolorem.</p>
    </div>
    <div class="accordion__label" data-toggle-target="next">Accordion Label 2 <i class="fa-regular fa-arrow-right"></i></div>
    <div class="accordion__content">
        <p>Veritatis totam eum hic distinctio ex ut, culpa, suscipit dignissimos aliquam amet voluptates quas, non assumenda maxime eligendi mollitia. Repellat vel, ipsam.</p>
    </div>
    <div class="accordion__label" data-toggle-target="next">Accordion Label 3 <i class="fa-regular fa-arrow-right"></i></div>
    <div class="accordion__content">
        <p>Doloremque modi, veritatis obcaecati natus iure expedita adipisci error, a iusto aspernatur quia! Deserunt illum adipisci cumque necessitatibus et, vel, maxime quae consectetur, ut vitae, officia doloribus quaerat. Voluptas repellendus pariatur, culpa ipsum modi accusamus aliquid, ut unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus doloremque, tempore, excepturi blanditiis id tempora praesentium nam, quasi molestias unde tenetur! Architecto error, voluptates totam dolorum illo culpa omnis dolorem doloribus odio laboriosam, aspernatur, suscipit tenetur eum modi, alias voluptatem debitis reprehenderit. Illo voluptates impedit asperiores quia qui, expedita architecto adipisci doloribus neque, numquam soluta sint exercitationem repellat culpa veniam repellendus blanditiis eos at laudantium. Blanditiis ad neque, nam, nulla voluptatem voluptatum porro iure ipsa ducimus quibusdam recusandae vero nobis asperiores possimus ex dolore rerum earum, error itaque omnis architecto. Ex itaque quibusdam, nesciunt voluptatem ullam. Corporis minus placeat natus!</p>
    </div>
</div>
Accordion Label 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum qui sit quo est deserunt, quae, eveniet itaque doloribus possimus, quia fugit dolores voluptate autem unde cum error eaque voluptatem dolorem.

Accordion Label 2

Veritatis totam eum hic distinctio ex ut, culpa, suscipit dignissimos aliquam amet voluptates quas, non assumenda maxime eligendi mollitia. Repellat vel, ipsam.

Accordion Label 3

Doloremque modi, veritatis obcaecati natus iure expedita adipisci error, a iusto aspernatur quia! Deserunt illum adipisci cumque necessitatibus et, vel, maxime quae consectetur, ut vitae, officia doloribus quaerat. Voluptas repellendus pariatur, culpa ipsum modi accusamus aliquid, ut unde.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus doloremque, tempore, excepturi blanditiis id tempora praesentium nam, quasi molestias unde tenetur! Architecto error, voluptates totam dolorum illo culpa omnis dolorem doloribus odio laboriosam, aspernatur, suscipit tenetur eum modi, alias voluptatem debitis reprehenderit. Illo voluptates impedit asperiores quia qui, expedita architecto adipisci doloribus neque, numquam soluta sint exercitationem repellat culpa veniam repellendus blanditiis eos at laudantium. Blanditiis ad neque, nam, nulla voluptatem voluptatum porro iure ipsa ducimus quibusdam recusandae vero nobis asperiores possimus ex dolore rerum earum, error itaque omnis architecto. Ex itaque quibusdam, nesciunt voluptatem ullam. Corporis minus placeat natus!

Additional accordion styles are available:

<div class="accordion">
    <div class="accordion__label accordion__label--primary" data-toggle-target="next">Primary <i class="fa-regular fa-arrow-right"></i></div>
    <div class="accordion__content accordion__content--primary">
        …
    </div>
    <div class="accordion__label accordion__label--highlight" data-toggle-target="next">Highlight <i class="fa-regular fa-arrow-right"></i></div>
    <div class="accordion__content accordion__content--highlight">
        …
    </div>
    <div class="accordion__label accordion__label--action" data-toggle-target="next">Action <i class="fa-regular fa-arrow-right"></i></div>
    <div class="accordion__content accordion__content--action">
        …
    </div>
    <div class="accordion__label accordion__label--primary-solid" data-toggle-target="next">Primary (Solid) <i class="fa-regular fa-arrow-right"></i></div>
    <div class="accordion__content accordion__content--primary-solid">
        …
    </div>
    <div class="accordion__label accordion__label--highlight-solid" data-toggle-target="next">Highlight (Solid) <i class="fa-regular fa-arrow-right"></i></div>
    <div class="accordion__content accordion__content--highlight-solid">
        …
    </div>
    <div class="accordion__label accordion__label--action-solid" data-toggle-target="next">Action (Solid) <i class="fa-regular fa-arrow-right"></i></div>
    <div class="accordion__content accordion__content--action-solid">
        …
    </div>
</div>
Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum qui sit quo est deserunt, quae, eveniet itaque doloribus possimus, quia fugit dolores voluptate autem unde cum error eaque voluptatem dolorem.

Highlight

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum qui sit quo est deserunt, quae, eveniet itaque doloribus possimus, quia fugit dolores voluptate autem unde cum error eaque voluptatem dolorem.

Action

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum qui sit quo est deserunt, quae, eveniet itaque doloribus possimus, quia fugit dolores voluptate autem unde cum error eaque voluptatem dolorem.

Primary (Solid)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum qui sit quo est deserunt, quae, eveniet itaque doloribus possimus, quia fugit dolores voluptate autem unde cum error eaque voluptatem dolorem.

Highlight (Solid)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum qui sit quo est deserunt, quae, eveniet itaque doloribus possimus, quia fugit dolores voluptate autem unde cum error eaque voluptatem dolorem.

Action (Solid)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum qui sit quo est deserunt, quae, eveniet itaque doloribus possimus, quia fugit dolores voluptate autem unde cum error eaque voluptatem dolorem.

Horizontal Scrollers

A section that allows for horizontal scrolling through a set of items, either natively or via left and right control buttons. By default, items are sized to a fraction of the available visible space, and each item’s contents are packed to the vertical center of the slider:

<section class="horizontal">
    <div class="horizontal__scroller">
        <div class="horizontal__content">
            <div class="horizontal__item">
                <a href="#0">
                    <img src="https://placeimg.com/500/300/nature" alt="" />
                </a>
            </div>
            …
        </div>
    </div>
</section>

Alternatively, items can assume their natural dimensions and be packed as tightly as possible:

<section class="horizontal">
    <div class="horizontal__scroller">
        <div class="horizontal__content horizontal__content--pack">
            <div class="horizontal__item">
                <a href="#0">
                    <img src="https://placeimg.com/200/100/nature" alt="" />
                </a>
            </div>
            …
        </div>
    </div>
</section>

Vertical alignment classes are available on the content container:

<section class="horizontal">
    <div class="horizontal__scroller">
        <div class="horizontal__content horizontal__content--align-top horizontal__content--pack">
            <div class="horizontal__item">
                <a href="#0">
                    <img src="https://placeimg.com/200/100/nature" alt="" />
                </a>
                …
            </div>
        </div>
    </div>
</section>
<section class="horizontal">
    <div class="horizontal__scroller">
        <div class="horizontal__content horizontal__content--align-bottom horizontal__content--pack">
            <div class="horizontal__item">
                <a href="#0">
                    <img src="https://placeimg.com/200/100/nature" alt="" />
                </a>
                …
            </div>
        </div>
    </div>
</section>

Since the horizontal__content div is a flex container, this makes it a good fit for combining with cards:

<section class="horizontal">
    <div class="horizontal__scroller">
        <div class="horizontal__content">
            <div class="horizontal__item card">
                <img src="https://placeimg.com/500/250/nature" alt="" class="card__image" />
                <div class="card__body">
                    <h3>Card 1</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim delectus animi illo deleniti tempore minima iure, mollitia sapiente. Illum incidunt facere optio labore sint dolor sapiente similique quas, beatae illo.</p>
                </div>
                <div class="card__footer">
                    <div class="button-group button-group--justify-stretch">
                        <a href="#0" class="button">Call to Action</a>
                    </div>
                </div>
            </div>
            …
        </div>
    </div>
</section>

Card 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim delectus animi illo deleniti tempore minima iure, mollitia sapiente. Illum incidunt facere optio labore sint dolor sapiente similique quas, beatae illo.

Card 2

Dolor sapiente ab quisquam ducimus amet soluta at!

Card 3

Aspernatur, necessitatibus aut accusantium autem quisquam cupiditate nostrum ea obcaecati totam impedit, velit, iure quam placeat quibusdam voluptatem! Ratione ea fugit qui!

Card 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, vitae blanditiis earum quis molestiae architecto libero omnis, mollitia dolore quisquam sequi distinctio est illum natus nostrum maiores soluta, quas doloremque.

Card 5

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, commodi ipsa officia quis necessitatibus quae magni? Mollitia, similique quod? Ipsam quisquam error sit delectus natus adipisci quidem nulla similique consequuntur.

Card 6

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea, accusamus repellat voluptatum ut, similique amet ratione commodi hic, asperiores fugiat reprehenderit enim voluptatem cum architecto unde nam soluta maiores sed?

Card 7

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum impedit velit vel hic expedita, assumenda magnam quibusdam distinctio eligendi sed officia laudantium officiis doloribus dolorem vitae? Nesciunt ratione pariatur facilis.

Controls can be configured to jump the user to the very start of the slider if clicking the right arrow at the very end, and vice-versa:

<section class="horizontal horizontal--loop">
    <div class="horizontal__scroller">
        <div class="horizontal__content horizontal__content--pack">
            <div class="horizontal__item">
                <a href="#0">
                    <img src="https://placeimg.com/200/100/nature" alt="" />
                </a>
            </div>
            …
        </div>
    </div>
</section>

Truncators

Provides the ability to limit the visual height of a container or to limit a container to a certain number of shown items. A button is then generated so that the user can view the rest of the items.

<div data-truncate-to="3 lines">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam pariatur architecto cum adipisci voluptatum id, odio ipsum. Quos corporis nostrum earum atque consequuntur ducimus inventore eius tempore impedit, consequatur in, officiis, sapiente, deleniti veniam aliquam? Rerum enim saepe hic officia minus facilis eum repellat! Fugiat, eius eum dignissimos veniam aliquid, iste asperiores quaerat quibusdam praesentium, perferendis, itaque quis minus rem!</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam pariatur architecto cum adipisci voluptatum id, odio ipsum. Quos corporis nostrum earum atque consequuntur ducimus inventore eius tempore impedit, consequatur in, officiis, sapiente, deleniti veniam aliquam? Rerum enim saepe hic officia minus facilis eum repellat! Fugiat, eius eum dignissimos veniam aliquid, iste asperiores quaerat quibusdam praesentium, perferendis, itaque quis minus rem!

<div data-truncate-to="127px">
<img src="http://placeimg.com/200/20/nature" alt="" />
</div>
<ul class="item-list" data-truncate-to="2 items">
<li class="item-list__item">
    <a href="#0" class="item-list__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, deleniti!</a>
    <div class="item-list__description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt repellendus quibusdam suscipit impedit debitis a. Nemo odio sed, rem est.</p>
    </div>
</li>
…
</ul>

Note: an “item” is any immediate child element of the container.

Frontend API  Back to top

While the necessary JavaScript is automatically applied to the above widgets, sometimes the developer must manipulate them after-the-fact through code. The site JavaScript exposes a number of options through the global RDJS object.

Tabs

RDJS.tabs.list();

Returns an array of objects, or an empty array if no such objects exist yet. Each object represents one insular collection of tabs on the page.

RDJS.tabs.get(selector);

Returns a single object whose container (the wrapper around the tabs that in the example above has the tabs class) first matches a given CSS selector. Returns null if no such object is found.

selector: a string containing any valid CSS selector.

RDJS.tabs.find(selector);

Returns all objects whose container matches a given CSS selector. Returns an empty array if no such objects are found.

selector: a string containing any valid CSS selector.

RDJS.tabs.add(nodes, options);

Adds tabs functionality to a given container element or elements.

nodes: a node, nodeList, or array of elements. Each node should be a container containing a set of tabs and panes.

options: an options object to be assigned to this group. Anything about a tab group can be overwritten here. Defaults:

  • tabSelector (string): '.tabs__tab'. Widget will look for these tabs upon initialization.
  • paneSelector (string): '.tabs__pane'. Widget will look for these panes upon initialization.
  • nextSelector (string): '.tabs__next'. Widget will look for these ‘next tab’ buttons upon initialization.
  • previousSelector (string): '.tabs__previous'. Widget will look for these ‘previous tab’ buttons upon initialization.
  • playSelector (string): '.tabs__play'. Widget will look for these ‘play’ buttons upon initialization.
  • pauseSelector (string): '.tabs__pause'. Widget will look for these ‘pause’ buttons upon initialization.
  • automatedSelector (string): '.is-automated'. Widget will look whether the container matches the given selector, and if so, will automatically play it.
  • automated (boolean): false. Automation may be assigned directly.
  • slideDuration (integer): 7000. When these tabs are playing, the number of milliseconds to wait before switching.
  • activeClass (string): 'is-active'. The widget will assign this class to the current tab and pane.
  • nextClass (string): 'is-next'. The widget will assign this class to the tab and pane up next.
  • previousClass (string): 'is-previous'. The widget will assign this class to the previous tab and pane.
  • playingClass (string): 'is-playing'. The widget will assign this class to the container while this group is playing.
  • onInit (function): null. This callback will execute when the instance has successfully initialized.
  • onChange (function): null. This callback will execute whenever the tab changes.
  • onPlay (function): null. This callback will execute whenever the group begins automated tab playthrough.
  • onPause (function): null. This callback will execute whenever the group pauses automated tab playthrough.
var foo = RDJS.tabs.get('#my-tabs');
console.log(foo.slideDuration);

Most properties of a given tab group object may be accessed:

  • TabGroup.container (element): the container element for these tabs.
  • TabGroup.automated (boolean): does this group automatically change/rotate?
  • TabGroup.tabs (array): all ‘tab’ elements in this group.
  • TabGroup.panes (array): all ‘pane’ elements in this group.
  • TabGroup.nextTriggers (array): all ‘next tab’ controls in this group.
  • TabGroup.previousTriggers (array): all ‘previous tab’ controls in this group.
  • TabGroup.pauseTriggers (array): all ‘pause’ controls in this group.
  • TabGroup.playTriggers (array): all ‘play’ controls in this group.
  • TabGroup.slideDuration (integer): if this is an automated group, the number of milliseconds to wait before advancing to the next tab.
  • TabGroup.active (integer): the currently active tab. 0-based.
  • TabGroup.count (integer): the number of tabs/slides in this group. 1-based.
var foo = RDJS.tabs.get('#my-tabs');
foo.changeTo(index);
foo.pause();
foo.play();

A given tabs widget may be controlled programmatically.

changeTo(index): switches to a specified tab.

  • index: integer (0-based) specifying the specific tab to switch to, or string 'next' or 'previous'

pause(): pauses an automated slideshow

play(): plays or resumes a slideshow

Toggles

RDJS.toggles.list();

Returns an array of toggle objects, or an empty array if no such objects exist yet. Each object represents one toggle trigger and zero to many toggle targets.

RDJS.toggles.get(selector);

Returns a single toggle object whose origin (the toggle’s trigger) first matches a given CSS selector. Returns null if no such object is found.

selector: a string containing any valid CSS selector.

RDJS.toggles.find(selector);

Returns an array of toggle objects whose origins match a given CSS selector. Returns an empty array if no such object is found.

selector: a string containing any valid CSS selector.

RDJS.toggles.add(nodes, options);

Adds toggle functionality to elements.

nodes: a node, nodeList, or array of elements.

options: an options object to be assigned to this toggle. Anything about a tab group can be overwritten here. Defaults:

  • targets (array): []. Targets may be assigned programmatically; otherwise, the widget will look for targets as specified in the data-toggle-target attribute.
  • activeClass (string): 'is-active'. This is the class that will be toggled on both the origin and targets.
  • onInit (function): null. This callback will be executed upon successful initialization of the instance.
  • onActivate (function): null. This callback will be executed upon activation of this toggle.
var foo = RDJS.toggles.get('#my-toggle');
console.log(foo);
console.log(foo.origin);

Some properties of a given toggle object may be accessed:

  • origin (Element): the toggle’s trigger element.
  • targets (array): all target elements that will be affected by a click on the trigger.
  • activeClass (string): the class that will be toggled on the origin and targets upon activation.
var foo = RDJS.toggles.get('#my-toggle');
foo.activate();

Toggles may be activated programmatically using activate(). By default, calling this will switch the toggle on if it’s off and vice-versa.

An optional boolean parameter may be passed to Toggle.activate(). Passing true will force the toggle on (even if it’s already on when this is called), and false forces it off.