Standard Colors

  • Dark green #007d85
  • Light green #5fbfac
  • Very light green 20% #dff2ee
  • Red #ee4949
  • Orange #f68f2e
  • Dark orange #e47e1d
  • Dark gray #414142
  • Light gray #85868c
  • Very light gray #F9F9F9
  • Blue #2764b0

Standard H1 (Page Title Heading)

This is a standard paragraph... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..

H2 (Sub Title Heading)

Standard H3 (Sub Sub Title Heading)

Standard H4 (Sub Sub Sub Title Heading)

Default List Styles

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  1. List Item
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Simple Custom Accordion 

<h3 class="show-hide"><a id="ShowContentA" aria-controls="ContentA" href="#">Show Content</a></h3>
<div class="show-hidden" id="ContentA" aria-labelledby="ShowContentA">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
</div>

<h3 class="show-hide"><a id="ShowContentB" aria-controls="ContentB" href="#">Show Content</a></h3>
<div class="show-hidden" id="ContentB" aria-labelledby="ShowContentB">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
</div>

Show Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Show Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
<p class="show-hide show-hide-small"><a id="ShowContentA" aria-controls="ContentA" href="#">Show Content</a></p>
<div class="show-hidden" id="ContentA" aria-labelledby="ShowContentA">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
</div>

<p class="show-hide show-hide-small"><a id="ShowContentB" aria-controls="ContentB" href="#">Show Content</a></p>
<div class="show-hidden" id="ContentB" aria-labelledby="ShowContentB">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
</div>

Show Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Show Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

BB Accordion Module

There are just two key settings:

  1. Set the class to "coserv-faq"

 

 

 

 

2. Set the icon position to left.

Some Question One

Some Question Two

Some Question Three

Simple Popup 

<p></p><a href="#test-popup" class="popup-link">Show inline popup</a></p>

<div id="test-popup" class="popup-contents mfp-hide">
  Popup content
</div>

Show inline popup

Simple Anchor Link 

<p><a href="#simple-anchor">Jump to my anchor</a></p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<h2><a name="simple-anchor">My Anchor</a></h2>

Jump to my anchor

 

 

 

 

 

My Anchor

Rates Tables 

[rates number="1" category="Standard Residential Rate"]

October 2026

Energy Charge

Base rate per kWh$0.123281
PLUS/MINUS the PCRF-$0.013
PLUS the SCRF+$0.0045
=$0.114781 per kWh

Buttons 

<div class="btn-orange"><a class="fl-button" href="#"><span>My Button</span></a></div>
<div class="btn-red"><a class="fl-button" href="#"><span>My Button</span></a></div>
<div class="btn-white"><a class="fl-button" href="#"><span>My Button</span></a></div>
<div class="btn-green"><a class="fl-button" href="#"><span>My Button</span></a></div>
<div class="btn-white-outline"><a class="fl-button" href="#"><span>My Button</span></a></div>
My Button
My Button
My Button
My Button
My Button
[graph
    title="Average Energy Cost per kWH"
    bar_one_label="CoServ" 
    bar_one_value="0.1394" 
    bar_two_label="REP Average" 
    bar_two_value="0.1721"  
]

Average Energy Cost per kWH

[graph
    title="Average Total Bill Amount"
    bar_one_label="CoServ" 
    bar_one_value="278.80" 
    bar_two_label="REP Average" 
    bar_two_value="344.20"  
]

Average Total Bill Amount

Setting tab column breaks w/CSS

add the following code to the 'CSS code to Layout CSS & Javascript' tool


.fl-tabs-horizontal .fl-tabs-labels .fl-tabs-label {
max-width: 250px;
min-height: 75px;
}