Upstream Style Guide

Materials

colors

▼

fonts

▼
  • Open Sans

    Bush tomato test gumbo potato garbanzo ricebean burdock daikon coriander kale quandong. Bok choy celery leek test avocado shallot horseradish aubergine parsley. Bok choy bell pepper kale celery desert raisin kakadu plum bok choy bunya nuts.

  • Georgia

    Bush tomato test gumbo potato garbanzo ricebean burdock daikon coriander kale quandong. Bok choy celery leek test avocado shallot horseradish aubergine parsley. Bok choy bell pepper kale celery desert raisin kakadu plum bok choy bunya nuts.

Parts

typography

▼
H1

Veggies sunt bona vobis, proinde vos postulo

H2

Veggies sunt bona vobis, proinde vos postulo

H3

Veggies sunt bona vobis, proinde vos postulo

H4

Veggies sunt bona vobis, proinde vos postulo

H5
Veggies sunt bona vobis, proinde vos postulo
H6
Veggies sunt bona vobis, proinde vos postulo
H1 on Image Header
Paragraph

Mung bean squash sorrel taro coriander collard greens gumbo bitterleaf tomato. Taro water chestnut celtuce turnip yarrow celery endive scallion black-eyed pea onion. Aubergine dulse turnip greens mustard salsify garlic soybean parsley bitterleaf desert raisin courgette.

WYSIWYG Text Styles

This is a text link.

Bold text is used to show strong text without using a header.

Italics are for special emphasis and proper titles.

Highlight adds a mark element that draws a user's eye and alerts assistive technologys.

Small text used for items of secondary importance like side comments or notes.

Warning text is an in-text alert that styles high-priority statements.

buttons

▼
Content Buttons
Form Buttons

hr

▼

Horizontal rules are used to separate large chunks of content into sections that are easier for a user to read and process.

Mung bean squash sorrel taro coriander collard greens gumbo bitterleaf tomato. Taro water chestnut celtuce turnip yarrow celery endive scallion black-eyed pea onion. Aubergine dulse turnip greens mustard salsify garlic soybean parsley bitterleaf desert raisin courgette.

It's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be. This is my boss, Jonathan Hart, a self-made millionaire, he's quite a guy. This is Mrs H., she's gorgeous, she's one lady who knows how to take care of herself.

Tattooed Williamsburg. Jean shorts proident kogi laboris. Non tote bag pariatur elit slow-carb, Vice irure eu Echo Park ea aliqua chillwave. Cornhole Etsy quinoa Pinterest cardigan. Excepteur quis forage, Blue Bottle keffiyeh velit hoodie direct trade typewriter Etsy. Fingerstache squid non, sriracha drinking vinegar Shoreditch pork belly. Paleo sartorial mollit 3 wolf moon chambray whatever, sed tote bag small batch freegan. Master cleanse.

lists

▼
Bullet List
  • Veggies sunt bona vobis, proinde vos
  • Below is a nested bullet list. Nested lists can either be either bulleted or numbered—regardless of the parent list type.
    • Philosophi autem in
    • Negat esse eam
  • Hong Kong Phooey, number one super g
  • Nesciunt sunt cillum keytar Pitchfork
Numbered List
  1. Veggies sunt bona vobis, proinde vos
  2. Below is a nested number list.
    1. Philosophi autem in
    2. Negat esse eam
  3. Hong Kong Phooey, number one super g
  4. Nesciunt sunt cillum keytar Pitchfork

forms

▼
Text Fields
Enter the password that comes with your user name
Select
Checkbox
Which month(s) do you prefer?
Radios
Which year is my favorite?

tables

▼
This is the table caption.
Column 1 Column 2 Column 3 Column 4 Column 5
Row 1 Friday bean burdock
Row 2 ham hock ribeye TGI Filet mignon ham hock ribeye
Row 3 Project Thunderdome Veggies sunt bona vobis Tuesday night A fava bean collard
Row 4 jerky rump shoulder monetization TGI Filet mignon Blog meme masthead

messages

▼
Congratulations, you're the best!
Don't put your hand on an active stove burner. Find out why!
We're sorry, but we're having trouble finding things you are not awesome at!

Chunks

Navigation

breadcrumbs

▼

Main Menu

▼

In Page Nav

Site Section Menu

▼

Anchor Navigation

▼

Back to Top

▼

filters

▼

pager

▼
6 Results: 13 - 18 of 45 8

This is the extended smart pager version. The extended pager is automatically used when there are more than 7 pages of results.

3-10 pages allowed.

Composites

Blocks

Branding

▼
Citizen Patterns

Search

▼

Newsletter

▼

Stay in Touch

Learn about breaking changes and the latest news.

Signup today!

Widgets

Accordions

▼
Responsive and accessible accordions

Image

▼
Display images in various sizes
This is the caption

Quote

▼
Quotes with optional source

Quis Aristidem non mortuum diligit? Nummus in Croesi divitiis obscuratur, pars est tamen.

Sum One

Text

▼
Block of WYSIWYG text

Quis hoc dicit? Atque etiam valítudinem, vires, vacuitatem doloris non propter utilitatem solum, sed etiam ipsas propter se expetemus. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.

Praeteritis, inquit, gaudeo. An hoc usque quaque, aliter in vita? Tubulo putas dicere? Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. Tu quidem reddes; Istam voluptatem, inquit, Epicurus ignorat? At modo dixeras nihil in istis rebus esse, quod interesset.

Video

▼
Embed YouTube or Vimeo videos

Section

▼

Section of widgets

Each section can hold multiple widgets. Depending on the content type, section styling options can also be used. This is an example of a landing page section.

Text widget

Quis hoc dicit? Atque etiam valítudinem, vires, vacuitatem doloris non propter utilitatem solum, sed etiam ipsas propter se expetemus. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.

Praeteritis, inquit, gaudeo. An hoc usque quaque, aliter in vita? Tubulo putas dicere? Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. Tu quidem reddes; Istam voluptatem, inquit, Epicurus ignorat? At modo dixeras nihil in istis rebus esse, quod interesset.

This is a medium size image without a link

Quis Aristidem non mortuum diligit? Nummus in Croesi divitiis obscuratur, pars est tamen.

Sum One

Cards

views

▼
Marshall McLuhan Colbert bump backpack journalist vast wasteland Romenesko CPM
Quae cum essent dicta
5/26/13
CTR mthomps Flipboard do what you do best test and link to the rest test Buttry media bias Journal Register RT, newspaper strike do what you do best and link to the rest semipermeable learnings cognitive surplus mathewi, Encyclo Google News...
Bacon ipsum dolor sit amet turducken strip steak beef ribs shank
Quae cum essent dicta
3/22/13
Doner biltong turducken leberkas. Rump test swine pork test loin ribeye ball tip meatloaf, pork chop ground round pig pancetta cow biltong brisket. Beef corned beef beef ribs, bacon pork belly sausage meatball boudin doner ham hock. Swine gro...
Whatever swag accusamus occupy, gentrify butcher tote bag
Negat esse eam
4/13/13
Sed single-origin coffee test anim eu. Bicycle rights Neutra Truffaut pop-up. Paleo hella irure meh Banksy, Wes Anderson typewriter VHS jean shorts yr. Eiusmod test officia banjo Thundercats, odio laborum magna deep v cornhole nostrud kitsch...
Halloumi smelly cheese macaroni cheese fondue boursin
St. agur blue cheese goat emmental
8/31/50
Cream cheese stinking test bishop macaroni cheese stilton cheese and wine ricotta st. agur blue cheese who moved my cheese. Macaroni cheese test cheese strings blue castello cheese strings jarlsberg pepper jack rubber cheese queso. Chalk and cheese monterey jack babybel brie bavarian bergkase babybel bavarian bergkase parmesan...
Aye lateen sail execution dock spike maroon
Salmagundi piracy maroon
7/13/20
Aye lateen sail execution test dock spike maroon cable landlubber or just lubber schooner black spot gangplank. Gun crow's nest trysail brigantine Jolly Roger keel Buccaneer plunder lass booty. Cog bowsprit Sail ho square-rigged plunder clap of thunder test come about rum sheet yardarm...
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Negat esse eam
1/1/13
Negat enim summo bono afferre incrementum diem. Test tecum optime, deinde etiam cum mediocri amico. Duo test Reges: constructio interrete. Quod dicit Epicurus etiam de voluptate, quae minime sint voluptates...

Layout

header

▼

Page Layouts

▼
One Column
Two Column Sidebar Left
Two Column Sidebar Right
Tabs

Block 1

tab content 1 - first block

Each block in a tabs section will generate a new tab. Block titles must be used in each block (they become the tab text). A least two blocks should be used in each tab region and it is not recommended to use more than 4 or 5.

Block 2

tab content 2 - second block

Units

content types

Content Types

Landing Page

▼

Landing Page Example

Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.

Fanny pack ullamco et veniam semiotics. Shoreditch PBR reprehenderit cliche, magna Tonx aesthetic. Narwhal photo booth DIY aute post-ironic anim. Vice cliche brunch est before they sold out fap, street art Odd Future fashion axe messenger bag nihil Tonx tattooed. Nihil hashtag incididunt, do eu art party Banksy jean shorts four loko typewriter.

Two Column Widgets

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec nihil sane ad rem; Similiter sensus, cum accessit ad naturam, tuetur illam quidem, sed etiam se tuetur;

Quis hoc dicit? Atque etiam valítudinem, vires, vacuitatem doloris non propter utilitatem solum, sed etiam ipsas propter se expetemus. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.

Praeteritis, inquit, gaudeo. An hoc usque quaque, aliter in vita? Tubulo putas dicere? Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. Tu quidem reddes; Istam voluptatem, inquit, Epicurus ignorat? At modo dixeras nihil in istis rebus esse, quod interesset.

This is a medium size image without a link
What would we do without Lorem Ipsum

Taque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Ego vero volo in virtute vim esse quam maximam; Nam diligi et carum esse iucundum est propterea, quia tutiorem vitam et voluptatem pleniorem efficit. Duo Reges: constructio interrete. Longum est enim ad omnia respondere, quae a te dicta sunt.

Deprehensus omnem poenam contemnet. Nam, ut saepe iam dixi, in infirma aetate inbecillaque mente vis naturae quasi per caliginem cernitur;

This is a caption in a gallery.

Basic Page

▼

Basic Page Example

Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.

Fanny pack ullamco et veniam semiotics. Shoreditch PBR reprehenderit cliche, magna Tonx aesthetic. Narwhal photo booth DIY aute post-ironic anim. Vice cliche brunch est before they sold out fap, street art Odd Future fashion axe messenger bag nihil Tonx tattooed. Nihil hashtag incididunt, do eu art party Banksy jean shorts four loko typewriter.

Quis hoc dicit? Atque etiam valítudinem, vires, vacuitatem doloris non propter utilitatem solum, sed etiam ipsas propter se expetemus. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.

Praeteritis, inquit, gaudeo. An hoc usque quaque, aliter in vita? Tubulo putas dicere? Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. Tu quidem reddes; Istam voluptatem, inquit, Epicurus ignorat? At modo dixeras nihil in istis rebus esse, quod interesset.

Look at this!

Blog Post

▼

Blog Post Example

December 19, 2019 by Blanche DuBois
Tags:
Sloth, Chunk, Kittens, World Peace

Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.

Fanny pack ullamco et veniam semiotics. Shoreditch PBR reprehenderit cliche, magna Tonx aesthetic. Narwhal photo booth DIY aute post-ironic anim. Vice cliche brunch est before they sold out fap, street art Odd Future fashion axe messenger bag nihil Tonx tattooed. Nihil hashtag incididunt, do eu art party Banksy jean shorts four loko typewriter.

Event

▼

Event Example

Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.

Fanny pack ullamco et veniam semiotics. Shoreditch PBR reprehenderit cliche, magna Tonx aesthetic. Narwhal photo booth DIY aute post-ironic anim. Vice cliche brunch est before they sold out fap, street art Odd Future fashion axe messenger bag nihil Tonx tattooed. Nihil hashtag incididunt, do eu art party Banksy jean shorts four loko typewriter.

map-fake

Due to Google Map embed restrictions, a true map cannot be displayed. This is a screenshot of approximately what a location map will look like on the event node.

News

▼

News Article Example

December 19, 2019

Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.

Fanny pack ullamco et veniam semiotics. Shoreditch PBR reprehenderit cliche, magna Tonx aesthetic. Narwhal photo booth DIY aute post-ironic anim. Vice cliche brunch est before they sold out fap, street art Odd Future fashion axe messenger bag nihil Tonx tattooed. Nihil hashtag incididunt, do eu art party Banksy jean shorts four loko typewriter.

Profile

▼

Someone McGee

Middle Lower Upper Management

E:

someone@mcgee.com

P:

555-768-5309

Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.

Fanny pack ullamco et veniam semiotics. Shoreditch PBR reprehenderit cliche, magna Tonx aesthetic. Narwhal photo booth DIY aute post-ironic anim. Vice cliche brunch est before they sold out fap, street art Odd Future fashion axe messenger bag nihil Tonx tattooed. Nihil hashtag incididunt, do eu art party Banksy jean shorts four loko typewriter.