This page is intended for internal use so that we can easily find common site elements.

If you want to use any of these styles, simply copy the code from this page.

Typography
Site Colors
Buttons
Frequently Used Classes
Columns
Lists, Menus, Tiles & Block Links
Font Awesome Icons
Social
Modal
Tooltip
Video
Full Width Background
Miscellaneous

Typography

Font: Helvetica Neue
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif

Heading 1

This is only for page titles! Please to not add <h1> tags manually.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada bibendum arcu vitae elementum curabitur. Ornare aenean euismod elementum nisi quis eleifend.

Heading 2 with a subhead

Heading 3

Heading 4

Heading 5

Heading 6

Site Colors

Dark Grey Text (Default): #353C40
Light Grey Text: #757575 (class="color-grey")
"Right" Red: #CB2127 (class="color-right")
"Lean Right" Red: #A15552 (class="color-lean-right")
"Center" Purple: #96659E (class="color-center")
"Lean Left" Blue: #61A3DE (class="color-lean-left")
"Left" Blue: #2E64A0 (class="color-left")
"Mixed"/"Not Rated" Grey: #4A4A4A (class="color-mixed" or "color-not-rated")
Text Gradient (class="text-gradient")
Link Blue: #097CB5
Link Blue (Hover): #19ABF4
Accent Gold: #AD974F
Accent Teal: #258156

Buttons

HTML: <a class="btn" href="#">btn</a>
Result: btn

Mix & match the classes below to adjust the color & size.

btn btn btn-small btn btn-large

btn btn-primary btn btn-warning btn btn-danger btn btn-success btn btn-info btn btn-inverse

btn btn-white btn btn-right-red btn btn-lean-right-red btn btn-center-purple btn btn-lean-left-blue btn btn-left-blue btn btn-gold btn btn-teal btn btn-orange btn btn-dark-blue btn btn-light-blue btn btn-dark-red btn btn-light-teal btn btn-yellow btn btn-purple btn btn-light-orange

btn btn-full-width

Frequently Used CSS Classes

Size Classes

class="extra-small"

Makes font size 11px. Not for frequent use as this can be quite difficult to read.

HTML: <span class="extra-small">Extra small text</span>

Result: Extra small text

class="small"

Makes font size 15% smaller than the surrounding text, with a minimum of 12px. Can be used as a CSS class or HTML tag.

HTML: <small>Small text</small> or <span class="small">Small text</span>

Result: Small text

class="large"

Makes text 50% larger than the surrounding text without using heading elements. Very useful when you want to style text to be larger, but do not want that text to be part of the heading hierarchy.

HTML: <span class="large">Large text</span>

Result: Large text

class="extra-large"

Makes text 2x larger than the surrounding text.

HTML: <span class="extra-large">Extra large text</span>

Result: Extra large text

class="black-link"

Makes a link the body text color (#353C40) instead of the standard link color.

HTML: <a href="#" class="black-link">link text</a>
Result: link text

CSS classes: app-only & web-only

Add class="app-only" to any element to hide it for users accessing allsides.com. This content will only appear for people viewing content natively in the AllSides app.

Add class="web-only" to any element to hide it for people viewing content natively in the AllSides app. This content will still appear for users accessing allsides.com.

Example: <div class="tile-container web-only">[CONTENT]</div>

IMPORTANT DISTINCTION: This only applies to content viewed natively in the AllSides app, including blog content, headline roundups, topic pages, and source pages. It does not apply to pages that the app opens in an in-app browser, such as the About page.

CSS classes: mobile-only & desktop-only

Add class="desktop-only" to any element to hide it for users viewing allsides.com using a screen width of 767px or smaller.

Add class="mobile-only" to any element to hide it for users viewing allsides.com using a screen width of 768px or larger.

HTML:

<p class="desktop-only">This paragraph is desktop-only!</p>

<p class="mobile-only">This paragraph is mobile-only!</p>

Result:

This paragraph is desktop-only!

This paragraph is mobile-only!

You can also use these together to show different versions of the same content for different screen sizes, since only one will show at the same time.

HTML:

<p>You are using a <span class="desktop-only">WIDE</span><span class="mobile-only">NARROW</span> screen right now.</p>

Result:

You are using a WIDENARROW screen right now.

CSS class: arrow-link

Makes a nifty interactive link with an arrow. Good for "See more" type links.

HTML: <a class="arrow-link" href="#"><span class="arrow"></span>See more</a>
Result: See more

CSS class: arrow-link-no-underline

Makes an interactive link with an arrow and without an underline on hover. Good for "See more" type links.

HTML: <a class="arrow-link-no-underline" href="#">See more<span class="arrow"></span></a>
Result: See more

CSS class: section-header

Header

CSS class: dashed

Item
Item
Item

Columns

Responsive Columns (Fluid Row)

To break the page into columns, create a div with class="row-fluid". Inside of the row-fluid div, create multiple divs with spans, for example class="span4". The spans need to add up to 12. These columns will stack for narrow screen widths, so fluid rows are great for both desktop and mobile. Make sure to close all of your divs! Examples:

span4

span8

span3

span7

span2

span1

Left, Center, Right Columns for Blog

This uses inline CSS rather than CSS classes so that some of the styling transfers to the app.

Three columns with paragraphs:

What the Left says

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

What the Center says

Amet mattis vulputate enim nulla aliquet porttitor.

What the Right says

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div style="display:flex;gap:20px;flex-wrap:wrap;">
    <div style="flex:1;min-width: 200px;">
        <div style="color: #2e64a0; border-bottom: 3px solid; font-size: 20px;margin-bottom:10px;">What the Left says</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>

    <div style="flex:1;min-width: 200px;">
        <div style="color: #96659e; border-bottom: 3px solid; font-size: 20px;margin-bottom:10px;">What the Center says</div>
        <p>Amet mattis vulputate enim nulla aliquet porttitor.</p>
    </div>

    <div style="flex:1;min-width: 200px;">
        <div style="color: #ca0800; border-bottom: 3px solid; font-size: 20px;margin-bottom:10px;">What the Right says</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua.</p>
    </div>
</div>

Three columns with bullets:

What the Left Highlighted

Thing 1
Thing 2
Thing 3

What the Center Highlighted

Thing 1
Thing 2
Thing 3

What the Right Highlighted

Thing 1
Thing 2
Thing 3

<div style="display: flex; gap: 20px; flex-wrap: wrap;">
    <div style="flex: 1; min-width: 200px;">
        <div style="color: #2e64a0; border-bottom: 3px solid; font-size: 20px; margin-bottom: 10px;">What the Left Highlighted</div>
        <ul>
            <li>Thing 1</li>
            <li>Thing 2</li>
            <li>Thing 3</li>
        </ul>
    </div>

    <div style="flex:1;min-width: 200px;">
        <div style="color: #96659e; border-bottom: 3px solid; font-size: 20px;margin-bottom:10px;">What the Center Highlighted</div>
        <ul>
            <li>Thing 1</li>
            <li>Thing 2</li>
            <li>Thing 3</li>
        </ul>
    </div>

    <div style="flex:1;min-width: 200px;">
        <div style="color: #ca0800; border-bottom: 3px solid; font-size: 20px;margin-bottom:10px;">What the Right Highlighted</div>
        <ul>
            <li>Thing 1</li>
            <li>Thing 2</li>
            <li>Thing 3</li>
        </ul>
    </div>
</div>

Two columns with paragraphs:

What the Left says

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

What the Right says

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div style="display:flex;gap:20px;flex-wrap:wrap;">
    <div style="flex:1;min-width: 200px;">
        <div style="color: #2e64a0; border-bottom: 3px solid; font-size: 20px;margin-bottom:10px;">What the Left says</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>

    <div style="flex:1;min-width: 200px;">
        <div style="color: #ca0800; border-bottom: 3px solid; font-size: 20px;margin-bottom:10px;">What the Right says</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua.</p>
    </div>
</div>

Two columns with bullets:

What the Left Highlighted

Thing 1
Thing 2
Thing 3

What the Right Highlighted

Thing 1
Thing 2
Thing 3

<div style="display: flex; gap: 20px; flex-wrap: wrap;">
    <div style="flex: 1; min-width: 200px;">
        <div style="color: #2e64a0; border-bottom: 3px solid; font-size: 20px; margin-bottom: 10px;">What the Left Highlighted</div>
        <ul>
            <li>Thing 1</li>
            <li>Thing 2</li>
            <li>Thing 3</li>
        </ul>
    </div>

    <div style="flex:1;min-width: 200px;">
        <div style="color: #ca0800; border-bottom: 3px solid; font-size: 20px;margin-bottom:10px;">What the Right Highlighted</div>
        <ul>
            <li>Thing 1</li>
            <li>Thing 2</li>
            <li>Thing 3</li>
        </ul>
    </div>
</div>

Lists, Menus, Tiles & Block Links

Info List / Icon List

Use any Font Awesome icon. Looks best in sets of 3.

Link Title

Short description.

Link Title

Short description.

Link Title

Short description.

<!--BEGIN INFO LIST-->
<div class="info-list">
    <div class="flex block-link">
        <i class="fa-light fa-file-magnifying-glass"></i>
        <div><a class="main-link" href="[LINK URL]">Link Title</a>
        <p>Short description.</p></div>
    </div>
    <div class="flex block-link">
        <i class="fa-light fa-file-magnifying-glass"></i>
        <div><a class="main-link" href="[LINK URL]">Link Title</a>
        <p>Short description.</p></div>
    </div>
    <div class="flex block-link">
        <i class="fa-light fa-file-magnifying-glass"></i>
        <div><a class="main-link" href="[LINK URL]">Link Title</a>
        <p>Short description.</p></div>
    </div>
</div>
<!--END INFO LIST-->

Default Carousel

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

<!-- BEGIN CAROUSEL -->
<div class="slick-carousel">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
</div>
<!-- END CAROUSEL -->

Info Carousel

Link Title

Short description.

Link Title

Short description.

Link Title

Short description.

Link Title

Short description.

<!-- BEGIN INFO CAROUSEL -->
<div class="slick-carousel info-carousel">
    <div class="slick-item">
        <div class="block-link">
            <a class="main-link" href="[LINK URL]">Link Title</a>
            <p>Short description.</p>
        </div>
    </div>
    <div class="slick-item">
        <div class="block-link">
            <a class="main-link" href="[LINK URL]">Link Title</a>
            <p>Short description.</p>
        </div>
    </div>
    <div class="slick-item">
        <div class="block-link">
            <a class="main-link" href="[LINK URL]">Link Title</a>
            <p>Short description.</p>
        </div>
    </div>
    <div class="slick-item">
        <div class="block-link">
            <a class="main-link" href="[LINK URL]">Link Title</a>
            <p>Short description.</p>
        </div>
    </div>
</div>
<!-- END INFO CAROUSEL -->

Landing List

Images should be 180px wide x 116px, or same ratio.

<ul class="landing-list">
    <li class="block-link">
        <img width="180px" height="116px" src="[IMAGE URL]" alt=""><br>
        <a class="main-link" href="[LINK URL]">Link Title</a></li>
    <li class="block-link">
        <img width="180px" height="116px" src="[IMAGE URL]" alt=""><br>
        <a class="main-link" href="[LINK URL]">Link Title</a></li>
    <li class="block-link">
        <img width="180px" height="116px" src="[IMAGE URL]" alt=""><br>
        <a class="main-link" href="[LINK URL]">Link Title</a></li>
    <li class="block-link">
        <img width="180px" height="116px" src="[IMAGE URL]" alt=""><br>
        <a class="main-link" href="[LINK URL]">Link Title</a></li>
</ul>

Topic Tiles

Coronavirus Stay safe and informed

Elections How people come to power

Media Bias Avoid filter bubbles

<!--BEGIN TOPIC TILES--><div class="tile-container">

<div class="topic-tile">
	<a class="main-link" href="/topics/coronavirus/">Coronavirus</a>
	<span>Stay safe and informed</span>
</div>

<div class="topic-tile">
	<a class="main-link" href="/topics/elections">Elections</a>
	<span>How people come to power</span>
</div>

<div class="topic-tile">
	<a class="main-link" href="/topics/media-bias-media-watch">Media Bias</a>
	<span>Avoid filter bubbles</span>
</div>

</div><!--END TOPIC TILES-->

AllStances Tiles

Title for Stance 1 Description for Stance 1

See arguments »

Title for Stance 2 Description for Stance 2

See arguments »

Title for Stance 3 Description for Stance 3

See arguments »

Title for Stance 4 Description for Stance 4

See arguments »

<!--BEGIN ALLSTANCES TILES--><div class="tile-container">

<div class="allstances-tile" style="background-color:#6d9eeb;">
	<a class="main-link" href="#1">Title for Stance 1</a>
	<span>Description for Stance 1</span>
	<div class="arguments">See arguments »</div>
</div>

<div class="allstances-tile" style="background-color:#c9d9f7;">
	<a class="main-link" href="#2">Title for Stance 2</a>
	<span>Description for Stance 2</span>
	<div class="arguments">See arguments »</div>
</div>

<div class="allstances-tile" style="background-color:#b4a7d6;">
	<a class="main-link" href="#3">Title for Stance 3</a>
	<span>Description for Stance 3</span>
	<div class="arguments">See arguments »</div>
</div>

<div class="allstances-tile" style="background-color:#d4a5bd;">
	<a class="main-link" href="#4">Title for Stance 4</a>
	<span>Description for Stance 4</span>
	<div class="arguments">See arguments »</div>
</div>

<div class="allstances-tile" style="background-color:#f5cccc;">
	<a class="main-link" href="#5">Title for Stance 5</a>
	<span>Description for Stance 5</span>
	<div class="arguments">See arguments »</div>
</div>

</div><!--END ALLSTANCES TILES-->

Font Awesome Icons

We have Font Awesome 6 Pro, so we have access to a plethora of icons with various styles.

Icon Gallery

To use, find the icon you want in their gallery. Hover over the <i class="example"></i> tag and click to copy. Paste wherever you would like it to go!

If you want to change the size or color, style it like you would style text.

Examples:

HTML: <i class="fas fa-alicorn"></i>
Result:
HTML: <span style="font-size: 30px; color: hotpink;"><i class="fas fa-alicorn"></i></span>
Result:
HTML: <i class="fad fa-comments" style="--fa-secondary-opacity: 1.0;--fa-primary-color: #2e64a0;--fa-secondary-color: #ca0800;margin-right:5px;" aria-hidden="true"></i>
Result:
Note: This duotone one is a bit more complex - options are outlined here. The aria-hidden="true" portion hides icons from screen readers. This is useful when icons are purely decorative.

"Follow Us" Social Icons

ShareThis Social Icons

<div class="sharethis-inline-share-buttons"></div>

Can be triggered from buttons, links, and more. Add the fade class to the modal to add the default Bootstrap animation. See Bootstrap's documentation on modals for more information.

HTML:

<a href="#example-modal" data-toggle="modal">Click here!</a>

<div id="example-modal" class="modal hide team-modal" tabindex="-1" role="dialog" aria-labelledby="example-modal-label" aria-hidden="true">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h3 id="example-modal-label">Example Modal</h3>

</div>

<div class="modal-body">

<p>This is an example modal! You can have all sorts of content in here, such as headers, links, and more.<p>

<a href="#">Link Text</a>

</div>

Result:

Click here!

Videos in Modals

When placing a video in a modal, always make sure the video has id video-modal. If it does not, then the video will continue playing audibly after the modal is closed..

HTML:

<a data-toggle="modal" href="#video-modal">Trigger video modal</a>  <div aria-hidden="true" class="modal hide team-modal" id="video-modal" role="dialog" tabindex="-1" style="width:unset;"> <div class="modal-header"><button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button> <h3>Modal Title</h3> </div> <div class="modal-body"> <div class="video">[YOUTUBE EMBED CODE]</div> </div> </div> 

Example: Trigger video modal

Tooltip with plain text

HTML:

<span style="border-bottom: 1px dotted;" class="tooltipster" title="Tooltip Text">Hover!</span>

Result:

Hover!

Tooltip with HTML content

HTML:

<span style="border-bottom: 1px dotted;" class="tooltipster" data-tooltip-content="#tooltip-content">Hover!</span>

<div class="hide-tooltip"> <div id="tooltip-content"> <div class="title">Optional Title</div> Tooltip content <a href="/unbiased-balanced-news" target="_blank">with a link</a>, <strong>bold text</strong> and whatever else. </div> </div>

Result:

Hover!

Video Embeds

Always add the appropriate video class(es) when embedding videos to make sure they look good on both desktop and mobile.

Landscape Video

For landscape videos, add the video class to a containing div or to directly to the embed code. The class will force an aspect ratio of 16/9, prevent the video from breaking its container or overlapping other content, center the video, and set a maximum width of 560px.

HTML:

Add class to containing div: <div class="video">[EMBED CODE]</div>

or add class directly to embed code: <iframe class="video" [REMAINING EMBED CODE]></iframe>

Result:

Vertical Video

For vertical videos, add both video and vertical classes to a containing div or to directly to the embed code. These classes will force an aspect ratio of 9/16, prevent the video from breaking its container or overlapping other content, center the video, and set a maximum width of 350px.

HTML:

Add classes to containing div: <div class="video vertical">[EMBED CODE]</div>

or add classes directly to embed code: <iframe class="video vertical" [REMAINING EMBED CODE]></iframe>

Result:

Custom Aspect Ratios

For videos that have an aspect ratio different from 9/16 or 16/9, you can use the video class and set the aspect ratio using inline CSS. You can also adjust the maximum width this way if desired.

The inline styling must be placed within the embed code itself, not on a containing div.

HTML:

Set custom aspect ratio: <iframe class="video" style="aspect-ratio: 21/9;" [REMAINING EMBED CODE]></iframe>

Or set custom aspect ratio and maximum width: <iframe class="video" style="aspect-ratio: 21/9;max-width:940px;" [REMAINING EMBED CODE]></iframe>

Result:

Full Width Background

Section with Full Width Background (default)

This class uses a pseudo-element to add a full-width background without breaking the page container.

<section class="full-width-background">

	Content

	</section>

Section with Full Width Background (custom color)

You can change the color with inline CSS, as shown.

<section class="full-width-background" style="background-color:COLOR;">

	Content

	</section>

Section with Full Width Background (custom image & inner div)

You can add an image background. Add an inner div as shown to make sure your content is visible.

<section class="full-width-background" style="background-image:url(IMAGE URL);">

		<div style="background-color:white;padding:10px;"> Content

		</div> </section>

Miscellaneous

Logo Grid

A responsive grid designed to display a list of partner logos. Adjusts to any screen width. Would need to be adjusted for lists of fewer than 5 logos.

<div class="logo-grid">
    <a href="example.com" target="_blank"><img src="logo.png" alt="ORG NAME" title="ORG NAME" /></a>
    <a href="example.com" target="_blank"><img src="logo.png" alt="ORG NAME" title="ORG NAME" /></a>
    <a href="example.com" target="_blank"><img src="logo.png" alt="ORG NAME" title="ORG NAME" /></a>
    <a href="example.com" target="_blank"><img src="logo.png" alt="ORG NAME" title="ORG NAME" /></a>
    <a href="example.com" target="_blank"><img src="logo.png" alt="ORG NAME" title="ORG NAME" /></a>
    <a href="example.com" target="_blank"><img src="logo.png" alt="ORG NAME" title="ORG NAME" /></a>
    <a href="example.com" target="_blank"><img src="logo.png" alt="ORG NAME" title="ORG NAME" /></a>
    <a href="example.com" target="_blank"><img src="logo.png" alt="ORG NAME" title="ORG NAME" /></a>
    <a href="example.com" target="_blank"><img src="logo.png" alt="ORG NAME" title="ORG NAME" /></a>
    <a href="example.com" target="_blank"><img src="logo.png" alt="ORG NAME" title="ORG NAME" /></a>
</div>

Fancy Blockquote

HTML:

<blockquote class="fancy">Don't believe everything you see on the internet. <span>Abraham Lincoln</span></blockquote>

Result:

Don't believe everything you see on the internet.Abraham Lincoln

AllSides Design Elements

Contents

Typography

Heading 1

Heading 2 with a subhead

Heading 3

Heading 4

Heading 5

Heading 6

Site Colors

Buttons

Frequently Used CSS Classes

Size Classes

class="extra-small"

class="small"

class="large"

class="extra-large"

class="black-link"

CSS classes: app-only & web-only

CSS classes: mobile-only & desktop-only

CSS class: arrow-link

CSS class: arrow-link-no-underline

CSS class: section-header

Header

Header

CSS class: dashed

Columns

Responsive Columns (Fluid Row)

Left, Center, Right Columns for Blog

Lists, Menus, Tiles & Block Links

Info List / Icon List

Default Carousel

Info Carousel

Landing List

Topic Tiles

AllStances Tiles

Font Awesome Icons

Social

"Follow Us" Social Icons

ShareThis Social Icons

Modal

Videos in Modals

Tooltip

Tooltip with plain text

Tooltip with HTML content

Video Embeds

Landscape Video

Vertical Video

Custom Aspect Ratios

Full Width Background

Section with Full Width Background (default)

Section with Full Width Background (custom color)

Section with Full Width Background (custom image & inner div)

Miscellaneous

Logo Grid

Fancy Blockquote

Gradient Banner