vue-material/docs/src/pages/ui-elements/Typography.vue

<template>
  <single-page label="UI Elements - Typography">
    <div>
      <div class="column">
        <code>.md-display-4</code>
      </div>
      <h1 class="md-display-4">Display 4</h1>
    </div>

    <div>
      <div class="column">
        <code>.md-display-3</code>
      </div>
      <h1 class="md-display-3">Display 3</h1>
    </div>

    <div>
      <div class="column">
        <code>.md-display-2</code>
      </div>
      <h1 class="md-display-2">Display 2</h1>
    </div>

    <div>
      <div class="column">
        <code>.md-display-1</code>
      </div>
      <h1 class="md-display-1">Display 1</h1>
    </div>

    <div>
      <div class="column">
        <code>.md-headline</code>
      </div>
      <h1 class="md-headline">Headline</h1>
    </div>

    <div>
      <div class="column">
        <code>.md-title</code>
      </div>
      <h1 class="md-title">Title</h1>
    </div>

    <div>
      <div class="column">
        <code>.md-subheading</code>
      </div>
      <h1 class="md-subheading">Subheading</h1>
    </div>

    <div>
      <div class="column">
        <code>.md-body-2</code>
      </div>
      <h1 class="md-body-2">Body 2</h1>
    </div>

    <div>
      <div class="column">
        <code>.md-body-1</code>
      </div>
      <h1 class="md-body-1">Body 1</h1>
    </div>

    <div>
      <div class="column">
        <code>.md-caption</code>
      </div>
      <h1 class="md-caption">Caption</h1>
    </div>

    <div>
      <div class="column">
        <code>Link</code>
      </div>
      <a>Link</a>
    </div>
  </single-page>
</template>

<style lang="scss" scoped>
  .column {
    width: 175px;
  }

  .column,
  h1 {
    display: inline-block;
    vertical-align: middle;
  }

  h1 {
    margin: .5em 0;
  }
</style>