Styleguide 0.28.5
Introduction
Design language
Code guidelines
HTML
Javascript
CSS
Microcopy
Resources
Changelog
Browser support
Prototypes
Frontpage
Article
Pattern primer
1.0 - Logo
1.1 - Favicon
1.2 - Touch icon
2.0 - Colors
2.1 - Primary color
2.2 - Supporting colors
2.2.1 - Tints and shades
2.3 - Contextual colors
2.4 - Interaction
2.5 - Text
2.6 - Shadows
3.0 - Fonts
3.1 - Open Sans
4.0 - Typography
4.1 - Headings
4.1.1 - Subheadings
4.1.2 - Segmented headings
4.1.3 - Uppercase
4.2 - Standfirst
4.3 - Paragraphs
4.3.1 - Body copy
4.4 - Links
4.4.1 - External links
4.4.2 - File links
4.4.3 - Headline links
4.5 - Lists
4.5.1 - Unordered lists
4.5.2 - Ordered lists
4.5.3 - Definition lists
4.6 - Quotes
4.7 - Inserts and delets
4.8 - Strong and Emphasis
4.9 - Bold and italic
4.10 - Definition
4.11 - Abbrevation
4.12 - Cite
4.13 - Caption
4.14 - Superscript and subscripts
4.15 - Byline
4.16 - Time / Published
4.16.1 - From now
js
4.17 - Code
4.18 - Preformatted text
4.18.1 - Syntax highlight
js
5.0 - Icons
5.1 - Section icons
5.1.1 - Size
5.1.2 - Icon font, Images and SVG
5.2 - Icon font
5.3 - Other icons
6.0 - Grid
7.0 - Buttons
7.1 - Colors
7.2 - Size
7.3 - Style
7.4 - Expanded
7.5 - Button groups
7.6 - Icons
7.6.1 - Icon only
7.7 - Buttons with lables
7.8 - Dropdown
js
7.10 - Special buttons
8.0 - Forms
8.1 - Form elements
8.1.1 - Text input
8.1.2 - Checkbox
8.1.3 - Radio
8.1.4 - Select
8.1.5 - Range
js
8.1.6 - Switch
8.1.7 - Taglist
8.2 - Labels
8.2.1 - Inline
8.3 - Pre/Postfix
8.6 - Details
8.7 - Errors
8.8 - Validation
js
8.99 - Kitchen sink
9.0 - Tables
9.1 - Header
9.1.1 - Sorting
js
9.2 - Footer
9.3 - Aligning column content
9.4 - Main column
9.5 - No wrap
9.6 - Highlight rows and cells
9.6.1 - Row
9.6.2 - Row alternate
9.6.3 - Cell
9.8 - Row dividers
9.9 - Subheading
9.10 - Select row
js
9.11 - Table editor
10.0 - Figure
10.1 - Images
10.1.1 - Responsive images
10.1.2 - Responsive images forced
js
10.1.3 - Lazyload
js
10.2 - Video
10.3 - Charts
10.4 - Caption
10.4.1 - Expandable
js
10.5 - Border
10.5.1 - Passepartout
10.6 - Expanded
js
10.6.1 - Fixed
js
10.7 - Lightbox
js
10.8 - Group
10.8.1 - Two
10.8.2 - Three
10.9 - Comparison
js
10.10 - Collection
js
10.11 - Carousel header
js
11.0 - Navigation
11.1 - Top-nav
js
11.1.1 - Search
11.1.2 - Navigation
11.1.3 - Dropdown
11.1.4 - Buttons
11.1.5 - User login
11.1.7 - Navigation small screens
11.1.8 - In app
11.2 - Secondary
js
11.2.1 - Secondary dropdown
11.3 - Page header
11.3.1 - Icon
11.3.2 - Colors
11.3.3 - Breadcrumbs
11.3.4 - Todays tip
11.4 - Tabs
js
11.4.1 - Expanded
11.5 - Pagination
11.6 - Side nav
12.0 - Section-title
12 - Section-title
12.1.1 - Colors
12.1.2 - Alignment
12.1.3 - Sizes
12.3 - Section-header
12.4 - Content Marketing
13.0 - Panel
13.1 - Style
13.2 - Color
13.3 - Divider
13.4 - Section title
13.5 - Fact box
13.5.2 - Fact box
13.6 - Infobox
14.0 - Labels
14.1 - Colors
14.2 - Icons
14.3 - List
14.4 - Label-text
14.7 - Old article label
15.0 - Loader
15.1 - Pause
15.1.1 - Toggle
js
15.2 - Size
15.3 - Modal
js
16.0 - Progress bar
16.1 - Color
16.2 - Style
17.0 - Tooltips
js
18.0 - Alerts
js
18.1 - Color
18.2 - Style
18.3 - Alert group
19.0 - Dialog
js
19.1 - Actions
19.2 - Demo
20.0 - Article preview
20.1 - Headlines
20.2 - Standfirst
20.2.1 - Icons
20.2.2 - Bullets
20.5 - Editorial markings
20.5.1 - Labels
20.5.2 - Kicker
20.5.3 - Deck
20.5.4 - Bylinephoto
20.6 - Related
20.6.1 - Icons
20.7 - Secondary actions
20.8 - Background colors
20.9 - Text only
20.10 - Float images
20.11 - Extrinsic content
20.12 - Native advertising
20.16 - Article preview horizontal
20.19 - Categorized articles
20.20 - Editors recommend / Hero unit
20.21 - Editors recommend
21.0 - Row
21.1 - Deck
21.2 - Color
21.2.1 - Nested
21.3 - Collapsed
21.4 - Extrinsic content
22.0 - Article lists
22.1 - Ordered list
22.1.1 - Thumbnails
22.2 - Unordered list
22.2.1 - Thumbnails
22.3 - No bullet
22.3.1 - Thumbnails
22.4 - Color
23.0 - Article beat
24.0 - Article collection
25.0 - Article scroll
25.1 - Article scroll
26.0 - TV-Guide
js
26.1 - TV-Guide (Slim version)
js
27.0 - Poll
27.1 - Colors
27.2 - Active state
28.0 - Footer
31.0 - Reviews
31.1 - Review-box
31.2 - Prisjakt product-ad
31.3 - Last reviews collection
31.4 - Review Preview
31.5 - Review list
32.0 - Toolbox
33.0 - Paywall
34.0 - Recipe preview box
35.0 - Oppskrift.no latest articles (oppskrift_foodbox)
37.0 - Scroll snap preview
37.1 - Scroll snap - Normal
42.0 - Oppskrift search cb
Resources
Favicon cheat sheet
Social Media Meta Tags
Color Design for the Color Vision Impaired
Stories of Web Users: How People with Disabilities Use the Web
