Stanford Logos
Horizontal Version
Stanford UniversityStacked Version
StanfordUniversity
Typography
University
Headings & Display Type
Splash Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Fluid Typography
Fluid type 4
Fluid type 5
Fluid type 6
Fluid type 7
Fluid type 8
Fluid type 9
Fluid type 10
Paragraphs
Intro and Paragraph (Base Font Size 21px)
Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea.
Regular paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Big paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Card paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Comparison of Different Base Font Size Options
H3 .basefont-19
Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea.
Regular paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Big paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Card paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
H3 .basefont-20
Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea.
Regular paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Big paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Card paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
H3 Default body font size (21px)
Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea.
Regular paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Big paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Card paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
H3 .basefont-22
Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea.
Regular paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Big paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Card paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
H3 .basefont-23
Intro text max-width is 65ch. A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea.
Regular paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Big paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Card paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Blockquotes
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.
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
Said no one, ever
Lists
Definition List
- Definition List Title 1
- This is a definition list division.
- Definition List Title 2
- This is a definition list division.
Ordered List
- List Item 1
- List Item 2
- List Item 3
Unordered List
- List Item 1
- List Item 2
- List Item 3
Code & Preformatted Text
Keyboard input: Cmd
Inline code: <div>code</div>
Sample output: This is sample output from a computer program.
Pre-formatted Text
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
WYSIWYG Content
Heading Level 2
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.
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
Heading Level 2 (Stacking)
Heading Level 3
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
- List Item 1
- List Item 2
- List Item 3
Heading Level 4
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
- List Item 1
- List Item 2
- List Item 3
Heading Level 5
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.
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
Heading Level 6
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.
Inline Styles
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 offset 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
This text is a short inline
quotation.
This is a citation.
The dfn element indicates a definition.
The mark element indicates a highlight.
The variable element, such as x = y.
The time element:
Colors
Black
black-true
Default
black-90
black-80
black-70
black-60
black-50
black-40
black-30
black-20
black-10
White
white
Digital Red
Default
digital-red-dark
digital-red-light
Digital Blue
Default
digital-blue-dark
digital-blue-light
Digital Green
Default
digital-green-dark
digital-green-light
digital-green-bright
Palo Alto
Default
palo-alto-dark
palo-alto-light
Palo Verde
Default
palo-verde-dark
palo-verde-light
Olive
Default
olive-dark
olive-light
Bay
Default
bay-dark
bay-light
Sky
Default
sky-dark
sky-light
Lagunita
Default
lagunita-dark
lagunita-light
Poppy
Default
poppy-dark
poppy-light
Spirited
Default
spirited-dark
spirited-light
Illuminating
Default
illuminating-dark
illuminating-light
Plum
Default
plum-dark
plum-light
Brick
Default
brick-dark
brick-light
Archway
Default
archway-dark
archway-light
Stone
Default
stone-dark
stone-light
Fog
Default
fog-dark
fog-light
HTML Elements
Drop Shadows
.shadow-none
.shadow-sm
.shadow
.shadow-md
.shadow-lg
.shadow-xl
.shadow-2xl
.shadow-inner
Tables
Default Table
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Heading | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Heading | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Heading | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Heading | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
Borderless Table
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Heading | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Heading | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Heading | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Heading | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
Images
Plain <img> element
Wrapped in a <figure> element, no <figcaption>
Wrapped in a <figure> element, with a
<figcaption>
Embed YouTube
Audio
Video
Horizontal Rule
Meter
Progress
Inline SVG
iframe
Form Elements
Layouts and Grids
CSS Grid
1
2
3
4
5
6
7
8
Flex Grid
6 of 12 columns
This column stacks vertically for XS-SM breakpoints and spans 6 of 12 columns for MD and up; responsive grid gaps.
6 of 12 columns
This column stacks vertically for XS-SM breakpoints and spans 6 of 12 columns for MD and up; responsive grid gaps.
8 of 12 columns
This column stacks vertically for XS breakpoint; spans 6 of 12 columns for SM-MD; spans 8 of 12 columns for LG and up; responsive column gaps using .grid-gap class.
4 of 12 columns
This column stacks vertically for XS breakpoint; spans 6 of 12 columns for SM-MD; spans 4 of 12 columns for LG and up; responsive column gaps using .grid-gap class.
Aspect Ratio Containers
Note: The aspect ratio classes have to be added to a wrapper container around your element. To use a width decorator class, you'll need to add a parent container that wraps around your aspect ratio container. Below are a few commonly used ones.
Square
4 x 3 Box
16 x 9 Box
2 x 1 Box
Centered container
The centered container contains site content within a certain width. From the XS breakpoint up to 1700px device width, it creates a fluid container with spacing on each side of the screen (different for every breakpoint). At 1700px and above, it restricts the content within to a box that maxes out at a width of 1500px, ie., at that point, it becomes a fixed-width container and is no longer fluid.
I'm a centered container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae condimentum sem. Phasellus a ornare eros, eu scelerisque diam. Etiam lacinia, dui sit amet euismod malesuada, eros ante suscipit neque, vitae eleifend urna augue ac nunc. Suspendisse posuere fringilla nisi vel blandit. Vivamus arcu nisl, fermentum ut erat quis, condimentum sodales nulla. Sed sit amet cursus ipsum. Aliquam eleifend, neque vitae vehicula varius, lorem dui tincidunt sapien, a lacinia sapien augue non felis. Donec gravida auctor imperdiet. Maecenas hendrerit commodo congue. Cras libero neque, convallis eu cursus vitae, commodo posuere nunc. Fusce id tortor ex. Nullam tristique velit id mauris consequat, et pretium magna vestibulum. Etiam fringilla arcu bibendum, ornare sapien eget, mollis enim. Aliquam erat volutpat. Nulla facilisi.