Style Guide

Overview

A brief guide to working with Phase Three and the styles that are used as the foundation for the theme.


Primary Color

#064CDB

Secondary Color

#064CDB

Success Color

#064CDB

Danger Color

#064CDB

Warning Color

#064CDB

Info Color

#064CDB

Light Color

#064CDB

Dark Color

#064CDB


h1. Heading New

h2. Heading New

h3. Heading New

h4. Heading New

h5. Heading New
h6. Heading New

Display 1

Display 2

Display 3

Display 4


A slightly-larger-than-normal block of text using the class of .lead, useful for decks, blurbs, or other descriptive text.


This is a standard paragraph created using the WordPress editor. It has a strong tag, an em tag and a strikethrough which is actually just the del element. There are a few inline elements not available in the WordPress admin but we style those too, just in case you want to use them. These include citations, abbr, bits of code and variables, inline quotations, inserted text, text that is no longer accurate or something so important you might want to mark it. We can also style subscript and superscript so you can say things like C8H10N402 is my 2nd favourite chemical.

If you are feeling non-semantic you might even use bold, italic, big or small elements. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this article by Harry Roberts which gives us a nice excuse to test a link. It is also worth noting in the “kitchen sink” view you can also add underline styling and set text color with pesky inline CSS.

“This stylesheet is going to help so much. Users can take full advantage of all the HTML elements. Imagine that!”

In my dream last night, I saw J. R. R. Tolkien and George R. R. Martin hanging out on Sunset Blvd.

Press Cmd+Q (or Ctrl+Q on Windows) to play Half-Life 3.


You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.


h1. Heading New

h2. Heading New

h3. Heading New

h4. Heading New

h5. Heading New
h6. Heading New

Display 1

Display 2

Display 3

Display 4


A slightly-larger-than-normal block of text using the class of .lead, useful for decks, blurbs, or other descriptive text.


This is a standard paragraph created using the WordPress editor. It has a strong tag, an em tag and a strikethrough which is actually just the del element. There are a few inline elements not available in the WordPress admin but we style those too, just in case you want to use them. These include citations, abbr, bits of code and variables, inline quotations, inserted text, text that is no longer accurate or something so important you might want to mark it. We can also style subscript and superscript so you can say things like C8H10N402 is my 2nd favourite chemical.

If you are feeling non-semantic you might even use bold, italic, big or small elements. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this article by Harry Roberts which gives us a nice excuse to test a link. It is also worth noting in the “kitchen sink” view you can also add underline styling and set text color with pesky inline CSS.

“This stylesheet is going to help so much. Users can take full advantage of all the HTML elements. Imagine that!”

In my dream last night, I saw J. R. R. Tolkien and George R. R. Martin hanging out on Sunset Blvd.

Press Cmd+Q (or Ctrl+Q on Windows) to play Half-Life 3.


You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.



Link

Use the .alert-link utility class to quickly provide matching colored links within any alert.


Additional content

Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:


Dismissing

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Avatar

A set of CSS utility classes to format single avatars and overlapping groups of avatars.


Basic usage

Avatar

Sizes

Avatar Avatar Avatar Avatar
Avatar Avatar Avatar Avatar

Group

  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
NT
NT
NT
NT

Badge

Documentation and examples for badges, our small count and labeling component.


Primary Secondary Success Danger Warning Info Light Dark

Contextual Variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Success Danger Warning Info Light Dark

Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Primary Secondary Success Danger Warning Info Light Dark

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


Default


Variants


Outline


Sizing


Icons


Avatar

Linda Holt

Block


States




Cards

Cards provide a flexible and extensible content container with multiple variants and options.


Card title
Card Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Button
  • List Group Item 1
  • List Group Item 2
  • List Group Item 3
Card Header
Card Title

This is card text with supporting text below as a natural lead-in to additional content.

Button

Overline

H5 Heading Title

Meta

Calling all High School Students and College Freshman residents of an Evergreen managed communities. What does Community mean to you?...

Read More →
Quarterly assessments are almost due!

Maecenas malesuada. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Ut non enim eleifend felis pretium feugiat. Praesent…

Brady Wright — Feb. 04

Brady Wright

Jan. 29

Sed lectus. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Phasellus magna. Donec venenatis vulputate lorem. Vestibulum eu…

53246

Johannes Gutenberg

German Printer

Johannes Gensfleisch zur Laden zum Gutenburg was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe with the printing press. Wikipedia

Born

c. 1400, Mainz Germany

Cafe Bassilico

4.7 Stars (51)

$ • Italian, Cafe

Small plates, salads & Sandwiches in an intimate setting with 12 indoor seats plus patio seating.


Tonights Availability

5:30pm 7:30pm 8:00pm 9:00pm

Reserve

H4 Heading Title

Calling all High School Students and College Freshman residents of an Evergreen managed communities. What does Community mean to you?...

Sep 10, 2019 • Style Guide

Paving & Sealcoating

Atlantic Southern Paving and Sealcoating

6301 W Sunrise Blvd
Sunrise

954-581-5805

Card Components

Card Body

This is some text within a card body.

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

Image Overlay

Business Directory

Headers

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.


Icons

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.


Color Icons - 64x64


Material Icons

search arrow_back bookmark bookmark_border bookmarks favorite favorite_border star star_border
star star star

Icon Sizes


Round Icons

Icon For Display#1
Icon For Display#1
Icon For Display#1

Bootstrap Colors


Code

Icon For Warning-2
Icon For Backspace
Icon For CMD
Icon For Code
Icon For Commit
Icon For Compiling
Icon For Control
Icon For Done-circle
Icon For Error-circle
Icon For Git#1
Icon For Git#2
Icon For Git#3
Icon For Git#4
Icon For Github
Icon For Info-circle
Icon For Left-circle
Icon For Loading
Icon For Lock-circle
Icon For Lock-overturning
Icon For Minus
Icon For Option
Icon For Plus
Icon For Puzzle
Icon For Question-circle
Icon For Right-circle
Icon For Settings#4
Icon For Shift
Icon For Spy
Icon For Stop
Icon For Terminal
Icon For Thunder-circle
Icon For Time-schedule
Icon For Warning-1-circle

Communication

Icon For Adress-book#2
Icon For Active-call
Icon For Add-user
Icon For Address-card
Icon For Adress-book#1
Icon For Archive
Icon For Call#1
Icon For Call
Icon For Chat#1
Icon For Chat#2
Icon For Chat#4
Icon For Chat#5
Icon For Chat#6
Icon For Chat-check
Icon For Chat-error
Icon For Chat-locked
Icon For Chat-smile
Icon For Clipboard-check
Icon For Clipboard-list
Icon For Contact#1
Icon For Delete-user
Icon For Dial-numbers
Icon For Flag
Icon For Forward
Icon For Group-chat
Icon For Group
Icon For Incoming-box
Icon For Incoming-call
Icon For Incoming-mail
Icon For Mail-@
Icon For Mail-attachment
Icon For Mail-box
Icon For Mail-error
Icon For Mail-heart
Icon For Mail-locked
Icon For Mail-notification
Icon For Mail-opened
Icon For Mail-unocked
Icon For Mail
Icon For Missed-call
Icon For Outgoing-box
Icon For Outgoing-call
Icon For Outgoing-mail
Icon For Readed-mail
Icon For Reply-all
Icon For Reply
Icon For Right
Icon For RSS
Icon For Safe-chat
Icon For Send
Icon For Sending mail
Icon For Sending
Icon For Share
Icon For Shield-thunder
Icon For Shield-user
Icon For Snoozed-mail
Icon For Spam
Icon For Thumbtack
Icon For Urgent-mail
Icon For Write

Cooking

Icon For Cutting board
Icon For Baking-glove
Icon For Bowl
Icon For Chef
Icon For Cooking-book
Icon For Cooking-pot
Icon For Dinner
Icon For Dish
Icon For Dishes
Icon For Fork-spoon-knife
Icon For Fork-spoon
Icon For Fork
Icon For Frying-pan
Icon For Grater
Icon For Kitchen-scale
Icon For Knife#1
Icon For Knife#2
Icon For Knife&fork#1
Icon For Knife&fork#2
Icon For Ladle
Icon For Rolling-pin
Icon For Saucepan
Icon For Shovel
Icon For Sieve
Icon For Spoon

Design

Icon For Arrows
Icon For Adjust
Icon For Anchor-center-down
Icon For Anchor-center-up
Icon For Anchor-center
Icon For Anchor-left-down
Icon For Anchor-left-up
Icon For Anchor-left
Icon For Anchor-right-down
Icon For Anchor-right-up
Icon For Anchor-right
Icon For Bezier-curve
Icon For Border
Icon For Brush
Icon For Bucket
Icon For Cap-1
Icon For Cap-2
Icon For Cap-3
Icon For Circle
Icon For Color-profile
Icon For Color
Icon For Component
Icon For Crop
Icon For Difference
Icon For Edit
Icon For Eraser
Icon For Flatten
Icon For Flip-horizontal
Icon For Flip-vertical
Icon For Horizontal
Icon For Image
Icon For Interselect
Icon For Join-1
Icon For Join-2
Icon For Join-3
Icon For Layers
Icon For Line
Icon For Magic
Icon For Mask
Icon For Patch
Icon For Pen&ruller
Icon For Pen-tool-vector
Icon For Pencil
Icon For Picker
Icon For Pixels
Icon For Polygon
Icon For Position
Icon For Rectangle
Icon For Saturation
Icon For Select
Icon For Sketch
Icon For Stamp
Icon For Substract
Icon For Target
Icon For Triangle
Icon For Union
Icon For Vertical
Icon For Zoom minus
Icon For Zoom plus

Devices

Icon For Camera
Icon For Airpods
Icon For Android
Icon For Apple-Watch
Icon For Battery-charging
Icon For Battery-empty
Icon For Battery-full
Icon For Battery-half
Icon For Bluetooth
Icon For Cardboard-vr
Icon For Cassete
Icon For CPU#1
Icon For CPU#2
Icon For Diagnostics
Icon For Display#1
Icon For Display#2
Icon For Display#3
Icon For Gameboy
Icon For Gamepad#1
Icon For Gamepad#2
Icon For Generator
Icon For Hard-drive
Icon For Headphones
Icon For Homepod
Icon For iMac
Icon For iPhone-back
Icon For iPhone-x-back
Icon For iPhone-X
Icon For Keyboard
Icon For Laptop-macbook
Icon For Laptop
Icon For LTE#1
Icon For LTE#2
Icon For Mic
Icon For Midi
Icon For Mouse
Icon For Phone
Icon For Printer
Icon For Radio
Icon For Router#1
Icon For Router#2
Icon For SD-card
Icon For Server
Icon For Speaker
Icon For Tablet
Icon For TV#1
Icon For TV#2
Icon For Usb-storage
Icon For USB
Icon For Video-camera
Icon For Watch#1
Icon For Watch#2
Icon For Wi-fi

Electric

Icon For Iron
Icon For Air-conditioning
Icon For Blender
Icon For Fridge
Icon For Gas-stove
Icon For Highvoltage
Icon For Kettle
Icon For Mixer
Icon For Outlet
Icon For Range-hood
Icon For Shutdown
Icon For Socket-eu
Icon For Socket-us
Icon For Washer
Icon For Нair-dryer

Files

Icon For Export
Icon For Cloud-download
Icon For Cloud-upload
Icon For Compilation
Icon For Compiled-file
Icon For Deleted-file
Icon For Deleted-folder
Icon For Download
Icon For Downloaded file
Icon For Downloads-folder
Icon For File-cloud
Icon For File-done
Icon For File-minus
Icon For File-plus
Icon For File
Icon For Folder-check
Icon For Folder-cloud
Icon For Folder-error
Icon For Folder-heart
Icon For Folder-minus
Icon For Folder-plus
Icon For Folder-solid
Icon For Folder-star
Icon For Folder-thunder
Icon For Folder
Icon For Group-folders
Icon For Import
Icon For Locked-folder
Icon For Media-folder
Icon For Media
Icon For Music
Icon For Pictures#1
Icon For Pictures#2
Icon For Protected-file
Icon For Selected-file
Icon For Share
Icon For Upload-folder
Icon For Upload
Icon For Uploaded-file
Icon For User-folder

Food

Icon For Cheese
Icon For Beer
Icon For Bottle#1
Icon For Bottle#2
Icon For Bread
Icon For Bucket
Icon For Burger
Icon For Cake
Icon For Carrot
Icon For Chicken
Icon For Coffee#1
Icon For Coffee#2
Icon For Cookie
Icon For Dinner
Icon For Fish
Icon For French Bread
Icon For Glass-martini
Icon For Ice-cream#1
Icon For Ice-cream#2
Icon For Miso-soup
Icon For Orange
Icon For Pizza
Icon For Sushi
Icon For Two-bottles
Icon For Wine

General

Icon For Duplicate
Icon For Attachment#1
Icon For Attachment#2
Icon For Binocular
Icon For Bookmark
Icon For Clip
Icon For Clipboard
Icon For Cursor
Icon For Dislike
Icon For Edit
Icon For Expand-arrows
Icon For Fire
Icon For Folder
Icon For Half-heart
Icon For Half-star
Icon For Heart
Icon For Hidden
Icon For Like
Icon For Lock
Icon For Notification#2
Icon For Notifications#1
Icon For Other#1
Icon For Other#2
Icon For Sad
Icon For Save
Icon For Scale
Icon For Scissors
Icon For Search
Icon For Settings-1
Icon For Settings-2
Icon For Settings#3
Icon For Shield-check
Icon For Shield-disabled
Icon For Shield-protected
Icon For Size
Icon For Smile
Icon For Star
Icon For Thunder-move
Icon For Thunder
Icon For Trash
Icon For Unlock
Icon For Update
Icon For User
Icon For Visible

Home

Icon For Bulb#1
Icon For Air-ballon
Icon For Alarm-clock
Icon For Armchair
Icon For Bag-chair
Icon For Bath
Icon For Bed
Icon For Book-open
Icon For Book
Icon For Box
Icon For Broom
Icon For Building
Icon For Bulb#2
Icon For Chair#1
Icon For Chair#2
Icon For Clock
Icon For Couch
Icon For Deer
Icon For Door-open
Icon For Earth
Icon For Fireplace
Icon For Flashlight
Icon For Flower#1
Icon For Flower#2
Icon For Flower#3
Icon For Globe
Icon For Home-heart
Icon For Home
Icon For Key
Icon For Ladder
Icon For Lamp#1
Icon For Lamp#2
Icon For Library
Icon For Mailbox
Icon For Mirror
Icon For Picture
Icon For Ruller
Icon For Stairs
Icon For Timer
Icon For Toilet
Icon For Towel
Icon For Trash
Icon For Water-mixer
Icon For Weight#1
Icon For Weight#2
Icon For Wood#1
Icon For Wood#2
Icon For Wood-horse
Icon For Сommode#1
Icon For Сommode#2
Icon For Сupboard
Icon For Сurtains

Layout

Icon For Layout-top-panel-1
Icon For Layout-3d
Icon For Layout-4-blocks
Icon For Layout-arrange
Icon For Layout-grid
Icon For Layout-horizontal
Icon For Layout-left-panel-1
Icon For Layout-left-panel-2
Icon For Layout-right-panel-1
Icon For Layout-right-panel-2
Icon For Layout-top-panel-2
Icon For Layout-top-panel-3
Icon For Layout-top-panel-4
Icon For Layout-top-panel-5
Icon For Layout-top-panel-6
Icon For Layout-vertical

Map

Icon For Location-arrow
Icon For Compass
Icon For Direction#1
Icon For Direction#2
Icon For Marker#1
Icon For Marker#2
Icon For Position

Media

Icon For Next
Icon For Add-music
Icon For Airplay-video
Icon For Airplay
Icon For Back
Icon For Backward
Icon For CD
Icon For DVD
Icon For Eject
Icon For Equalizer
Icon For Forward
Icon For Media-library#1
Icon For Media-library#2
Icon For Media-library#3
Icon For Movie-lane#1
Icon For Movie-Lane #2
Icon For Music-cloud
Icon For Music-note
Icon For Music
Icon For Mute
Icon For Pause
Icon For Play
Icon For Playlist#1
Icon For Playlist#2
Icon For Rec
Icon For Repeat-one
Icon For Repeat
Icon For Shuffle
Icon For Volume-down
Icon For Volume-full
Icon For Volume-half
Icon For Volume-up
Icon For Vynil
Icon For Youtube

Navigation

Icon For Arrow-from-bottom
Icon For Angle-double-down
Icon For Angle-double-left
Icon For Angle-double-right
Icon For Angle-double-up
Icon For Angle-down
Icon For Angle-left
Icon For Angle-right
Icon For Arrow-down
Icon For Arrow-from-left
Icon For Arrow-from-right
Icon For Arrow-from-top
Icon For Arrow-left
Icon For Arrow-right
Icon For Arrow-to-bottom
Icon For Arrow-to-left
Icon For Arrow-to-right
Icon For Arrow-to-up
Icon For Arrow-up
Icon For Arrows-h
Icon For Arrows-v
Icon For Check
Icon For Close
Icon For Double-check
Icon For Down-2
Icon For Down-left
Icon For Down-right
Icon For Exchange
Icon For Left-2
Icon For Left 3
Icon For Minus
Icon For Plus
Icon For Right-2
Icon For Right 3
Icon For Route
Icon For Sign-in
Icon For Sign-out
Icon For Up-2
Icon For Up-down
Icon For Up-left
Icon For Up-right
Icon For Waiting

Shopping

Icon For Cart#3
Icon For ATM
Icon For Bag#1
Icon For Bag#2
Icon For Barcode-read
Icon For Barcode-scan
Icon For Barcode
Icon For Bitcoin
Icon For Box#1
Icon For Box#2
Icon For Box#3
Icon For Calculator
Icon For Cart#1
Icon For Cart#2
Icon For Chart-bar#1
Icon For Chart-bar#2
Icon For Chart-bar#3
Icon For Chart-line#1
Icon For Chart-line#2
Icon For Chart-pie
Icon For Credit-card
Icon For Dollar
Icon For Euro
Icon For Gift
Icon For Loader
Icon For MC
Icon For Money
Icon For Pound
Icon For Price #1
Icon For Price #2
Icon For Rouble
Icon For Safe
Icon For Sale#1
Icon For Sale#2
Icon For Settings
Icon For Sort#1
Icon For Sort#2
Icon For Sort#3
Icon For Ticket
Icon For Wallet#2
Icon For Wallet#3
Icon For Wallet

Text

Icon For Quote#1
Icon For Align-auto
Icon For Align-center
Icon For Align-justify
Icon For Align-left
Icon For Align-right
Icon For Article
Icon For Bold
Icon For Bullet-list
Icon For Code
Icon For Edit-text
Icon For Filter
Icon For Font
Icon For H1
Icon For H2
Icon For Itallic
Icon For Menu
Icon For Paragraph
Icon For Quote#2
Icon For Redo
Icon For Strikethrough
Icon For Text-height
Icon For Text-width
Icon For Text
Icon For Underline
Icon For Undo

Tools

Icon For Swiss-knife
Icon For Angle Grinder
Icon For Axe
Icon For Brush
Icon For Compass
Icon For Hummer#2
Icon For Hummer
Icon For Pantone
Icon For Road-Cone
Icon For Roller
Icon For Roulette
Icon For Screwdriver
Icon For Shovel
Icon For Spatula
Icon For Tools

Weather

Icon For Rain#2
Icon For Celcium
Icon For Cloud#1
Icon For Cloud#2
Icon For Cloud-fog
Icon For Cloud-sun
Icon For Cloud-wind
Icon For Cloudy-night
Icon For Cloudy
Icon For Day-rain
Icon For Fahrenheit
Icon For Fog
Icon For Moon
Icon For Night-fog
Icon For Night-rain
Icon For Rain#1
Icon For Rain#5
Icon For Rainbow
Icon For Snow#1
Icon For Snow#2
Icon For Snow#3
Icon For Snow
Icon For Storm
Icon For Sun-fog
Icon For Sun
Icon For Suset#1
Icon For Suset#2
Icon For Temperature-empty
Icon For Temperature-full
Icon For Temperature-half
Icon For Thunder-night
Icon For Thunder
Icon For Umbrella
Icon For Wind

Social

YouTube icon
LinkedIn icon
Medium icon
Pinterest icon
Twitter icon
Vimeo icon
Facebook icon
GitHub icon
Google icon
Google Drive icon
Google Play icon
Instagram icon
Dribbble icon
Apple icon

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.


Form Group

Place some helper text here.

Basic Example

We'll never share your email with anyone else.

Form Controls

Legend
We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons
Checkboxes
Success! You've done it.
Sorry, that username's taken. Try another?
$
.00
Custom forms
Upload

Layout 1

Showcasing different layouts.


Place content here...