Typography

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Paragraphs

Large Paragraph (lead). Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames.

Regular Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Small Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Extra Small Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tempus luctus tempus.

Lists

  1. Aliquam molestie quam in tincidunt
  2. Morbi quis neque non nisl egestas
  3. Vestibulum nisi nibh, pulvinar amet
  4. Mauris pretium elit ac facilisis mollis
  5. Mauris vitae magna in dolor porta
 

Inline Text Elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is like an addition to a document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Title Alignments

TITLE LEFT

 

TITLE CENTER

 

TITLE RIGHT

 

Text Colors

Primary. Morbi quis neque non nisl egestas laoreet

Muted. Aliquam molestie quam in tincidunt

Success. Vestibulum nisi nibh, pulvinar sit amet lacinia

Info. Mauris pretium elit ac facilisis mollis posuere

Warning. Mauris vitae magna in dolor porta aliquam

Danger. Mauris vitae magna in dolor porta aliquam

Text Backgrounds

Pellentesque iaculis nisl vitae ligula volutpat, sit amet rhoncus nisl posuere. Vestibulum vel nisi euismod, commodo felis fermentum, fringilla ex. Fusce vel mattis quam, id bibendum leo. Vivamus et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent laoreet ultrices tortor eget sollicitudin. Vestibulum quis egestas mauris. Ut sed mi eu dui venenatis venenatis. Class aptent taciti sociosqu per inceptos himenaeos.

 

Blockquote

Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.

Someone famous in Source Title

Blockquote Reverse

Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.

Someone famous in Source Title
 

Text-Blocks

One-Fourth. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis.

One-Fourth. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis.

One-Fourth. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis.

One-Fourth. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis.

One-Third. Phasellus lobortis elit sed cursus ornare. Phasellus ut elit at nisl fringilla commodo nec non neque. Aliquam sed sagittis lorem, nec tempus lectus. Duis quis sollicitudin magna.

One-Third. Phasellus lobortis elit sed cursus ornare. Phasellus ut elit at nisl fringilla commodo nec non neque. Aliquam sed sagittis lorem, nec tempus lectus. Duis quis sollicitudin magna.

One-Third. Phasellus lobortis elit sed cursus ornare. Phasellus ut elit at nisl fringilla commodo nec non neque. Aliquam sed sagittis lorem, nec tempus lectus. Duis quis sollicitudin magna.

One-Half. Phasellus lobortis elit sed cursus ornare. Phasellus ut elit at nisl fringilla commodo nec non neque. Aliquam sed sagittis lorem, nec tempus lectus. Duis quis sollicitudin magna. Suspendisse sit amet orci venenatis, tempus leo eu, facilisis diam. Fusce vitae elit lobortis, efficitur purus nec, luctus ex. Phasellus volutpat ligula.

One-Half. Phasellus lobortis elit sed cursus ornare. Phasellus ut elit at nisl fringilla commodo nec non neque. Aliquam sed sagittis lorem, nec tempus lectus. Duis quis sollicitudin magna. Suspendisse sit amet orci venenatis, tempus leo eu, facilisis diam. Fusce vitae elit lobortis, efficitur purus nec, luctus ex. Phasellus volutpat ligula.

Full-Width. Phasellus lobortis elit sed cursus ornare. Phasellus ut elit at nisl fringilla commodo nec non neque. Aliquam sed sagittis lorem, nec tempus lectus. Duis quis sollicitudin magna. Suspendisse sit amet orci venenatis, tempus leo eu, facilisis diam. Fusce vitae elit lobortis, efficitur purus nec, luctus ex. Phasellus volutpat ligula et neque sollicitudin tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius magna nec sodales vehicula. Sed cursus lorem sit amet ligula semper mollis. Ut feugiat eget diam vel egestas. Phasellus sem neque, convallis eget nibh et, vulputate aliquam enim. Morbi interdum ante et metus semper placerat.

 

Icons

accessibility
accessibility
account_balance_wallet
account_balance_wallet
account_box
account_box
account_circle
account_circle
alarm
alarm
announcement
announcement
aspect_ratio
aspect_ratio
assessment
assessment
autorenew
autorenew
check_circle
check_circle
code
code
compare_arrows
compare_arrows
credit_card
credit_card
dashboard
dashboard
date_range
date_range
delete
delete
delete_forever
delete_forever
description
description
check
check
build
build
explore
explore
extension
extension
favorite
favorite
star
star
public
public
home
home
hourglass_empty
hourglass_empty
lock
lock
lock_outline
lock_outline
lock_open
lock_open
important_devices
important_devices
info
info
info_outline
info_outline
input
input
language
language
note_add
note_add
pan_tool
pan_tool
print
print
question_answer
question_answer
restore
restore
search
search
settings
settings
shopping_basket
shopping_basket
shopping_cart
shopping_cart
store
store
people
people
person
person
swap_horiz
swap_horiz
theaters
theaters
thumb_up
thumb_up
thumbs_up_down
thumbs_up_down
today
today
trending_up
trending_up
update
update
verified_user
verified_user
view_carousel
view_carousel
view_column
view_column
view_list
view_list
view_quilt
view_quilt
visibility
visibility
watch_later
watch_later
work
work
zoom_in
zoom_in
notifications
notifications
error
error
warning
warning
web
web
chat_bubble
chat_bubble
email
email
mail_outline
mail_outline
phone
phone
add_circle
add_circle
phone_iphone
phone_iphone
tablet_mac
tablet_mac
devices
devices
laptop
laptop
desktop_mac
desktop_mac
desktop_windows
desktop_windows
storage
storage
pie_chart
pie_chart
cloud
cloud
cloud_download
cloud_download
color_lens
color_lens
create
create
photo_camera
photo_camera
style
style
tune
tune
layers
layers
local_cafe
local_cafe
local_bar
local_bar
arrow_upward
arrow_upward
arrow_downward
arrow_downward
arrow_back
arrow_back
arrow_forward
arrow_forward
fullscreen
fullscreen
refresh
refresh
file_download
rfile_download
cancel
cancel
chevron_left
chevron_left
chevron_right
chevron_right
apps
apps
menu
menu

Those are only the most used material icons, you can find all icons here. FontAwesome is also integrated, you can find all icons here.