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!
Three Column List
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
- Item7
- Item8
- Item9
Two Column List
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
Two Column Boxes
This is some text that is in a two column container. I'm using div instead of UL or OL
This is some text that is in a two column container. I'm using div instead of UL or OL
Three Column Boxes
This is some text that is in a three column container. I'm using div instead of UL or OL
This is some text that is in a three column container. I'm using div instead of UL or OL
This is some text that is in a three column container. I'm using div instead of UL or OL
Accordion Container
Trigger 1
Panel 1
This is the content area for Panel 1
Trigger 2
Panel 2
This is the content area for Panel 2
Trigger 3
Panel 3
This is the content area for Panel 3
Accordion Ally
First Heading
Content for the first accordion.
Regular Heading
Just a regular link.
Second Heading
Content for the second accordion.
Third Heading
Content for the third accordion.
Tab Container
Tab One
Content area for Tab One
Content area for Tab One
Tab Two
Content area for Tab Two
Content area for Tab Two
Tab Container Ally
First Tab
Content for the first accordion. This can include multiple paragraphs, nested headings, lists, images and even additional tabs and accordions.
Class names to add to the accordion div for different styles:
- always or small-only
- tabs
- multi
- open
Second Tab
Content for the second accordion. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions.
Test Data Table
| Table Heading 1 |
Table Heading 2 |
Table Heading 3 |
| Table data |
Table data |
Table data |
| Table data |
Table data |
Table data |
| Table data |
Table data |
Table data |
Third Tab
Content for the third accordion contains an additional nested accordion. Content can be easier to scan and read when its all expanded on large screens by default, without the extra work of opening each individual accordion.
Multi Nested Accordion
Content for the first nested accordion. This can include multiple paragraphs, nested headings, lists, images and even additional tabs and accordions.
Multi Nested Accordion 2
Content for the second nested accordion. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions.
Multi Nested Accordion 3
Content for the third accordion contains an additional nested accordion.
Lightbox Styles
Example of thumb image linked to a larger image. Description overlay is title attribute of link:
Image that opens a YouTube video source in a lightbox
By adding the class of "Lightbox-for-video" 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 "Lightbox-for-video" is around an image, the play button icon is automatically added.
Code for this will look like:
<a class="Lightbox-for-video" href="/"><img alt="" src="/path/image-name.jpg" /></a>