Test HTML Styles | E Source

Sidebar styles

Full-width sidebar

Floated sidebar

Expand/collapse sidebar

<h2><a name="sidebars"></a>Sidebar styles</h2>

Sidebar styles

<div class="sidebar key-takeaways">
    <h3>Key takeaways</h3>
    <ul>
        <li>Bullet 1</li>
        <li>Bullet 2</li>
        <li>Bullet 3</li>
    </ul>
</div>

Full-width sidebar

<aside class="sidebar">
    <h3>Sidebar heading</h3>
    <p>Text.</p>
</aside>

Use this sidebar style only for calls to action (CTAs). There’s a tracking code associated with this HTML element so we can track the performance of our CTAs.

Floated sidebar

<aside class="sidebar-float">
    <h3>Short heading</h3>
    <p>Text.</p>
</aside>

Use this sidebar style only for CTAs. Like the full-width sidebar, the floated sidebar also has a tracking code so we can track the performance of our CTAs. Use one or two short sentences, with a short title.

After you’ve gathered the Flesch-Kincaid scores of your web pages associated with customers’ top 10 preferred desktop or laptop features, prioritize your readability updates in that order. Consider, however, that certain factors may increase the priority of a page’s readability update, such as:

Is the content on this page related to the top three issues people contact our customer service team about?
Does the content on this page support a critical transaction customers make, like completing a payment?

Expand/collapse sidebar

<aside class="sidebar-expand">
    <btn class="btn btn-primary expand"><i class="fa fa-plus"></i></btn><btn class="btn btn-primary collapse"><i class="fa fa-minus"></i></btn>
    <h3>Sidebar heading</h3>
    <div class="sidebar-expand-body">
        <p>Text.</p>
    </div>
</aside>

Don’t put this sidebar directly above a figure container. Assume readers won’t interact with this sidebar element, so don’t put vital information here. This is a good option for explaining our tools, studies, memberships, etc.

You don’t need to redefine abbreviations in sidebars. But if you’re defining an abbreviation for the first time in a collapsible sidebar and the abbreviation appears later in the body text, you need to redefine the abbreviation where it first appears in the body text too.

In this report, we look at data from the 2020 Customer Experience Survey to compare what top-rated utilities are doing to develop a mature CX strategy. To determine which utilities were top rated, we compared CX strategy data from the Customer Experience Survey with J.D. Power ratings, data from the E Source US Residential Customer Insights Center, and data from the Canadian Residential Customer Insights Center.

Interrupted content

<aside class="interrupted-content row">
    <div class="col-xs-6 col-sm-4 col-md-2">
        <i class="fa fa-comments fa-4x"></i>
    </div>
    <div class="col-xs-6 col-sm-8 col-md-10">
        <h3>Interrupted heading</h3>
        <p>Text.</p>
    </div>
</aside>

Use it like an ad; it’s not for pullquotes. Can include hyperlinks and button code. Can use to discuss our tools or related content. Use icons from Font Awesome. You can adjust the icon sizing by changing the number in this code fa-4x.

Table styles

Each table should have only one <thead> element. Table rows should be coded with <td> elements. Use <th> elements for green header rows wherever they appear in the text, with one exception: within a <thead>, use <th> elements to wrap a spanner row if you have one (the table-spanner class will override the background and font styles of the <th> element).

Include a nonbreaking space between the copyright symbol and E Source to avoid an awkward line break.

Table with spanner

This table illustrates the spanner head style and the darker header row. The main thing to remember is that the column numbers (including <td> and colspan coding) need to match from row to row.

	Spanner head text goes here
Column 1 header text	Column 2 header text	Column 3 header text	Column 4 header text
Notes: Note text here. © E Source
Column 1 text goes here	Column 2 text goes here	Column 3 text goes here	100
Column 1 text goes here	Column 2–3 text goes here		200

<table class="table table-striped table-condensed">
    <!-- Begin spanner head -->
        <thead class="table-spanner">
        <!-- Begin spanner row -->
            <tr><th></th> <!-- this is the <th> exception - the "table-spanner" class is informing the way this looks. OK to leave empty unless there’s a header needed; each row must have equal number of columns, the sum of <th> and colspans--><th colspan="3" class="table-span"> <!-- Spanner text goes here; must specify colspan length. Repeat this <th>+<div> for each spanner head needed. --><div>Spanner head text goes here</div></th></tr>
        <!-- End spanner row -->
        <!-- Begin dark green header row; OK to use more than one of these if subheads are necessary, or span columns as necessary  -->
            <tr><th>Column 1 header text</th><th class="text-center">Column 2 header text</th><th class="text-center">Column 3 header text</th><th class="text-center">Column 4 header text</th></tr>
        <!-- End dark green header row -->
        </thead>
    <!-- End spanner head -->
    <!-- Begin footer row - yes, it goes above the table text! Note starts in the first <td>; source goes in the last -->
        <tfoot><tr><td colspan="3"><strong>Notes:</strong> Note text here. &copy;&nbsp;E&nbsp;Source</td><!-- span columns as needed --></tr></tfoot>
    <!-- End footer row -->
    <!-- Row -->
        <tr><td>Column 1 text goes here</td><td class="text-center">Column 2 text goes here</td><td class="text-center">Column 3 text goes here</td><td class="text-center">100</td></tr>
    <!-- End row-->
    <!-- Row with merged cells-->
        <tr><td>Column 1 text goes here</td><td colspan="2" class="text-center">Column 2–3 text goes here</td><td class="text-center">200</td></tr>
    <!-- End row-->
</table>

Table with repeated green subhead row

This table illustrates the use of multiple header rows to divide tables into sections. It can be used with the spanner code.

Column 1 header text	Column 2 header text	Column 3 header text	Column 4 header text
Column 1 header text	Column 2 header text	Column 3 header text	Column 4 header text
Note: Note text here. © E Source
Column 1 text goes here	Column 2 text goes here	Column 3 text goes here	Column 4 text goes here
Column 1 text goes here	Column 2–3 text goes here		Column 4 text goes here
Column 1 text goes here	Column 2 text goes here	Column 3 text goes here	Column 4 text goes here
Column 1 text goes here	Column 2 text goes here	Column 3 text goes here	Column 4 text goes here

<table class="table table-striped table-condensed">
    <!-- Begin dark green header row; only use one <thead> element, but OK to use <th> elements in regular rows if subheads are necessary, or span columns as necessary  -->
        <thead><tr><th>Column 1 header text</th><th>Column 2 header text</th><th>Column 3 header text</th><th>Column 4 header text</th></tr></thead>
    <!-- End dark green header row -->
    <!-- Begin footer row  -->
        <tfoot><tr><td colspan="3"><strong>Note:</strong> Note text here. &copy;&nbsp;E&nbsp;Source</td> <!-- span columns as needed --></tr></tfoot>
    <!-- End footer row -->
    <!-- Row -->
        <tr><td>Column 1 text goes here</td><td>Column 2 text goes here</td><td>Column 3 text goes here</td><td>Column 4 text goes here</td></tr>
    <!-- End row-->
    <!-- Row with merged cells-->
        <tr><td>Column 1 text goes here</td><td colspan="2" class="text-center">Column 2–3 text goes here</td><td>Column 4 text goes here</td></tr>
    <!-- End row-->
    <!-- Begin dark green subhead row, no <thead>  -->
        <tr><th>Column 1 header text</th><th>Column 2 header text</th><th>Column 3 header text</th><th>Column 4 header text</th></tr>
    <!-- End dark green header row -->
    <!-- Row -->
        <tr><td>Column 1 text goes here</td><td>Column 2 text goes here</td><td>Column 3 text goes here</td><td>Column 4 text goes here</td></tr>
    <!-- End row-->
    <!-- Row -->
        <tr><td>Column 1 text goes here</td><td>Column 2 text goes here</td><td>Column 3 text goes here</td><td>Column 4 text goes here</td></tr>
    <!-- End row-->
</table>

Table with multirow striping

Figure caption text goes here.

Column 1 header text	Column 2 header text	Column 3 header text	Column 4 header text
Note: Note text goes here. © E Source
Merged row head text	Column 2 text goes here	Column 3 text goes here	Column 4 text goes here
Merged row head text	Column 2 text goes here	Column 3 text goes here	Column 4 text goes here
Merged row head text	Column 2 text goes here	Column 3 text goes here	Column 4 text goes here
Merged row head text	Column 2 text goes here	Column 3 text goes here	Column 4 text goes here

<table class="table table-striped table-condensed">
    <!-- Begin dark green header row  -->
        <thead><tr><th>Column 1 header text</th><th>Column 2 header text</th><th>Column 3 header text</th><th>Column 4 header text</th></tr></thead>
    <!-- End dark green header row -->
    <!-- Begin footer row - yes, it goes above the table text!  -->
        <tfoot><tr><td colspan="2"><strong>Note:</strong> Note text goes here. &copy;&nbsp;E&nbsp;Source</td></td><!-- span columns as needed --></tr></tfoot>
    <!-- End footer row -->
    <!-- Rows with multi-row striping and merged row headers -->
    <!-- White striping -->
        <tr><td rowspan=2 class="multi-row-white-stripe">Merged row head text</td><td class="multi-row-white-stripe">Column 2 text goes here</td><td class="multi-row-white-stripe">Column 3 text goes here</td><td class="multi-row-white-stripe">Column 4 text goes here</td></tr>
        <tr><!-- <td> left off intentionally, as the merged row header will take this spot --><td class="multi-row-white-stripe">Column 2 text goes here</td><td class="multi-row-white-stripe">Column 3 text goes here</td><td class="multi-row-white-stripe">Column 4 text goes here</td></tr>
    <!-- End white striping -->
    <!-- Green striping -->
        <tr><td rowspan=2 class="multi-row-green-stripe">Merged row head text</td><td class="multi-row-green-stripe">Column 2 text goes here</td><td class="multi-row-green-stripe">Column 3 text goes here</td><td class="multi-row-green-stripe">Column 4 text goes here</td></tr>
        <tr><!-- <td> left off intentionally, as the merged row header will take this spot --><td class="multi-row-green-stripe">Column 2 text goes here</td><td class="multi-row-green-stripe">Column 3 text goes here</td><td class="multi-row-green-stripe">Column 4 text goes here</td></tr>
    <!-- End green striping -->
    <!-- End multi-striped rows -->       
</table>

Table with subspanner row

Figure caption text goes here.

Subspan head 1	Subspan head 2	Subspan head 3	Subspan head 4
Column 1 header text	Column 2 header text	Column 3 header text	Column 4 header text
Note: Note text goes here. © E Source
Column 1 text goes here	Column 2 text goes here	Column 3 text goes here	Column 4 text goes here
Column 1 text goes here	Column 2 text goes here	Column 3 text goes here	Column 4 text goes here

<table class="table table-striped table-condensed">
    <!-- Begin spanner head -->
        <thead>
        <!-- Begin white subspanner/pre-subhead row; this goes within the <thead> tag, whether you have a spanner or not - if you have no spanner head, delete that class from the <thead> -->
            <tr><td class="multi-subspan-header-left">Subspan head 1</td><td>Subspan head 2</td><td>Subspan head 3</td><td>Subspan head 4</td></tr>
        <!-- End subspan row -->
        <!-- Begin dark green header row; OK to use more than one of these if subheads are necessary  -->
            <tr><th>Column 1 header text</th><th>Column 2 header text</th><th>Column 3 header text</th><th>Column 4 header text</th></tr>
        </thead>
        <!-- End dark green header row -->
    <!-- End spanner head -->
    <!-- Begin footer row -->
        <tfoot><tr><td colspan="2"><strong>Note:</strong> Note text goes here. &copy;&nbsp;E&nbsp;Source</td><!-- span columns as needed --></tr></tfoot>
    <!-- End footer row -->
    <!-- Row -->
        <tr><td>Column 1 text goes here</td><td>Column 2 text goes here</td><td>Column 3 text goes here</td><td>Column 4 text goes here</td></tr>
    <!-- End row-->
    <!-- Row -->
        <tr><td>Column 1 text goes here</td><td>Column 2 text goes here</td><td>Column 3 text goes here</td><td>Column 4 text goes here</td></tr>
    <!-- End row-->
</table>

Table with internal vertical borders

When creating a matrix-style table that has empty cells and some sort of graphic (like the check marks used here), add vertical borders so that it’s easy to parse the columns. If you need to set the width of columns, in the <th> tag, add class="col-sm-x". Across all <th> tags, the x values need to add to 12.

		Category
Thing 1	Thing 2	Aspect 1	Aspect 2	Aspect 3	Aspect 4	Aspect 5
Note: Note text goes here. © E Source
Text for column 1	More text in column 2		✔
Text for column 1	More text in column 2	✔

<table class="table table-striped table-condensed table-vertical-borders">
    <!-- Begin spanner head -->
        <thead class="table-spanner">
            <tr><th></th><th></th><!-- OK to leave empty unless there’s a header needed; each row must have equal number of columns, the sum of <th> and colspans--><th colspan="5" class="table-span"> <!-- Spanner text goes here; must specify colspan length. Repeat this <th>+<div> for each spanner head needed. --><div>Category</div></th></tr>
        <!-- Begin green header row -->
            <tr><th class="col-sm-3">Thing 1</th><th class="col-sm-3">Thing 2</th><th class="text-center col-sm-1">Aspect 1</th><th class="text-center col-sm-1">Aspect 2</th><th class="text-center col-sm-1">Aspect 3</th><th class="text-center col-sm-2">Aspect 4</th><th class="text-center col-sm-1">Aspect 5</th></tr>
        <!-- End green header row -->
        </thead>
    <!-- End spanner head -->
    <!-- Begin footer row -->
        <tfoot><tr><td colspan="7"><strong>Note:</strong> Note text goes here. &copy;&nbsp;E&nbsp;Source</td><!-- span columns as needed --></tr></tfoot>
    <!-- End footer row -->
    <!-- Row -->
        <tr><td>Text for column 1</td><td>More text in column 2</td><td>&nbsp;</td><td class="text-center">&#10004;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <!-- End row-->
    <!-- Row -->
        <tr><td>Text for column 1</td><td>More text in column 2</td><td class="text-center">&#10004;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <!--End row-->
</table>

Smaller font size and vertical alignment in the table body

Add the following styles within the quotes of the <table class=""> code. These styles affect the body cells not the column headings.

table-text-sm reduces the font size by about 20%
table-align-top aligns text to the top of table cells
table-align-bottom aligns text to the bottom of table cells
table-align-mid aligns text to the middle of table cells (this is the default style; you don’t need to add it)

This example top-aligns the body cells and uses the smaller font:

<table class="table table-striped table-condensed table-align-top table-text-sm">

Figure styles

Add the loading="lazy" code to all images below the fold—JPEGs, PNGs, SVGs, etc.

See below for an example of a standard figure container with one image. You can also add multiple images to one figure container.

The figure caption should not be a repeat of what we’ve already stated in the body of the report. The image resizer will trigger if your figure is larger than 850 pixels in width. Add descriptive alt text to your images, unless they’re purely decorative elements, such as icons.

<figure>
    <h3>Figure title</h3>
    <figcaption>Figure caption.</figcaption>
    <div class="img-embed"><img src="https://www.esource.com/system/files/is1205214235-woods-trees.jpg" alt="alt text" loading="lazy"></div>
</figure>

<figure>
    <h3>Figure title</h3>
    <figcaption>Figure caption.</figcaption>
    <p class="text-left"><strong>Short title</strong></p>
        <div class="img-embed"><img src="https://www.esource.com/system/files/is1195458582-mountains-sunrise.jpg" alt="alt text" loading="lazy"></div>
    <br><p class="text-left"><strong>Short title</strong></p>
        <div class="img-embed"><img src="https://www.esource.com/system/files/is1176527951-arch-nature.jpg" alt="alt text" loading="lazy"></div>
</figure>

<figure>
    <h3>Figure title</h3>
    <figcaption>Figure caption.</figcaption>
    <div class="default-well">
        <div class="es-single-slider well">
            <div class="slide-container">
                <h3>This is the image title</h3>
                <div class="slide-thumbnail">
                    <div class="field-image-upload">
                        <div class="img-embed view_larger"><img src="https://www.esource.com/system/files/is1195458582-mountains-sunrise.jpg" class="img-responsive" alt="alt text" loading="lazy"></div>
                    </div>
                </div>
            </div>
            <div class="slide-container">
                <div class="slide-thumbnail">
                    <div class="field-image-upload">
                        <div class="img-embed view_larger"><img src="https://www.esource.com/system/files/is1176527951-arch-nature.jpg" class="img-responsive" alt="alt text" loading="lazy"></div>
                    </div>
                </div>
            </div>
            <div class="slide-container">
                <figcaption>This is what a rotating caption would look like.</figcaption>
                <div class="slide-thumbnail">
                    <div class="field-image-upload">
                        <div class="img-embed view_larger"><img src="https://www.esource.com/system/files/is1195458582-mountains-sunrise.jpg" class="img-responsive" alt="alt text" loading="lazy"></div>
                    </div>
                </div>
            </div>
            <div class="slide-container">
                <h3>This is the image title</h3>
                <figcaption>This is what a rotating caption would look like.</figcaption>
                <div class="slide-thumbnail">
                    <div class="field-image-upload">
                        <div class="img-embed view_larger"><img src="https://www.esource.com/system/files/is1176527951-arch-nature.jpg" class="img-responsive" alt="alt text" loading="lazy"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</figure>

<figure>
    <h3>Figure title</h3>
    <figcaption>Figure caption.</figcaption>
    <div class="default-well">
        <div class="es-single-slider well">
            <div class="slide-container">
                <h3>Image title</h3>
                <div class="slide-thumbnail">
                    <!--Insert the embed code here-->
                </div>
            </div>
            <div class="slide-container">
                <h3>Image title</h3>
                <div class="slide-thumbnail">
                    <!--Insert the embed code here-->
                </div>
            </div>
        </div>
    </div>
</figure>

You can also format text to wrap around images. Only use this feature with images that are less than half the width of the body column—keep images under 300 pixels in width. Insert a short title (and optional short caption) to avoid the image looking like an ad. This is a good element to add in text-heavy blogs.

<figure class="pull-right">
	<h3>Short image title</h3>
	<img src="https://www.esource.com/system/files/is1199895622-green-leaves.jpg" alt="alt text" loading="lazy">
</figure>

Use this figure carousel code in the best examples section of design guides. Upload both the cropped image and the full image to the node. Then replace the image sources with the correct links.

Black Hills Energy contact us desktop page screenshot

<figure>
    <div class="default-well">
        <div class="es-single-slider well">
            <!-- start first image -->
            <div class="slide-container">
                <h3 class="text-left">Black Hills Energy</h3>
                <div class="slide-thumbnail">
                    <div class="img-embed view_larger">
                        <img src="https://www.esource.com/system/files/best_examples_black_hills_energy_web_cropped.jpg" class="img-responsive" alt="Black Hills Energy contact us desktop page screenshot" loading="lazy">
                    </div>
                </div>
                <br><div class="clearfix">
                <div class="pull-right"><a href="https://www.esource.com/system/files/best_examples_black_hills_energy_web_full.jpg" target="_blank" class="btn btn-success btn-sm">View entire image</a></div>
                </div>
            </div>
            <!-- end first image -->
            <!-- start second image -->
            <div class="slide-container">
                <h3 class="text-left"><abbr>NV</abbr> Energy</h3>
                <div class="slide-thumbnail">
                    <div class="img-embed view_larger">
                        <img src="https://www.esource.com/system/files/best_practices_nv_energy_web_cropped.jpg" class="img-responsive" alt="Black Hills Energy contact us desktop page screenshot" loading="lazy">
                    </div>
                </div>
                <br><div class="clearfix">
                <div class="pull-right"><a href="https://www.esource.com/system/files/best_practices_nv_energy_web_full.jpg" target="_blank" class="btn btn-success btn-sm">View entire image</a></div>
                </div>
            </div>
            <!-- end second image -->
            <!-- start third image -->
            <div class="slide-container">
                <h3 class="text-left">Arizona Public Service</h3>
                <div class="slide-thumbnail">
                    <div class="img-embed view_larger">
                        <img src="https://www.esource.com/system/files/best_practices_arizona_public_service_web_cropped.jpg" class="img-responsive" alt="Black Hills Energy contact us desktop page screenshot" loading="lazy">
                    </div>
                </div>
                <br><div class="clearfix">
                <div class="pull-right"><a href="https://www.esource.com/system/files/best_practices_arizona_public_service_web_full.jpg" target="_blank" class="btn btn-success btn-sm">View entire image</a></div>
                </div>
            </div>
            <!-- end third image -->
        </div>
    </div>
</figure>

SVGs

There are two ways to use an SVG on our website: (1) Upload a static .svg file via the file uploader and insert it into an <img src""> tag as with any other image file. (2) Insert it as inline, dynamic code.

If you’re using inline code, you must wrap the SVG code in the <div> tag shown below; be sure to include a title and description with the id defined so that screen readers know what to read and what element it goes with. It’s simplest to use something like “svg1,” “svg2,” and so on to tie those elements together, but they can also be descriptive if you prefer.

<div class="pdf-img-swap svg-ieLg">
    <svg role="img" aria-labelledby="svg1-title svg1-description">
        <!-- put your SVG code here -->
        <title id="svg1-title">Title of SVG</title>
        <desc id="svg1-description">This is a description of the SVG</desc>
    </svg>
</div>

Excel charts as SVGs: You can display charts as SVGs when they’re within a figure container. In Excel, be sure the chart is formatted well and there’s not a lot of extra white space around the overall chart box. When inserting the link to the SVG, choose Link to file from the dropdown—not Embed. In the <img> tag, keep the class="img-responsive" attribute. Especially for smaller charts (pie, donut), add a width attribute width="700", where the width is an absolute number, not a percentage. Values between 500 and 800 might work well.

Quote styles

Block quote

<blockquote>
    <p>Direct quote here.</p>
</blockquote>

It’s OK to use lists within a block quote, and multiple paragraphs too. You can use bold and italic, superscript and subscript as well.

Quoted material goes here. Do not include beginning or end quotations. But do include single quotations if it’s a quote within a quote.

Pullquote left

<p class="pullquote-left" role="presentation" aria-hidden="true">&ldquo;Direct quote.&rdquo; &mdash;Name, Company</p>

This is a sample of the pullquote code. Use it as a new paragraph, placed before the text you want it to float alongside. Can paraphrase; don’t include hyperlinks. Use quotes around the text if it’s a quote and add an em dash before the attribution.

If you’re using pullquotes throughout a report, try to start with the left style for design purposes—it will look less like an ad that way.

A manager at Austin Energy said, “As the utility, you should be painting yourself as the resource for unbiased consumer education.” Be sure to follow this advice because many utility customers don’t look to utilities for solar information.

Pullquote right

<p class="pullquote-right" role="presentation" aria-hidden="true">Pullquote text here.</p>

The pullquote doesn’t need to sit directly alongside the related material, but keep it close to the original source. For example, don’t put a quote from the end of a report at the beginning of the report.

Work with the community. Energy-insecure customers may not be aware of or have easy access to the programs you offer. To help them, you need to get creative. Find ways to partner with vulnerable communities, local governments, environmental groups, regulators, housing authorities, and others. When community voices are engaged in the decision-making process, equity increases.

Full-width pullquotes

Use icons from the Icons & Images Library, which you can find on the Marketing Intranet page. Size to 90 by 90 pixels.

<aside class="pullquote-full">
    <div class="col-md-4 col-lg-2">
        <div class="circle-lt-gray-bg"><img src="https://www.esource.com/system/files/icomoon-icon-linear-black-05.png" width="90" height="90" alt="" loading="lazy"></div>
    </div>
    <div class="col-md-9 col-lg-10">Text here.</div>
</aside>

<aside class="pullquote-full">
    <div class="col-md-4 col-lg-2">
        <div class="circle-dk-gray-bg">47%</div>
    </div>
    <div class="col-md-9 col-lg-10">Text here.</div>
</aside>

Text styles

Body text

Use <p> tags around each paragraph.

This is our default text style.

First-level head (h2)

Use <h2> tags for this style. The <h1> tag is reserved for the page title for SEO reasons. <h2> is the highest heading style we use in the body. All heading text should be sentence case. If you use H2s in a report, you need to include a table of contents.

Second-level head (h3)

Use <h3> tags for this style. All heading text should be sentence case. You always need at least two headings, not matter the level.

Third-level head (inline subhead)

<p><span class="subhead">Subhead here.</span> Remaining text here.</p>

Use <span class="subhead"> tags for inline subheads. These headings are sentence case. Do not include links within subheads. As mentioned above, you always need at least two subheads.

This is an example of what an inline subhead would look like. This is where the rest of the related text would go. It’s OK to use links in this part of the paragraph.

This is the second subhead you’d need. This is where the rest of the related text would go.

Q&A headings

<p><span class="initial">Q:</span>Question here.</p>
<p><span class="initial">A:</span>First sentence here.</p>

Use this style for repurposed Ask E Source answers. This should be the first element on the page. Notice, there’s no space between the <span> tag and the question or answer text. Spacing is already built into the style.

Q:Question goes here.

A:Use this code on the first line only and code the rest of the report as normal.

Bold

Use <strong> tags for bold, not <b> tags.

Italic

Use <em> tags for italics, not <i> tags.

Subscript

Use <sub> tags for subscripts: CO₂

Superscript

Use <sup> tags for superscripts: ft²

Line breaks

Use a single <br> tag without a closing tag (for example, no </br> tag needed) for line breaks. You may occasionally need to break a line in a specific spot without going to a new paragraph. For example, on event nodes, we use line breaks in speaker lists.

Abbreviations

Wrap abbreviations in <abbr> tags to help screen readers know how to read the abbreviation. But don’t wrap abbreviations in <abbr> tags when it’s clear you pronounce the abbreviation as a word such as NASA or SMUD. If you’re not sure, use <abbr> tags just in case.

The <abbr>US</abbr> Department of Energy (<abbr>DOE</abbr>) says …

<abbr>EISA</abbr> research shows …

SMUD is a proponent of …

In <abbr>DSM</abbr>dat, our database of …

<abbr>ft<sup>2</sup></abbr>

Don’t use <abbr> tags in alt text or in teasers; those are not read as HTML. Use <abbr> in previews and other HTML fields.

Include plurals and possessives in the <abbr> tag. Don’t use <abbr> tags for Dr., Mrs., Mr., etc.

In some cases, you may need to add a definition to an abbreviation that you want screen readers to read but that you don’t want in the visible text. In instances such as on first mention of an acronym that we don’t define, an acronym used in a linked report title that’s not spelled out elsewhere, or if the initial mention of the acronym was a long way from where it’s being used again, add a title="" attribute to the <abbr> tag. The screen reader will read both the title and the acronym, similar to what we generally do in text.

How to estimate <abbr title="level of effort">LOE</abbr>

<abbr title="Nebraska">NE</abbr>

<abbr>NYSEG&rsquo;s</abbr>

<abbr>BMSs</abbr>

Red text

<p><span class="text-danger">Text that you want to be red.</span></p>

We rarely use red text. We do use it on past event nodes to let readers know the event has already taken place. Do not use this just anywhere.

Unordered list (bulleted list)

<ul>
    <li>First bullet</li>
    <li>Second bullet</li>
    <li>Third bullet</li>
</ul>

Ordered list (numbered list)

<ol>
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
</ol>

Two-column list

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <ol>
                <li>First bullet</li>
                <li>Second bullet</li>
                <li>Third bullet</li>
            </ol>
        </div>
        <div class="col-sm-6">
            <ol start="4">
                <li>Fourth bullet</li>
                <li>Fifth bullet</li>
                <li>Sixth bullet</li>
            </ol>
        </div>
    </div>
</div>

For some lists, you may want to style them in two columns. If you’re using an ordered list, you’ll need to set the starting number in the second column (<ol start="x">).

First bullet
Second bullet
Third bullet

Fourth bullet
Fifth bullet
Sixth bullet

You can adjust list styles in a number of ways. Think of it as a blank table with multiple columns; put whatever elements you want within each column within the <div class="col-sm-x"> section. For example, you can make it a three-column list by adding another <div class="col-sm-x">, but remember that the total x value has to always equal 12.

Two-column style with an icon on the left and text on the right

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2 img-embed text-center">
            <i class="fa fa-comments fa-4x"></i>
        </div>
        <div class="col-sm-10">
            <p>Text here.</p>
        </div>
    </div>
</div>

Findability. Customers want to be spoon-fed information. More reviewers used websites’ search functions than in previous years. If customers can’t immediately tell where they should go via quick links or the menu, they use the search. If that doesn’t work, they get frustrated and give up.

Three-column style with icons and paragraph-level text in each section

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">
            <div class="img-embed text-center"><i class="fa fa-envelope-o fa-4x"></i></div>
            <p><span class="subhead">Subhead:</span></p>
            <ul>
                <li>Text</li>
                <li>Text</li>
            </ul>
        </div>
        <div class="col-sm-4">
            <div class="img-embed text-center"><i class="fa fa-hashtag fa-4x"></i></div>
            <p><span class="subhead">Subhead:</span></p>
            <ul>
                <li>Text</li>
                <li>Text</li>
            </ul>
        </div>
        <div class="col-sm-4">
            <div class="img-embed text-center"><i class="fa fa-comments fa-4x"></i></div>
            <p><span class="subhead">Subhead:</span></p>
            <ul>
                <li>Text</li>
                <li>Text</li>
            </ul>
        </div>
    </div>
</div>

Email:

Average number of contact center agent FTEs: 4.5
Percentage of total contact center agent FTEs: 5

Social media:

Average number of contact center agent FTEs: 1.2
Percentage of total contact center agent FTEs: 3

Chat:

Average number of contact center agent FTEs: 1.0
Percentage of total contact center agent FTEs: 1

Link styles

By design, all links will open in the same window. If you want a link to open in a separate window—because it’s a form or documentation the user will need to complete a task in another window—use the link attribute target="_blank", as in <a href="/link test here" target="_blank">.

For E Source links, use a relative link (no “https://www.esource.com” at the beginning; this applies to image links in figures too). Except on event nodes: use full links, even for E Source links.

If you’re linking to behind-the-paywall E Source content in a public deliverable, include one of these nofollow links:

nofollow code: <a href="link text here" rel="nofollow"> for links you don’t want Google to follow
sponsored code: <a href="link text here" rel="sponsored"> for links you don’t want Google to follow because they’re part of an advertising or sponsorship campaign.
ugc code: <a href="link text here" rel="ugc"> for links you don’t want Google to follow when they appear in user-generated content (UGC). For example, in an Energy AdVision submission, PG&E might link to the subreddit https://www.reddit.com/r/AskRedditents/should_pge_ceo_asshole_get_jail_time, saying, “We wanted to collect sentiment data from forums like Reddit about our handling of the Camp Fire.” The ugc code tells Google not to follow the link but to register the keywords in the URL, which might help the search engine better understand the content and present more-relevant search results.

Automatic link replacement

To aid in governance of broken links, the system is now reviewing all internal links (relative or absolute) in the Body and Preview fields on page load; it will follow the URLs to their ultimate destination and display the title of the published version. No changes will be made to the underlying code; this is only happening on display. Please note that this is for internal links only—Editorial will still need to review external links for breakage. Iin addition, if a user PDFs the page, the PDF will reflect the underlying code.

Here’s how it works:

If the title of the content at a link’s destination has changed, the system will replace the link text in the display with the updated title.
If the changed content is a redirect, the system will follow as many as six levels deep to find the first published node and replace the link text with that node’s title.
If the content is unpublished and there is no redirect, the system will insert quotes around the link text and unlink it.
If a link is part of a button, based on the presence of the <btn> class, the link text will not be replaced if the link references a published node. If the link is unpublished or archived, the button will be removed entirely.
If a link is wrapped around an image, in most cases, the system will keep the HTML within the <a> tag unless the link breaks, in which case, it will be replaced with the unpublished node’s title. In some cases, the editor will need to add the data-replace-exclude="true" attribute to make them display correctly.

For most links, there is no change to the current process of coding links. (EXCEPTION: Do not include punctuation inside the <a> tag, or it will be replaced if the link changes.) There are, however, some special circumstances that will require the addition of a class within the <a> tag to allow the system to adjust.

Note: When an <a> tag has HTML code within it, such as in the content carousels on public pages, the system can usually still find and replace the title and URL. The exception is the tile-style image links, which have the title of the destination report in an h3 outside the link structure. See the Market Research tiles example below. The internal code in these is too complex for the system to parse, so they must use the “do not replace” code below.

You can include only the following HTML characters in internal link text:

Do NOT include <abbr> tags in internal linked text.

✔ <a href="/125201rote/essentials-marketing-ev-offerings-ci-customers">The essentials for marketing EV offerings to C&I customers</a>

✖ <a href="/125201rote/essentials-marketing-ev-offerings-ci-customers">The essentials for marketing <abbr>EV</abbr> offerings to <abbr>C&I</abbr> customers</a>

Subtitles

If you want to include the subtitle within the link text and have it automatically replaced if the destination node changes, add data-include-subtitle=": " to the <a> tag. Please note: The value of the data attribute (what’s within the quotes) should indicate the punctuation that should separate the title and subtitle in the link text. It can handle HTML, so encode any special characters, like em dashes. Be sure to also include any necessary spaces. If the URL linked is redirected and the new node does not have a subtitle, the punctuation will remain but the subtitle will be blank. Here are a couple of examples:

<a href=" " data-include-subtitle=": ">Link title: Subtitle</a>

<a href=" " data-include-subtitle="&mdash;">Exchange: Link title—Subtitle</a>

Author bios

If you want to refer to a specific author within the text, link their name to their bio and add data-exclude-quote-wrap="true" to the <a> tag. This addition will ensure that if the bio is unpublished, no quotes will be inserted around the name when the link is removed. (This could, of course, be used for things other than author names that shouldn’t be put in quotes, but we couldn’t think of any other examples!) Here’s what the code should look like:

<a href=" " data-exclude-quote-wrap="true">Author Name</a>

Please note: Author bios that are linked outside the Body and Preview fields will not be affected by this change. In the byline, author names will continue to be static but unlinked when the bio is unpublished (which should happen automatically as part of the process of deactivating a user on our website). In addition, when the author’s bio node is unpublished, their image and blurb in the bio section at the bottom of the node will no longer display.

Do not replace

If you want the system not to replace your coded link text with the report title, add data-replace-exclude="true" to the <a> tag. Please note: If a link that’s tagged with data-replace-exclude="true" breaks, the system will still replace it with the title of the unpublished node, in quotes (unless the data-exclude-quote-wrap="true" attribute is also included). This is true even for images that are wrapped in links—the image will be hidden (because it’s inside the a tag) and the title of the broken link will be displayed.

<a href=" " data-replace-exclude="true">Link title</a>

Please note: There is no need to use this class on button code—buttons are treated differently than other links.

Embedded files

This code will add an embedded viewer for a file in the body of the node. This format works well for PDFs and Word documents; don't use this for speadsheets. You can include the embedded code within a figure container or on its own. Once you upload the file to the node, choose the embed option.

You can also embed audio files. Be sure your audio file type is in the list of accepted types (usually .mp3). Upload the audio file to the node and choose the embed option. The code includes a short title to help us identify it if it’s separated from its page. For the short title, use sentence case.

<audio title="Austin Energy podcast ad" name="Austin Energy podcast ad" src="https://www.esource.com/system/files/austin-energy-podcast-ad.mp3"></audio>

Figure 5: Austin Energy’s Energy Conservation campaign podcast advertisement

This podcast advertisement promoted rebates for smart thermostats, LEDs, and smart strips to help customers save money and energy.

Audio Player

00:00

00:17

Use Up/Down Arrow keys to increase or decrease volume.

Buttons

<p><a class="btn btn-success" href="">Button text</a></p>

You can use buttons for various purposes. Keep the button text short. If you’re using the button code to direct readers to download a file, use a shortened version of the file name (in sentence case) and include the file type in parentheses.

Some examples (this is not a definitive list, nor does it contain active links):

Download Shortened file name (PDF)

View the recording

Use the tool

Contact links and contact forms

If you’re directing users to contact E Source via our website, you can add prefilled subject lines to our contact form. Just add in ?subject=Subject%20text%20goes%20here after the relative link. Use %20 for any spaces in the subject. Be sure to include the data-replace-exclude="true" attribute to the <a> tag to keep the system from replacing your custom text.

<a href="/contact-us?subject=Custom%20subject%20text">Contact us</a>

For email links, use mailto: links. You can add subject text the same way.

<a href="mailto:customer_service@esource.com?subject=Custom%20subject%20text">Recipient’s name here</a>

In addition to linking to our contact pages and emails, we can also embed contact forms on web pages. If you need a special contact form, you’ll need to get that request prioritized through the SoPro team.

Marketo lead-generation form—sends responses to our sales development rep

<aside class="sidebar-expand">
    <btn class="btn btn-primary expand"><i class="fa fa-plus"></i></btn><btn class="btn btn-primary collapse"><i class="fa fa-minus"></i></btn>
    <h3>How E&nbsp;Source can help with INSERT TOPIC HERE</h3>
    <div class="sidebar-expand-body">
        <p>Fill out this short form to start a conversation about your needs and how we can help.</p>
        <script src="//pages.esource.com/js/forms2/js/forms2.min.js"></script>
        <form id="mktoForm_2335"></form>
        <script>MktoForms2.loadForm("//pages.esource.com", "922-TXQ-171", 2335);</script>
    </div>
</aside>

Embed the form in a sidebar in all public white papers, reports, and blog posts. This prompt shouldn’t replace a call to action identified by the strategist. If the strategist has identified a different call to action, place this form in a sidebar further down the page.

Use the form related to the E Source business unit you’re promoting. See below for each business unit’s code.

Data Science:

<script src="//pages.esource.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2334"></form>
<script>MktoForms2.loadForm("//pages.esource.com", "922-TXQ-171", 2334);</script>

Consulting:

<script src="//pages.esource.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2355"></form>
<script>MktoForms2.loadForm("//pages.esource.com", "922-TXQ-171", 2355);</script>

Research and Advisory:

<script src="//pages.esource.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2335"></form>
<script>MktoForms2.loadForm("//pages.esource.com", "922-TXQ-171", 2335);</script>

Technology Planning and Implementation Consulting:

<script src="//pages.esource.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2333"></form>
<script>MktoForms2.loadForm("//pages.esource.com", "922-TXQ-171", 2333);</script>

Tools and Battery (TE Insights, DSM Insights, Battery/Battery Next):

<script src="//pages.esource.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2273"></form>
<script>MktoForms2.loadForm("//pages.esource.com", "922-TXQ-171", 2273);</script>

Water Loss Consulting:

<script src="//pages.esource.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2337"></form>
<script>MktoForms2.loadForm("//pages.esource.com", "922-TXQ-171", 2337);</script>

General contact form—sends responses to Customer Service

[es_include:entityform:contact_us]

Use this token form to generate the contact form below:

Request for information form—sends responses to Customer Service

[es_include:entityform:request_for_information]

Use this token form to generate the contact form below:

File upload form—sends responses to Customer Service

[es_include:entityform:file_upload]

Use this token form to generate the contact form below:

Accordion style

<!-- Accordion start  -->
<div class="accordion" id="accordionExample">
  <!-- Section 1 start -->
  <div class="collapse-accordion">
    <button class="accordion-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      <i class="fa fa-chevron-down"></i>
      <!-- Header text for section 1 here -->
      <h3>First heading</h3>
    </button>
    <div id="collapseOne" class="collapse body-container" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="accordion-body">
        <!-- Body text start for section 1 here -->
        <p>You can put any of our standard body styles in this part of the code: figures, lists, subheads, etc.</p>
        <!-- Body text end for section 1 here -->
      </div>
    </div>
  </div>
  <!-- Section 1 end -->
  <!-- Section 2 start -->
  <div class="collapse-accordion">
    <button class="accordion-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      <i class="fa fa-chevron-down"></i>
      <!-- Header text for section 2 here -->
      <h3>Second heading</h3>
    </button>
    <div id="collapseTwo" class="collapse body-container" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="accordion-body">
        <!-- Body text start for section 2 here -->
        <p>Test text</p>
        <!-- Body text end for section 2 here -->
      </div>
    </div>
  </div>
  <!-- Section 2 end -->
  <!-- Section 3 start -->
  <div class="collapse-accordion">
    <button class="accordion-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      <i class="fa fa-chevron-down"></i>
      <!-- Header text for section 3 here -->
      <h3>Third heading</h3>
    </button>
    <div id="collapseThree" class="collapse body-container" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="accordion-body">
        <!-- Body text start for section 3 here -->
        <p>Test text</p>
        <!-- Body text end for section 3 -->
      </div>
    </div>
  </div>
  <!-- Section 3 end -->
</div>
<!-- Accordion end -->

In this example, we have an accordion with three sections; you can add or remove sections as needed. Use at least two sections; the accordion isn’t intended for just one. If you use an <img>, you must replace the src attribute with data-src. Don’t use image carousels within accordions.

You can use either H2 or H3 headings for the accordion labels, but stay consistent within the feature. If you use an H3 for the labels, you can use inline subheads within the body of the accordion. If you use H2 labels, you can use H3s and inline subheads within the accordion.

If you have more than three sections, you’ll need to update the following attributes to the appropriate number order: id="headingX", data-target="# collapseX", aria-controls="collapseX", and aria-labelledby="headingX".

First heading

Test text. Because this accordion uses H3s, you can use subheads within it.

You can also add images. See below.

Second heading

Test text

Third heading

Test text

Other styles

Resource centers

This container (<div class="container-fluid">) should wrap around the row sections of a resource center; you only need one, wrapping around all of the rows. Repeat the <div class="row"> section in full for each box of information in the resource center. You can use most regular formatting within this code. Use icons from the Icons & Images Library, which you can find on the Marketing Intranet page. Size to 50 by 50 pixels.

<div class="container-fluid">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="col-sm-3 no-horz-padding horizontal-center">
                    <div class="circle-icon-img bg-info"><img class="img-responsive" src="/images/RC-gears-icon.png" alt="" loading="lazy"></div>
                </div>
                <div class="col-sm-9 col-med-10">
                    <h3>Section title</h3>
                    <p>Section text goes here.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Section title

Section text goes here.

We often style market research yearly study pages (similar to resource centers) using content blocks to link to all relevant study deliverables. This style works best as a landing page to other content within a series. You can add as many blocks as you need. Notice the HTML on the linked block differs slightly from the HTML on the coming soon block. Size the images to 1125 by 975 pixels.

<div class="row img-overlay-container">
    <!--Start of block 1-->
    <div class="col-sm-12 col-md-12 col-lg-6">
        <a href="/123201rwcy/summary-results-2020-e-source-small-and-midsize-business-customer-satisfaction-study" data-replace-exclude="true">
            <div class="img-overlay">
                <img class="img-responsive" src="https://www.esource.com/system/files/small-business-storefronts-massachusetts.jpg" width="1125" height="975" alt="" loading="lazy">
                <p class="img-overlay-description">Teaser text explaining the link readers will be directed to.</p>
                <span class="img-overlay-see-more">See more <i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
            </div>
        </a>
        <div class="img-overlay-label">
            <h3>Short title</h3>
        </div>
    </div>
    <!--End of block 1-->
    <!--Start of block 2-->
    <div class="col-sm-12 col-md-12 col-lg-6">
        <a href="#" data-replace-exclude="true">
            <div class="img-overlay">
                <img class="img-responsive" src="https://www.esource.com/system/files/covid-meeting.jpg" width="1125" height="975" alt="" loading="lazy">
                <div class="gray-img-overlay">
                    <div class="fa fa-clock-o fa-5x"></div>
                    <span class="img-overlay-coming-soon">Coming soon</span>
                </div>
            </div>
        </a>
        <div class="img-overlay-label">
            <h3>Short title</h3>
        </div>
    </div>
    <!--End of block 2-->
</div>

Teaser text explaining the link readers will be directed to.

Short title

Coming soon

Short title

Calendar code

<div class="container-fluid">
    <div class="well well-sm row">
        <div class="col-sm-2 col-xs-12 calendar">
            <div class="bg-lt-blue text-center calendar-month">Year</div>
            <div class="bg-dk-gray text-center calendar-day"><br><p>Monday day</p><br></div>
        </div>
        <div class="col-sm-10 col-xs-12">
            <div class="center-vertically" style="height: 120px">
                <div>Text here.</div>
            </div>
        </div>
    </div>
</div>

The <div class="center-vertically" style="height: 120px"> code can be used in any column code to center the text vertically within the row. You will have to manually set the pixel height if 120 pixels isn’t the right size.

2021

July 1

Text goes here, and can include a handy link if needed.

Thumbnail images

<div class="container">
    <div class="row">
      <div class="col-md-4">
        <a href="https://www.esource.com/system/files/esource_improve_website_and_build_a_mobile_app_0.pdf" target="_blank">
          <div class="zoom">
            <img src="https://www.esource.com/system/files/woman-phone-self-service-lead.jpg" alt="" loading="lazy"><div class="gradient-container">
              <h3 class="zoom-text">Title</h3>
            </div>
          </div>
        </a>
      </div>
      <div class="col-md-4">
        <a href="/10313-002/whats-best-way-design-mobile-login-page">
          <div class="zoom readmore">
            <img src="https://www.esource.com/system/files/website-design-lead.jpg" alt="" loading="lazy"><div class="gradient-container">
              <h3 class="zoom-text">Title</h3>
            </div>
          </div>
        </a>
      </div>
      <div class="col-md-4">
        <a href="/10236-002/does-anyone-allow-outage-reporting-location-enabled-mobile-devices">
          <div class="zoom readmore">
            <img src="https://www.esource.com/system/files/map-pins-4-lead.jpg" alt="" loading="lazy"><div class="gradient-container">
              <h3 class="zoom-text">Title</h3>
            </div>
          </div>
        </a>
      </div>
    </div>
</div>

This code inserts an image that has the title overlaid and rollover text that says “Read more” or “Download.” <div class="zoom"> will make the hover read as “Download” and <div class="zoom readmore"> will make the hover read as “Read more.” We use this code often on public pages. The image should be 370 by 240 pixels, saved as a jpg at 60%–70% quality. Upload and insert the image as usual. If linking to a download, include target="_blank" in the <a> tag.

How to improve your website and launch an effective mobile app

“What’s the best way to design a mobile login page?”

“Does anyone allow outage reporting via location-enabled mobile devices?”

Marketing pages

The public marketing pages on our website use a different node type than our reports, events, and blogs. These full-width nodes have specialized styles set up to make the most of their layout possibilities. The Design/UX team in SoPro put together a Component library for marketing pages to provide the building blocks for these pages.

Please note: When you are building a public marketing page, please factor a review by the Design/UX team into your timeline—these styles are complex enough and visible enough that we want to make sure they’re right.

HTML codes

Common special characters

You can use either the number code or text code depending on your preference. Can’t find what you’re looking for? Check out this resource: HTML Codes Table.

Special characters in company names: If a company name uses a special character, put the symbol version in the keywords field of the node so the site search can find that version. In body text, you’ll use the letter the symbol stands for.

Character	Name of character	Number code	Text code
Note: NA = not applicalbe. © E Source
‘	left single curly quote	‘	‘
’	apostrophe/right single curly quote	’	’
“	left double curly quote	“	“
”	right double curly quote	”	”
—	em dash	—	—
–	en dash	–	–
&	ampersand	&	&
✔	checkmark	✔	NA
nonbreaking space	nonbreaking space
nonbreaking hyphen	nonbreaking hyphen	‑	NA
°	degree	°	°
…	ellipsis, horizontal	…	…
±	plus or minus	±	±
<	less than	<	<
>	greater than	>	>
≤	less than or equal to	≤	≤
≥	greater than or equal to	≥	≥
©	copyright	©	©
™	trademark	™	™
®	registered trademark	®	®
é	lowercase e-acute	é	é
É	uppercase e-acute	É	É
÷	division	÷	÷
¢	cents	¢	¢
»	right double angle quotes (use in IVR and web call/click paths)	»	»

Comments

Hi editors! This page is

Permalink Submitted by joy_herbers@eso... on February 28, 2024

Hi editors! This page is stupid. And also, the reason I give Grand Canyon National Park only one star as a National Park is that pretty much all of the really awesome things you could potentially do in the Grand Canyon are basically off-limits for a day tripper...I just don't understand why they won't build a road, aerial tramway, elevator, or SOMETHING that gives easier access to the canyon's depths. To people who say that building anything would ruin the Grand Canyon, I would say this - did building a road into Yosemite Valley ruin Yosemite?

Solutions

Insights

featured

Trending Topics

About

Sidebar styles

Key takeaways

Full-width sidebar

Floated sidebar

Expand/collapse sidebar

Interrupted content

Table styles

Table with spanner

Table with repeated green subhead row

Table with multirow striping

Table with subspanner row

Table with internal vertical borders

Smaller font size and vertical alignment in the table body

Figure styles

This is a standard figure

Figure with multiple images

Figure carousel with multiple images

This is the image title

Figure carousel with embedded code

Facebook—you need to be signed in to get the embed code; use the iframe code

Short image title

Black Hills Energy

SVGs

Quote styles

Block quote

Pullquote left

Pullquote right

Full-width pullquotes

Text styles

Body text

First-level head (h2)

Second-level head (h3)

Third-level head (inline subhead)

Q&A headings

Bold

Italic

Subscript

Superscript

Line breaks

Abbreviations

Red text

Unordered list (bulleted list)

Ordered list (numbered list)

Two-column list

Link styles

Automatic link replacement

Embedded files

Figure 5: Austin Energy’s Energy Conservation campaign podcast advertisement

Buttons

Contact links and contact forms

Accordion style

First heading

Figure title here (no figure number or callout)

Second heading

Third heading

Other styles

Resource centers

Section title

Short title

Short title

Calendar code

Thumbnail images

Marketing pages

HTML codes

Common special characters

Comments

Sign in