RTE Page Content

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is bolded/strong text. Suspendisse at ornare leo. This is italicized text. Fusce magna erat, hendrerit eget dignissim non, lobortis id nunc. This is underlined text. Curabitur gravida urna in rutrum semper. Here is an inline link within a paragraph, at finibus ligula. Donec eget velit cursus, dignissim diam auctor, commodo dui. Nullam tristique mollis ex at interdum. Aenean eu aliquam lacus. Etiam sodales viverra magna, sed eleifend nisi dignissim sed. Sed ac sem nisi.

Nunc lobortis purus at ullamcorper malesuada. Suspendisse potenti. Quisque eleifend turpis vel lectus ullamcorper, id dapibus tortor consectetur. Mauris porta tellus et sodales blandit. Nullam convallis efficitur erat. Nullam et felis id magna porta aliquet ut quis ipsum. Praesent sodales molestie dui quis consequat. Etiam orci eros, volutpat non porttitor et, cursus sed enim. Curabitur ut velit lorem. Donec quis ipsum nulla.

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  • Unordered list item 4
  • Unordered list item 5
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
  4. Ordered list item 4
  5. Ordered list item 5

This is a blockquote that should be styled accordingly. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Header Header Header
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Inline image (set to large size 600x600):

Alt text for image

Inline video (RTE YouTube embed):

Native Accordions

The following are accordions created using the details and summary elements. These are native to the browser and don't require any Javascript to function - although we have a small script to power animation.

This format should be used whenever possible, as its expanded/collapsed state is better announced to screen readers than the custom accordion described below.

Accordion Button

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae volutpat sem. Nulla maximus nibh viverra eros bibendum pretium. Suspendisse luctus nulla a erat sollicitudin, eu tempus diam congue. Mauris mattis varius est eget dapibus. Donec in dictum libero. Suspendisse id orci laoreet, suscipit nulla id, euismod leo. Ut malesuada finibus purus quis convallis. Aliquam dolor nunc, vestibulum ac felis eget, egestas placerat justo. Phasellus pretium luctus risus.

Accordion Button

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae volutpat sem. Nulla maximus nibh viverra eros bibendum pretium. Suspendisse luctus nulla a erat sollicitudin, eu tempus diam congue. Mauris mattis varius est eget dapibus. Donec in dictum libero. Suspendisse id orci laoreet, suscipit nulla id, euismod leo. Ut malesuada finibus purus quis convallis. Aliquam dolor nunc, vestibulum ac felis eget, egestas placerat justo. Phasellus pretium luctus risus.

Accordion Button

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae volutpat sem. Nulla maximus nibh viverra eros bibendum pretium. Suspendisse luctus nulla a erat sollicitudin, eu tempus diam congue. Mauris mattis varius est eget dapibus. Donec in dictum libero. Suspendisse id orci laoreet, suscipit nulla id, euismod leo. Ut malesuada finibus purus quis convallis. Aliquam dolor nunc, vestibulum ac felis eget, egestas placerat justo. Phasellus pretium luctus risus.

Custom Accordions

The following are accordions created using a list. This is the most flexible format, as it allows for any markup to be used inside the accordion content. Since the markup is so flexible, it's geared toward setups where accordion functionality might be device-specific.

This approach should only be used if the native accordion approach isn't possible.

  • Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae volutpat sem. Nulla maximus nibh viverra eros bibendum pretium. Suspendisse luctus nulla a erat sollicitudin, eu tempus diam congue. Mauris mattis varius est eget dapibus. Donec in dictum libero. Suspendisse id orci laoreet, suscipit nulla id, euismod leo. Ut malesuada finibus purus quis convallis. Aliquam dolor nunc, vestibulum ac felis eget, egestas placerat justo. Phasellus pretium luctus risus.

  • Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae volutpat sem. Nulla maximus nibh viverra eros bibendum pretium. Suspendisse luctus nulla a erat sollicitudin, eu tempus diam congue. Mauris mattis varius est eget dapibus. Donec in dictum libero. Suspendisse id orci laoreet, suscipit nulla id, euismod leo. Ut malesuada finibus purus quis convallis. Aliquam dolor nunc, vestibulum ac felis eget, egestas placerat justo. Phasellus pretium luctus risus.

  • Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae volutpat sem. Nulla maximus nibh viverra eros bibendum pretium. Suspendisse luctus nulla a erat sollicitudin, eu tempus diam congue. Mauris mattis varius est eget dapibus. Donec in dictum libero. Suspendisse id orci laoreet, suscipit nulla id, euismod leo. Ut malesuada finibus purus quis convallis. Aliquam dolor nunc, vestibulum ac felis eget, egestas placerat justo. Phasellus pretium luctus risus.

Buttons









Modals



Standard Modal

Click on the close button, click the overlay, or hit escape to close. Keyboard focus will be returned to the trigger button.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac cursus leo. Donec a neque id mi ultrices tristique non in velit. Aenean dictum lectus id lobortis efficitur. Ut ut lacinia nibh, sed egestas lorem. Pellentesque scelerisque dictum dictum. Aenean efficitur id justo at ultrices. Sed consectetur ut arcu ut egestas.

Pellentesque ac tincidunt ligula, et vestibulum dui. In auctor, ante et porttitor pharetra, velit urna pulvinar arcu, vitae pulvinar augue mauris sit amet diam. Quisque feugiat eros metus, ac dapibus neque porttitor sit amet. Nullam a lacus id orci dictum fringilla a ac sem. Vivamus commodo non neque et eleifend. In tortor orci, mollis vitae diam et, blandit hendrerit leo. Integer tempor aliquet risus ut sodales.

Integer ut consequat nulla. Mauris sem tellus, interdum sed consequat eu, suscipit vitae felis. Proin vestibulum, neque ut euismod euismod, eros tortor accumsan tellus, at maximus odio massa a urna. Etiam eget ex ipsum. Fusce vulputate sapien et lorem malesuada, ut pellentesque mauris faucibus. Phasellus sodales tincidunt justo, sagittis commodo turpis bibendum in. Integer interdum nulla in felis sagittis molestie. Fusce risus odio, tristique vitae nulla vitae, dictum pulvinar nibh. Mauris volutpat laoreet libero sed tempor. Cras turpis sapien, elementum ac nibh ut, gravida tempus ligula. Morbi quis leo ligula. Nunc non scelerisque risus, non ultrices magna.

Mauris tellus nunc, rutrum et posuere ac, dictum sit amet lectus. Cras sed lacus egestas, congue justo at, bibendum massa. Praesent aliquet at orci sit amet facilisis. Duis et nibh turpis. Aliquam fermentum tellus id mauris volutpat scelerisque. Maecenas posuere, arcu sed laoreet tempus, urna elit imperdiet quam, eget aliquet quam mi quis mauris. Etiam porttitor mauris ac felis congue convallis. Integer ultricies maximus augue sit amet sollicitudin. Vivamus ut purus in nulla hendrerit porttitor. Duis suscipit augue sed urna maximus sagittis. In mattis maximus ornare. Nunc volutpat ullamcorper nisi nec efficitur.

Nested Modal

Click on the close button, click the overlay, or hit escape to close. Keyboard focus will be returned to the trigger button.

This modal's button is nested inside another modal. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac cursus leo. Donec a neque id mi ultrices tristique non in velit. Aenean dictum lectus id lobortis efficitur. Ut ut lacinia nibh, sed egestas lorem. Pellentesque scelerisque dictum dictum. Aenean efficitur id justo at ultrices. Sed consectetur ut arcu ut egestas.



Vimeo Modal

This modal has a type of 'vimeo'. It has the Vimeo video ID passed to the modal snippet, and that iFrame is then lazyloaded. This is set up so the snippet will work easily when using the section video_url input type, which gives accesss to "id" and "type" for the video. Those values can be directly used with the modal snippet.

YouTube Modal

This modal has a type of 'youtube'. It has the YouTube video ID passed to the modal snippet, and that iFrame is then lazyloaded. This is set up so the snippet will work easily when using the section video_url input type, which gives accesss to "id" and "type" for the video. Those values can be directly used with the modal snippet.

Standard Product Options / Pill Buttons

Color Swatches

Checkboxes

Radio Buttons

Quantity Input

Text/Select Fields

Forgot your password?
Forgot your password?
Error microcopy goes here

Sliders

Note that slider documentation lives in the starter theme wiki, and includes extensive documentation on how to use the slider, its accessibility features, and its file structure.

Sliders can be initialized through the markup, by using a data attribute, or they can be initialized in a JS file. The data attribute method is best suited for sliders whose settings need to be controlled via section settings.



Data Attribute Initialization

Slide 1 of 6
Slide 2 of 6
Slide 3 of 6
Slide 4 of 6
Slide 5 of 6
Slide 6 of 6
Slider Controls


Javascript Initialization

Slide 1 of 6
Slide 2 of 6
Slide 3 of 6
Slide 4 of 6
Slide 5 of 6
Slide 6 of 6
Slider Controls