This is a Heading 1

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

Misc. elements

Using emphasis, addresses, & abbreviations

  <address> <abbr>

When to use

Emphasis tags ( and ) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use  for importance and  for stress emphasis.

Emphasis in a paragraph

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Note: It's still okay to use  and  tags in HTML5, but they don't come with inherent styles anymore.  is meant to highlight words or phrases without conveying additional importance, while  is mostly for voice, technical terms, etc.

Addresses

The <address> element is used for contact information for its nearest ancestor, or the entire body of work. Here’s how it looks:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Note: Each line in an <address> must end with a line-break ( ) or be wrapped in a block-level tag (e.g., ) to properly structure the content.

Abbreviations

For abbreviations and acronyms, use the <abbr> tag (<acronym> is deprecated in HTML5). Put the shorthand form within the tag and set a title for the complete name.

Blockquotes

<blockquote>  

How to quote

To include a blockquote, wrap <blockquote> around  and  tags. Use the  element to cite your source and you'll get an em dash — before it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert

Preformatted Text Style

pre {
  margin: 10px 0 10px 0px;
  padding: 5px 0 5px 10px;
  border: 1px dotted #aab4be;
  border-left: 20px solid #b4b4b4;
  background: #fafafa;
  font-size: 90%;
  color: #2E8B57;
  font-family: "Courier New", Courier, monospace;
}

List Style

Default ul style

Default ul style

Icon Style

This is a sample of the alert style for p or span using class alert

This is a sample of the alert style for p or span using class asterisk

This is a sample of the alert style for p or span using class check

This is a sample of the alert style for p or span using class disk

This is a sample of the alert style for p or span using class edit

This is a sample of the alert style for p or span using class email

This is a sample of the alert style for p or span using class pdf

This is a sample of the alert style for p or span using class printer

This is a sample of the alert style for p or span using class star

This is a sample of the alert style for p or span using class tip

Box Style

This is a sample of the alert style. Use this style to highlight information to your users. To use this use the div class alert

This is a sample of the alert style. Use this style to highlight information to your users. To use this use the div class attention

This is a sample of the alert style. Use this style to highlight information to your users. To use this use the div class approved

This is a sample of the alert style. Use this style to highlight information to your users. To use this use the div class cart

This is a sample of the alert style. Use this style to highlight information to your users. To use this use the div class fav

This is a sample of the alert style. Use this style to highlight information to your users. To use this use the div class lock

This is a sample of the alert style. Use this style to highlight information to your users. To use this use the div class note

This is a sample of the alert style. Use this style to highlight information to your users. To use this use the div class tips

Example: Default table styles

All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.

#	First Name	Last Name	Language
1	Some	One	English
2	Joe	Sixpack	English
3	Stu	Dent	Code

Example: Zebra-striped

Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.

#	First Name	Last Name	Language
1	Some	One	English
2	Joe	Sixpack	English
3	Stu	Dent	Code

<table class="zebra-striped">
...
</table>

Form Styles

Example form legend

X-Large Input

Select

Uneditable Input

Some Value Here

Disabled Input

X-Large Input

Small snippet of help text

Example form legend

Prepended Text

Prepended Checkbox

Appended Checkbox

File Input

Example form legend

List of Options

Option one is this and that—be sure to include why it’s great
Option two can also be checked and included in form results
Option three can—yes, you guessed it—also be checked and included in form results
Option four cannot be checked as it is disabled.

Note: Labels surround all the options for much larger click areas and a more usable form.

Date Range

to All times are shown as Pacific Standard Time (GMT -08:00).

Textarea

Block of help text to describe the field above if need be.

List of Options

Option one is this and that—be sure to include why it’s great
Option two can also be checked and included in form results

Stacked forms

Add .form-stacked to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.

Example form legend

X-Large Input

Select

Example form legend

X-Large Input

Small snippet of help text

List of Options

Option one is this and that—be sure to include why it’s great
Option two can also be checked and included in form results

Note: Labels surround all the options for much larger click areas and a more usable form.

Buttons

As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

All buttons default to a light gray style, but a blue .primary class and a red .danger class is available. Plus, rolling your own styles is easy peasy.

Example buttons

Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

Alternate sizes

Fancy larger or smaller buttons? Have at it!

Primary action Action

Disabled state

For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.

Links

Primary action Action

Buttons

Alerts & Errors Styles for success, warning, and error messages or alerts

Basic alerts

One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

Oh snap! Change this and that and try again.

Holy gaucamole! Best check yo self, you’re not looking too good.

Well done! You successfully read this alert message.

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

Block messages

For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Holy gaucamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Take this action Or do this

Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Take this action Or do this

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

Take this action Or do this

Typography

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

Misc. elements

When to use

Emphasis in a paragraph

Addresses

Abbreviations

Blockquotes

How to quote

Preformatted Text Style

List Style

Icon Style

Box Style

Example: Default table styles

Example: Zebra-striped

Form Styles

Stacked forms

Buttons

Example buttons

Alternate sizes

Disabled state

Links

Buttons

Alerts & Errors Styles for success, warning, and error messages or alerts

Basic alerts

Block messages