Colors

  • $green: #3b7840;
  • $green-dark: #15561a;
  • $green-light: #6bc04b;
  • $gold: #e9bd1d
  • $gold-dark: #d8ae15
  • $gold-light: #ebc434
  • #ffffff
  • #808080
  • #000000

Fonts

Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Secondary font: Georgia, Times, "Times New Roman", serif;

Secondary font italic: Georgia, Times, "Times New Roman", serif;

Secondary font bold: Georgia, Times, "Times New Roman", serif;

Animations

Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)

Visibility

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Paragraph

So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

Time

Emphasis Colors

This is what error text looks like

This is what valid text looks like

This is what warning text looks like

This is what information text looks like.

Hr


Caption

A caption can be applied to an image, quote, form field, etc.

Unordered

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

Ordered

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

Definition

Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.

Landscape 4x3

4x3 Image

Hero

Hero Image

Square

Square Thumbnail

Avatar

Avatar

Thumb

Thumb

Icons

icon-home
liga:
icon-home2
liga:
icon-office
liga:
icon-newspaper
liga:
icon-pencil
liga:
icon-pencil2
liga:
icon-quill
liga:
icon-pen
liga:
icon-blog
liga:
icon-droplet
liga:
icon-paint-format
liga:
icon-image
liga:
icon-image2
liga:
icon-images
liga:
icon-camera
liga:
icon-music
liga:
icon-headphones
liga:
icon-play
liga:
icon-film
liga:
icon-camera2
liga:
icon-dice
liga:
icon-pacman
liga:
icon-spades
liga:
icon-clubs
liga:
icon-diamonds
liga:
icon-pawn
liga:
icon-bullhorn
liga:
icon-connection
liga:
icon-podcast
liga:
icon-feed
liga:
icon-book
liga:
icon-books
liga:
icon-library
liga:
icon-file
liga:
icon-profile
liga:
icon-file2
liga:
icon-file3
liga:
icon-file4
liga:
icon-copy
liga:
icon-copy2
liga:
icon-copy3
liga:
icon-paste
liga:
icon-paste2
liga:
icon-paste3
liga:
icon-stack
liga:
icon-folder
liga:
icon-folder-open
liga:
icon-tag
liga:
icon-tags
liga:
icon-barcode
liga:
icon-qrcode
liga:
icon-ticket
liga:
icon-cart
liga:
icon-cart2
liga:
icon-cart3
liga:
icon-coin
liga:
icon-credit
liga:
icon-calculate
liga:
icon-support
liga:
icon-phone
liga:
icon-phone-hang-up
liga:
icon-address-book
liga:
icon-notebook
liga:
icon-envelope
liga:
icon-pushpin
liga:
icon-location
liga:
icon-location2
liga:
icon-compass
liga:
icon-map
liga:
icon-map2
liga:
icon-history
liga:
icon-clock
liga:
icon-clock2
liga:
icon-alarm
liga:
icon-alarm2
liga:
icon-bell
liga:
icon-stopwatch
liga:
icon-calendar
liga:
icon-calendar2
liga:
icon-print
liga:
icon-keyboard
liga:
icon-screen
liga:
icon-laptop
liga:
icon-mobile
liga:
icon-mobile2
liga:
icon-tablet
liga:
icon-tv
liga:
icon-cabinet
liga:
icon-drawer
liga:
icon-drawer2
liga:
icon-drawer3
liga:
icon-box-add
liga:
icon-box-remove
liga:
icon-download
liga:
icon-upload
liga:
icon-disk
liga:
icon-storage
liga:
icon-undo
liga:
icon-redo
liga:
icon-flip
liga:
icon-flip2
liga:
icon-undo2
liga:
icon-redo2
liga:
icon-forward
liga:
icon-reply
liga:
icon-bubble
liga:
icon-bubbles
liga:
icon-bubbles2
liga:
icon-bubble2
liga:
icon-bubbles3
liga:
icon-bubbles4
liga:
icon-user
liga:
icon-users
liga:
icon-user2
liga:
icon-users2
liga:
icon-user3
liga:
icon-user4
liga:
icon-quotes-left
liga:
icon-busy
liga:
icon-spinner
liga:
icon-spinner2
liga:
icon-spinner3
liga:
icon-spinner4
liga:
icon-spinner5
liga:
icon-spinner6
liga:
icon-binoculars
liga:
icon-search
liga:
icon-zoom-in
liga:
icon-zoom-out
liga:
icon-expand
liga:
icon-contract
liga:
icon-expand2
liga:
icon-contract2
liga:
icon-key
liga:
icon-key2
liga:
icon-lock
liga:
icon-lock2
liga:
icon-unlocked
liga:
icon-wrench
liga:
icon-settings
liga:
icon-equalizer
liga:
icon-cog
liga:
icon-cogs
liga:
icon-cog2
liga:
icon-hammer
liga:
icon-wand
liga:
icon-aid
liga:
icon-bug
liga:
icon-pie
liga:
icon-stats
liga:
icon-bars
liga:
icon-bars2
liga:
icon-gift
liga:
icon-trophy
liga:
icon-glass
liga:
icon-mug
liga:
icon-food
liga:
icon-leaf
liga:
icon-rocket
liga:
icon-meter
liga:
icon-meter2
liga:
icon-dashboard
liga:
icon-hammer2
liga:
icon-fire
liga:
icon-lab
liga:
icon-magnet
liga:
icon-remove
liga:
icon-remove2
liga:
icon-briefcase
liga:
icon-airplane
liga:
icon-truck
liga:
icon-road
liga:
icon-accessibility
liga:
icon-target
liga:
icon-shield
liga:
icon-lightning
liga:
icon-switch
liga:
icon-power-cord
liga:
icon-signup
liga:
icon-list
liga:
icon-list2
liga:
icon-numbered-list
liga:
icon-menu
liga:
icon-menu2
liga:
icon-tree
liga:
icon-cloud
liga:
icon-cloud-download
liga:
icon-cloud-upload
liga:
icon-download2
liga:
icon-upload2
liga:
icon-download3
liga:
icon-upload3
liga:
icon-globe
liga:
icon-earth
liga:
icon-link
liga:
icon-flag
liga:
icon-attachment
liga:
icon-eye
liga:
icon-eye-blocked
liga:
icon-eye2
liga:
icon-bookmark
liga:
icon-bookmarks
liga:
icon-brightness-medium
liga:
icon-brightness-contrast
liga:
icon-contrast
liga:
icon-star
liga:
icon-star2
liga:
icon-star3
liga:
icon-heart
liga:
icon-heart2
liga:
icon-heart-broken
liga:
icon-thumbs-up
liga:
icon-thumbs-up2
liga:
icon-happy
liga:
icon-happy2
liga:
icon-smiley
liga:
icon-smiley2
liga:
icon-tongue
liga:
icon-tongue2
liga:
icon-sad
liga:
icon-sad2
liga:
icon-wink
liga:
icon-wink2
liga:
icon-grin
liga:
icon-grin2
liga:
icon-cool
liga:
icon-cool2
liga:
icon-angry
liga:
icon-angry2
liga:
icon-evil
liga:
icon-evil2
liga:
icon-shocked
liga:
icon-shocked2
liga:
icon-confused
liga:
icon-confused2
liga:
icon-neutral
liga:
icon-neutral2
liga:
icon-wondering
liga:
icon-wondering2
liga:
icon-point-up
liga:
icon-point-right
liga:
icon-point-down
liga:
icon-point-left
liga:
icon-warning
liga:
icon-notification
liga:
icon-question
liga:
icon-info
liga:
icon-info2
liga:
icon-blocked
liga:
icon-cancel-circle
liga:
icon-checkmark-circle
liga:
icon-spam
liga:
icon-close
liga:
icon-checkmark
liga:
icon-checkmark2
liga:
icon-spell-check
liga:
icon-minus
liga:
icon-plus
liga:
icon-enter
liga:
icon-exit
liga:
icon-play2
liga:
icon-pause
liga:
icon-stop
liga:
icon-backward
liga:
icon-forward2
liga:
icon-play3
liga:
icon-pause2
liga:
icon-stop2
liga:
icon-backward2
liga:
icon-forward3
liga:
icon-first
liga:
icon-last
liga:
icon-previous
liga:
icon-next
liga:
icon-eject
liga:
icon-volume-high
liga:
icon-volume-medium
liga:
icon-volume-low
liga:
icon-volume-mute
liga:
icon-volume-mute2
liga:
icon-volume-increase
liga:
icon-volume-decrease
liga:
icon-loop
liga:
icon-loop2
liga:
icon-loop3
liga:
icon-shuffle
liga:
icon-arrow-up-left
liga:
icon-arrow-up
liga:
icon-arrow-up-right
liga:
icon-arrow-right
liga:
icon-arrow-down-right
liga:
icon-arrow-down
liga:
icon-arrow-down-left
liga:
icon-arrow-left
liga:
icon-arrow-up-left2
liga:
icon-arrow-up2
liga:
icon-arrow-up-right2
liga:
icon-arrow-right2
liga:
icon-arrow-down-right2
liga:
icon-arrow-down2
liga:
icon-arrow-down-left2
liga:
icon-arrow-left2
liga:
icon-arrow-up-left3
liga:
icon-arrow-up3
liga:
icon-arrow-up-right3
liga:
icon-arrow-right3
liga:
icon-arrow-down-right3
liga:
icon-arrow-down3
liga:
icon-arrow-down-left3
liga:
icon-arrow-left3
liga:
icon-tab
liga:
icon-checkbox-checked
liga:
icon-checkbox-unchecked
liga:
icon-checkbox-partial
liga:
icon-radio-checked
liga:
icon-radio-unchecked
liga:
icon-crop
liga:
icon-scissors
liga:
icon-filter
liga:
icon-filter2
liga:
icon-font
liga:
icon-text-height
liga:
icon-text-width
liga:
icon-bold
liga:
icon-underline
liga:
icon-italic
liga:
icon-strikethrough
liga:
icon-omega
liga:
icon-sigma
liga:
icon-table
liga:
icon-table2
liga:
icon-insert-template
liga:
icon-pilcrow
liga:
icon-left-toright
liga:
icon-right-toleft
liga:
icon-paragraph-left
liga:
icon-paragraph-center
liga:
icon-paragraph-right
liga:
icon-paragraph-justify
liga:
icon-paragraph-left2
liga:
icon-paragraph-center2
liga:
icon-paragraph-right2
liga:
icon-paragraph-justify2
liga:
icon-indent-increase
liga:
icon-indent-decrease
liga:
icon-new-tab
liga:
icon-embed
liga:
icon-code
liga:
icon-console
liga:
icon-share
liga:
icon-mail
liga:
icon-mail2
liga:
icon-mail3
liga:
icon-mail4
liga:
icon-google
liga:
icon-google-plus
liga:
icon-google-plus2
liga:
icon-google-plus3
liga:
icon-google-plus4
liga:
icon-google-drive
liga:
icon-facebook
liga:
icon-facebook2
liga:
icon-facebook3
liga:
icon-instagram
liga:
icon-twitter
liga:
icon-twitter2
liga:
icon-twitter3
liga:
icon-feed2
liga:
icon-feed3
liga:
icon-feed4
liga:
icon-youtube
liga:
icon-youtube2
liga:
icon-vimeo
liga:
icon-vimeo2
liga:
icon-vimeo3
liga:
icon-lanyrd
liga:
icon-flickr
liga:
icon-flickr2
liga:
icon-flickr3
liga:
icon-flickr4
liga:
icon-picassa
liga:
icon-picassa2
liga:
icon-dribbble
liga:
icon-dribbble2
liga:
icon-dribbble3
liga:
icon-forrst
liga:
icon-forrst2
liga:
icon-deviantart
liga:
icon-deviantart2
liga:
icon-steam
liga:
icon-steam2
liga:
icon-github
liga:
icon-github2
liga:
icon-github3
liga:
icon-github4
liga:
icon-github5
liga:
icon-wordpress
liga:
icon-wordpress2
liga:
icon-joomla
liga:
icon-blogger
liga:
icon-blogger2
liga:
icon-tumblr
liga:
icon-tumblr2
liga:
icon-yahoo
liga:
icon-tux
liga:
icon-apple
liga:
icon-finder
liga:
icon-android
liga:
icon-windows
liga:
icon-windows8
liga:
icon-soundcloud
liga:
icon-soundcloud2
liga:
icon-skype
liga:
icon-reddit
liga:
icon-linkedin
liga:
icon-lastfm
liga:
icon-lastfm2
liga:
icon-delicious
liga:
icon-stumbleupon
liga:
icon-stumbleupon2
liga:
icon-stackoverflow
liga:
icon-pinterest
liga:
icon-pinterest2
liga:
icon-xing
liga:
icon-xing2
liga:
icon-flattr
liga:
icon-foursquare
liga:
icon-foursquare2
liga:
icon-paypal
liga:
icon-paypal2
liga:
icon-paypal3
liga:
icon-yelp
liga:
icon-libreoffice
liga:
icon-file-pdf
liga:
icon-file-openoffice
liga:
icon-file-word
liga:
icon-file-excel
liga:
icon-file-zip
liga:
icon-file-powerpoint
liga:
icon-file-xml
liga:
icon-file-css
liga:
icon-html5
liga:
icon-html52
liga:
icon-css3
liga:
icon-chrome
liga:
icon-firefox
liga:
icon-IE
liga:
icon-opera
liga:
icon-safari
liga:
icon-IcoMoon
liga:
icon-home3
liga:

Grid Size: 20

icon-arrow-left4
liga:
icon-arrow-left5
liga:
icon-arrow-down4
liga:
icon-arrow-up4
liga:
icon-arrow-right4
liga:
icon-arrow-down5
liga:
icon-arrow-up5
liga:
icon-arrow-right5
liga:
icon-arrow-left6
liga:
icon-arrow-down6
liga:
icon-arrow-up6
liga:
icon-arrow-right6
liga:
icon-arrow-left7
liga:
icon-arrow-down7
liga:
icon-arrow-up7
liga:
icon-uniE7D2
liga:

Loading Icon

Loading

Favicon

Text Fields

Select Menu

Checkbox

Checkbox *

Radio Buttons

Radio

Html5 Inputs

Buttons

Button

Alternate Button

Disabled Button

Text Button

Table

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 3 Table Footer 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Byline Author Only

Page Header Modifiers

Page Header

Address

Company Name
1234 Main St.
Anywhere, 101010, CA
U.S.A
+1.888.123.4567

Heading Group

This is the heading group's main heading

This is the heading group's subheading

Blockquote With Citation

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Quote Source

Intro Text

The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

Pullquote

A pull quote is a quotation or excerpt from an article

Info Box

One Up

1/1

Two Up

1/2
1/2

Three Up

1/3
1/3
1/3

Four Up

1/4
1/4
1/4
1/4

3 Column Layout

Main Content
Sidebar 2

1 Column Layout

Main Content

Media Block

Block Title Timestamp

Block Thumb Portrait Title

Block Thumb Title

Block Thumb Title Excerpt

Block Title

Block Title Excerpt

Block Post

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Block Event

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Block Contact

Block Directory

Our Lady of the Angels

204 37th Street
Lawrenceville, PA 15201
412-682-3877
Operating Hours
Mondays and Tuesdays (11 AM - 12:30 PM)
Contact
Fran McFadden
Type of Program
This is a food pantry. A food pantry is an organization that stores and distributes food to individuals, usually in the form of weekly or monthly grocery bags.

Block Recipe

You have of ingredients for this recipe.

Figure With Caption

4x3 Image
This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.

Newsletter

Find Help

Enter your neighborhood or ZIP

Contact Form

Your Name (required)

Your Email (required)

Subject

Your Message

Primary Nav

Breadcrumbs

Pagination

Tabs

Section Nav

Social Nav

Social Share

Accordion

Single Comment

  • So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

  • Tabs

    Hero

    Lorem ipsum dolor sit (37 characters)

    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.

    Call to action

    Hero Page Header

    Page Title

    Into text about the page (less than 140 characters long)

    Button

    Call to action

    Button Small

    Call to action

    Text Button

    Call to action

    Hero Text Banner

    Cta Banner

    Pattern Banner

    Pattern Banner Cooking

    Pattern Banner Gardening

    Pattern Banner Groceries

    Pattern Banner Kiwis

    Pattern Banner Tiles

    Well

    Keep up with the latest news

    Stay up-to-date on upcoming events, program news, etc lorem ipsum dolor sit amet, consectetur adipisicing.

    Sign up now

    Header

    Header Simple

    Sidebar

    Text Passage

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

    Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius.

    Heading Level 2

    • This is a list item in an unordered list
    • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
    • Lists can be nested inside of each other
      • This is a nested list item
      • This is another nested list item in an unordered list
    • This is the last list item

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    Heading Level 3

    Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis.

    1. This is a list item in an ordered list
    2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
    3. Lists can be nested inside of each other
      1. This is a nested list item
      2. This is another nested list item in an ordered list
    4. This is the last list item

    Heading Level 4

    Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit.

    Donate

    Donate Extended

    Timeline

    Accordion To Full

    Calendar

    Monday Tuesday Wednesday Thursday Friday Saturday Sunday
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29

    “Feed the Kids” Summer Telethon

    30
    31

    Split

    Section Img Headline List

    Hero Image

    Lorem ipsum dolor sit (37 characters)

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    Sidebar Post List

    Sidebar Event List

    Upcoming Events

    View all events

    Sidebar Text List

    Sidebar Text

    Well Subscribe

    Keep up with the latest news

    Stay up-to-date on upcoming events, program news, etc lorem ipsum dolor sit amet, consectetur adipisicing.

    Hero Page Header Form

    Hero Page Header Button

    Donate Form

    Homepage

    About the GPCFB

    For the past xx years Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, enim, id! Iste repellendus quidem nesciunt.

    Homepage Hero

    Lorem ipsum dolor sit (37 characters)

    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.

    Call to action

    About the Greater Pittsburgh Community Food Bank

    For the past xx years Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, enim, id! Iste repellendus quidem nesciunt.