Skip to content

Style Guide

Shortcodes

Columns

We have two different ways on doing columns. The newer “flex columns” are not yet in the shortcode drop-down though the code can be manually added. See column examples.

Buttons

[button]This is a button without a link.[/button]

This is a button without a link.

[button href="https://www.arlingtonva.us"]This is a button with a link.[/button]

This is a button with a link.

[button align="right"]Right button[/button]

Right button

Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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.

[button align="full"]Full-width button[/button]

Full-width button

Button Colors

[button background="darkblue"]darkblue[/button]

darkblue

[button background="blue"]blue[/button]

blue

[button]orange[/button] (this is the default background color and does not need to be explicitly defined)

orange

[button background="green"]green[/button]

green

[button background="black"]black[/button]

black

[button background="gray"]gray[/button]

gray

Block Quote

[blockquote source="Author's Name"] This is the shortcode for a block quote with citation. To remove the citation, omit the source= part of the code. [/blockquote]

If you ever teach a yodeling class, probably the hardest thing is to keep the students from just trying to yodel right off. You see, we build to that.

Jack Handy

 

Infobox

Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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.

In-page Alert

New! Colorful alerts to use like an infobox except they are always full width. Check out the colors and learn the code to use.

Collapsing Lists

Simple List Example:

  • Dogs
    • Rhodesian Ridgebacks
    • Everything else
  • Cats
  • Fruit
    • Apples
    • Bananas
    • Berries

Expand/Collapse All List Example:

Expand All | Collapse All

  • Muppets
    • Kermit
    • Miss Piggy
  • Ninja Turtles
    • Leonardo
    • Michelangelo
    • Raphael
    • Donatello

Simple List Example Code:

[collapsing_list all="false"]

  • Dogs
    • Rhodesian Ridgebacks
    • Everything else
  • Cats
  • Fruit
    • Apples
    • Bananas
    • Berries

[/collapsing_list]

Expand/Collapse All List Code:

[collapsing_list all="true"]

  • Muppets
    • Kermit
    • Miss Piggy
  • Ninja Turtles
    • Leonardo
    • Michelangelo
    • Raphael
    • Donatello

[/collapsing_list]

Icons

There are two icon sets available:

Arlington Icons

[icon name="checkmark"]
[icon name="picnic-table" size="2em"]
[icon-link name="twitter" size="2em" href="https://twitter.com/arlingtonva" title="Twitter: @ArlingtonVA"]

Font Awesome

Font Awesome 5 has 4 different sets available: Solid (fas), Regular (far), Light (fal) & Brands (fab). To use a Font Awesome icon, add set="{library}" to the shortcode, replacing “{library}” with one of the set codes. Examples:

[icon set="far" name="smile"]
[icon set="fas" name="question-circle" size="16px" align="middle" color="salmon"]
[icon set="fas" name="university" align="middle" size="2em" color="#478BE1"]

Color values may either be names (ex: goldenrod) or hex code (ex: #FFD700): Examples

Twitter

Timeline

[twitter account="ArlingtonVA" tweets="2" width="315" lang="EN"]

Any omitted parameter will default to the values in the example above.

List

[twitter account="ArlingtonVA" list="SafeTrack" tweets="2"]

GovDelivery

[[govdelivery id="79"]]
[[govdelivery id="79" input_class="medium"]]

ParkMe

View larger map | Powered by ParkMe

BatchGeo

[batchgeo id="1696efe880ba1ff959463983ae24afb5"]

View full screen

Google Map

[google_map mid="zIflrbPV1H60.kSSOcZVHfMDQ" height="300"]

View full screen