All the Styles

All the Styles

May 13, 1900

What will your content look like? See the styles below!


Start a section with one of these beauties. Use ## to quickly create a second-level heading (h2). h1 is reserved for the title.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


Here's a sample paragraph from The War of the Worlds by H. G. Wells. Read the book. Smart uses Work Sans for body text and Archivo for headings, all loaded locally.

No one would have believed in the last years of the nineteenth century that this world was being watched keenly and closely by intelligences greater than man’s and yet as mortal as his own; that as men busied themselves about their various concerns they were scrutinized and studied, perhaps almost as narrowly as a man with a microscope might scrutinize the transient creatures that swarm and multiply in a drop of water. With infinite complacency men went to and fro over this globe about their little affairs, serene in their assurance of their empire over matter. It is possible that the infusoria under the microscope do the same. No one gave a thought to the older worlds of space as sources of human danger, or thought of them only to dismiss the idea of life upon them as impossible or improbable. It is curious to recall some of the mental habits of those departed days. At most terrestrial men fancied there might be other men upon Mars, perhaps inferior to themselves and ready to welcome a missionary enterprise. Yet across the gulf of space, minds that are to our minds as ours are to those of the beasts that perish, intellects vast and cool and unsympathetic, regarded this earth with envious eyes, and slowly and surely drew their plans against us. And early in the twentieth century came the great disillusionment.

Typography samples

The quick, bold, brown fox jumps over the lazy dog.

The quick, italic, brown fox jumps over the lazy dog.

The quick, italic, bold, brown fox jumps over the lazy dog.

The quick coding, brown fox jumps over the lazy dog

Blockquote 1

— Frank Lloyd Wright

Blockquote 2

There are two styles of blockquote available that can by cycled through by repeatedly pressing the blockquote toolbar icon.


Draw attention to something with a callout

Table & Lists

Bear TypeDietGeographyColorBest

Ordered List

  1. List Item
  2. List Item
  3. List Item

Unordered List

  • List Item
  • List Item
  • List Item

Toggle header

Product card

Product description

Buy me, bro

This is really important

No, really

But, really


Mountains and beautiful sky
Standard Image
Moody leaves
Wide Image
Magical forest
Full size image



<!doctype html>
<html class="no-js" lang="">

  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">

  <meta name="theme-color" content="#fafafa">
「 还好我们还有文字... 」