Serving Oak Ridge Since 1943
Adding these color class names, as well as the class name “Overlay” to the banner above with add a color gradient on the banner image allowing for color contrast with the photo text: “Blue”, “Red”, “Gold”, “Mauve” or “Green”. Adding just the class name of "Overlay" will apply a dark gray overlay on the image.
Adding the class name "Event" to the banner (promoSlider) will change the blue background color behind the CTA on mobile to red.
- 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.
The above is example styling when a blockquote is used. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
Buttons
Below is a standard button utilizing the class name "Button."You can find this button style in the Page/Panel Elements dropdown within the Admin.
Code for a standard button will look like:
<a class="Button" href="//link">Button Text</a>
"Button" style on a link
Below is blue button option if needed, which is utilizing the class names "Button Blue."You can find this button style in the Page/Panel Elements dropdown within the Admin.
Code for a blue button will look like:
<a class="Button Blue" href="//link">Button Text</a>
"Button Blue" style on a link
Below is an example of a row of buttons centered, which is utilizing the class name "ButtonRow" on the p tag surrounding the a tag.
Code for a row of center buttons will look like:
<p class="ButtonRow"><a class="Button" href="//link">Button Text</a><a class="Button" href="//link">Button Text</a><a class="Button" href="//link">Button Text</a></p>
"Button" style on a link"Button" style on a link"Button" style on a link
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
Tab Container
Adding the class name "Event" to tabs or accordions will change the accordion hover colors to red and green. Accessible Tab Container on large screens, Accordions on small screen sizes. This Tab Container was designed and styled to display up to six different tabs. Add the class name "Event" from the styles dropdown to change the accordions to the red and green combo.
Tab Heading 1
This accordion is styled as an accordion on small resolutions and tabs at large resolutions.
Button Text
Tab Heading 2
Heading Text
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.
Button Text
Tab Heading 4
Etiam ut sapien. Integer pharetra nunc eu eros. Aenean ullamcorper sapien a leo. Nunc lobortis mauris id lectus. Nunc commodo erat. Cras molestie urna quis felis porta rutrum. Integer malesuada.
Tab Heading 5
Etiam ut sapien. Integer pharetra nunc eu eros. Aenean ullamcorper sapien a leo. Nunc lobortis mauris id lectus. Nunc commodo erat. Cras molestie urna quis felis porta rutrum. Integer malesuada.
Button Text
Tab Heading 6
Heading Text
Etiam ut sapien. Integer pharetra nunc eu eros. Aenean ullamcorper sapien a leo. Nunc lobortis mauris id lectus. Nunc commodo erat. Cras molestie urna quis felis porta rutrum. Integer malesuada.
"Accordion"
Adding the class name "Event" to tabs or accordions will change the accordion hover colors to red and green. This is your classic accordion where when one item is clicked the other closes. Add the class name "Event" from the styles dropdown to change the accordions to the red and green combo.
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.
Button Text
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
Heading Text
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 Heading 4
Content for the fourth accordion.
Accordion Heading 5
Content for the fifth accordion.
Button Text
Accordion Heading 6
Heading Text
Content for the sixth accordion.
"Accordion (independent triggers)"
Adding the class name "Event" to tabs or accordions will change the accordion hover colors to red and green. Like an accordion but each item opens and closes independently of the others. Add the class name "Event" from the styles dropdown to change the accordions to the red and green combo.
Accordion Heading 1
Content for the first accordion. Just a regular link.
Accordion Multi Heading 2
Heading Text
Content for the second accordion.
Button Text
Accordion Multi Heading 3
Content for the third accordion.
Accordion Multi Heading 4
Content for the fourth accordion.
Accordion Multi Heading 5
Heading Text
Content for the fifth accordion.
Accordion Multi Heading 6
Content for the sixth accordion.
Button Text
Add additional page content here
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 "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.
Use the Styles dropdown within the Admin to add a class name to 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-nocookie.com/embed/l8glB7jZCHs">
<img alt="placeholder" src="https://placehold.co/650x400" />
</a>
Below is an example of what this would look like on the site.
Embedded Video
Below is an embedded video iframe utilizing a plain background. You can find this video style named "Video BG - Plain" in the Page/Panel Elements dropdown within the Admin. Be sure to update the title attribute, as well as the video source link.
Code utilizing the class "VideoBGPlain" for this will look like:
<div class="VideoBGPlain">
<iframe src="https://www.youtube-nocookie.com/embed/K2WxoI66Jew" frameborder="0" height="315" width="560" title="Play Video: A Visit to the Hem/Onc Clinic" allowfullscreen>
</iframe>
</div>