Campaign Right
Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do. Once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?"
- List Item One
- List Item Two
- List Item Three
- List Item Four
- List Item Five
Darkness cannot drive out darkness: only light can do that. Hate cannot drive out hate: only love can do that.
Martin Luther King Jr.
There was nothing so very remarkable in that, nor did Alice think it so very much out of the way to hear the Rabbit say to itself, "Oh dear! Oh dear! I shall be too late!" But when the Rabbit actually took a watch out of its waistcoat-pocket and looked at it and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and, burning with curiosity, she ran across the field after it and was just in time to see it pop down a large rabbit-hole, under the hedge. In another moment, down went Alice after it!
Heading 1
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph, List and Link Styles
Test paragraph for link styling, test link. Phasellus auctor, velit non commodo rutrum, felis wisi faucibus ligula, facilisis ornare sem magna a magna. Quisque orci risus, molestie vel, interdum eu, bibendum id, eros.
Unordered List
- List item one
- Another list item to test wrapping. Morbi consectetuer est in neque. Etiam ullamcorper, justo sed scelerisque condimentum, quam arcu tincidunt lorem, ac placerat felis massa vel neque.
- Nested unordered list
- Second list item
- List item 3
Unordered List with style "Plain-List"
- List item one
- List item two
- List item three
Ordered List
- List item one
- Nested ordered list item 1
- Nested ordered list item 2
- The second list item
- A third list item
Two Column List
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
Three Column List
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
- Item7
- Item8
- Item9
Four Column List
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
- Item7
- Item8
- Item9
- Item10
- Item11
Buttons
"Button" style on a link
"Button Secondary" style on a link
Tab Container
Accessible Tab Container
Tab Heading 1
This accordion is styled as an accordion on small resolutions and tabs at large resolutions.
Tab Heading 2
All these toggles are H3s. These can be changed to H2s or lower headings. Remember to nest headings in order appropriately on the page to meet WCAG 2.0 success criteria.
Tab Heading 3
Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like, but please be cautious in doing so as you do not want to complicate the page.
Tabs to Accordions
Accessible Tab Container on large screens, Accordions on small screen sizes
Tab Heading 1
This accordion is styled as an accordion on small resolutions and tabs at large resolutions.
Tab Heading 2
All these toggles are H3s. These can be changed to H2s or lower headings. Remember to nest headings in order appropriately on the page to meet WCAG 2.0 success criteria.
Tab Heading 3
Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like, but please be cautious in doing so as you do not want to complicate the page.
Accordion
This is your classic accordion where when one item is clicked the other closes
Accordion Heading 1
This accordion functions as an accordion on all resolutions. Only one accordion in the group can be open at a time. Add class of "open" to one specific toggle heading to make this accordion section open by default instead of closed.
Accordion Heading 2
All these toggles are H3s. These can be changed to h2s or lower headings. Remember to nest headings in order appropriately on the page to meet WCAG 2.0 success criteria.
Accordion Heading 3
Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like, but please be cautious in doing so as you do not want to complicate the page.
Accordion (independent triggers)
Like an accordion but each item opens and closes independently of the others
Accordion Multi Heading 1
This accordion can have multiple open at once. Add class of "open" to toggle heading(s) to make the accordion section open by default instead of closed.
Accordion Multi Heading 2
All these toggles are H3s. These can be changed to h2s or lower headings. Remember to nest headings in order appropriately on the page to meet WCAG 2.0 success criteria.
Accordion Multi Heading 3
Accordions can contain other accordions, tabs, headings, lists, tables, iframes, anything you like, but please be cautious in doing so as you do not want to complicate the page.
Lightbox Styles
Image that opens a YouTube video source in a lightbox
By adding the class of "YouTubeVideo" to your link, your nested image will get an overlay of a play icon and your link (YouTube video) will open within a lightbox. Please use the YouTube embed path for your link.
If a link (a href="/") with a class of "YouTubeVideo" is around an image, the play icon is automatically added.
Code for this will look like:
<a class="YouTubeVideo" href="//www.youtube.com/embed/l8glB7jZCHs">
<img alt="Play YouTube Video" src="/path/image-name.jpg" />
</a>