<h1>Heading 1</h1>

Heading 1

<h2>Heading 2</h2>

Heading 2

<h3>Heading 3</h3>

Heading 3

<h4>Heading 4</h4>

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>

<div class="align-right">This text has been right-aligned.</div>

<div class="align-center">This text has been centered.</div>

<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.

<a href="#0" class="button">Standard Button</a>

<a href="#0" class="button button--highlight">Highlighted button</a>

<a href="#0" class="button button--action">Action button</a>

<a href="#0" class="button button--hollow">Primary hollow button</a>

<a href="#0" class="button button--hollow--highlight">Highlighted hollow button</a>

<a href="#0" class="button button--warn">Warning button</a>

<a href="#0" class="button button--cancel">Cancel button</a>

<a href="#0" class="button button--small">Small Button</a>

<a href="#0" class="button button--large">Large button</a>

<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">
    <a href="#0" class="button button--highlight">Register</a>
    <a href="#0" class="button button--cancel">Learn More</a>
</div>

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

<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.

<a href="#0" class="more">Learn More <i class="fas fa-arrow-right"></i></a>

<img src="https://placeimg.com/100/100" 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" 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" 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.

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__title">I'm a List of Content</a>
        <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>
    </li>
    <li class="item-list__item">
        <a href="#0" class="item-list__title">Lorem Ipsum Sit Dolor Amet</a>
        <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>
    </li>
</ul>

• I'm a List of Content

  January 1, 2018

  Each item can have a date and a short description or abstract

• Lorem Ipsum Sit Dolor Amet

  January 1, 2018

  Consectetur adipisicing elit. Beatae iste maxime tempora dolores sed amet, excepturi, sit quam ducimus provident dolorem eum deserunt praesentium qui asperiores

<ul class="item-list">
    <li class="item-list__item">
        <a href="#0" class="item-list__thumbnail"><img src="[image url]" alt="" /></a>
        <div class="item-list__content">
            <a href="#0" class="item-list__title">I'm a List of Content with Thumbnails</a>
            <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>
    </li>
    <li class="item-list__item">
        <a href="#0" class="item-list__thumbnail"><img src="[image url]" alt="" /></a>
        <div class="item-list__content">
            <a href="#0" class="item-list__title">Lorem Ipsum Sit Dolor Amet</a>
            <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>
    </li>
</ul>

Note: 120px wide thumbnails are recommended here.

• 
  I'm a List of Content with Thumbnails

  January 1, 2018

  Each item can have a date and a short description or abstract

• 
  Lorem Ipsum Sit Dolor Amet

  January 1, 2018

  Consectetur adipisicing elit. Beatae iste maxime tempora dolores sed amet, excepturi, sit quam ducimus provident dolorem eum deserunt praesentium qui asperiores

<div class="content-box">
    <h3>Content Box</h3>
    <p>This is a boxed-off piece of content.</p>
    <p>This box can contain any other content that's needed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam itaque quis deserunt aliquid, maiores aperiam rem enim quia animi consequatur! Laboriosam, dolore, a! Doloribus inventore aperiam at, facilis ad, nisi.</p>
</div>

Note: the containing <div>s will be provided in the Sitefinity page builder as layout widgets.

<div class="content-box content-box--highlight">
    <h3>Content Box</h3>
    <p>This is a highlighted version of the content box.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, iste. Soluta illum nulla itaque veritatis nemo maxime quaerat, enim voluptate, error totam reprehenderit fugiat optio beatae molestiae reiciendis accusamus quidem.</p>
</div>

<div class="content-box content-box--action">
    <h3>Content Box</h3>
    <p>This is an action-oriented bit of content.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam itaque quis deserunt aliquid, maiores aperiam rem enim quia animi consequatur! Laboriosam, dolore, a! Doloribus inventore aperiam at, facilis ad, nisi.</p>
</div>

<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

<div class="side-label">
    <label for="id-2">Side Label</label>
    <input id="id-2" type="text" />
    <p class="note">Help text or elaboration</p>
</div>

<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!

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

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.