Styleguide 0.30.7
Introduction
Design language
Code guidelines
HTML
Javascript
CSS
Microcopy
Resources
Changelog
Browser support
Prototypes
Frontpage
Article
Magasinet article
Pattern primer
1.0 - Logo
1.1 - Favicon
1.2 - Touch icon
1.3 - Gravatars
2.0 - Colors
2.1 - Primary color
2.2 - Supporting colors
2.2.1 - Combinations
2.2.2 - Tints and shades
2.3 - Contextual colors
2.4 - Interaction
2.5 - Text
2.6 - Shadows
3.0 - Fonts
3.1 - Roboto
4.0 - Typography
4.1 - Headings
4.1.1 - Subheadings
4.1.2 - Segmented headings
4.1.3 - Uppercase
4.1.4 - Subheader for Long-read and Magasinet
4.2 - Standfirst
4.3 - Paragraphs
4.3.1 - Body copy
4.3.2 - Body copy
4.4 - Links
4.4.1 - External links
4.4.2 - File links
4.4.4 - Headline links
4.5 - Lists
4.5.1 - Unordered lists
4.5.2 - Ordered lists
4.5.3 - Definition lists
4.6 - Quotes
4.6.1 - Quotes for long reads.
4.6.2 - Quotes for Magasinet
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
4.19 - Strike through title
5.0 - Icons
5.1 - Section icons
5.1.1 - Size
5.1.2 - Icon font, Images and SVG
5.2 - Icon font
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
7.11 - Dagbladet Pluss 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.2.1 - YouTube
10.2.2 - DBTV (deprecated)
10.4 - Caption
10.4.1 - Header figure caption
js
10.4.2 - 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
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 - Alternate primary
11.3.1 - Gay Pride primary
11.4 - Alternate secondary
11.5 - Pagination
11.6 - Page header
11.6.1 - Icon
11.6.2 - Colors
11.6.3 - Breadcrumbs
11.7 - Chapter navigation (Long read article)
11.8 - Tabs
js
11.8.1 - Expanded
12.0 - Section markers
12.1 - Section-bar
12.1.1 - Colors
12.1.2 - Icon
12.1.3 - Links
js
12.1.4 - Pluss
12.2 - Section-title
12.2.1 - Colors
12.2.2 - Alignment
12.2.3 - Sizes
12.2.4 - Read more
12.3 - Section-header
12.3.1 - Size
12.3.2 - Link & icons
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.6 - Infobox
13.7 - Authorlist
13.9 - Fact box
13.10 - Fact box - expand
13.11 - Biobox
14.0 - Labels
14.1 - Colors
14.2 - Icons
14.3 - List
14.4 - Label-text
14.5 - Review Labels
14.5.1 - Culture label
14.5.2 - Motor label
14.5.3 - Wine label
14.6 - Label-pluss
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.15 - Article preview blog
20.16 - Article preview horizontal
20.18 - Kitchen sink
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
25.0 - TV-Guide
js
25.1 - TV-Guide (Slim version)
js
26.0 - Comics
js
26.1 - Comics teaser
js
27.0 - Poll
27.1 - Colors
28.0 - Footer
29.0 - Hero unit
29.1 - Article header
29.2 - Chapter
29.3 - Authorbox
31.0 - Charts
31.1 - Pie
js
31.2 - Bars
js
31.3 - Line
js
31.4 - People
31.5 - Legend
31.5.1 - Legend
31.6 - Examples
31.6.1 - Sparkline
31.6.2 - Custom line chart
31.6.4 - Custom bar chart
32.0 - Columnist
32.2 - Columnist-list
33.0 - Review
33.1 - Review box
33.1.1 - Music review box
33.1.2 - Book review box
33.1.3 - Film review box
33.1.4 - Concert / classical concert review box
33.1.5 - Car review box
33.3 - Wine article
33.4 - Wine list / Article preview
33.5 - Frontpage review
33.6 - Front Review Variation
33.7 - Drink colors
34.0 - Paywall
36.0 - Pluss
36.1 - Chapter info
36.2 - Pluss tag
37.0 - Scroll snap preview
37.1 - Scroll snap - Normal
37.2 - Scroll snap - Magasinet
99.0 - Dice
99.1 - Roll
99.1.1 - Ace
99.1.2 - Deuce
99.1.3 - Trey
99.1.4 - Carter
99.1.5 - Cinque
99.1.6 - Sice
99.2 - Colors
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