mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-11 16:53:09 +00:00
96 lines
1.7 KiB
Vue
96 lines
1.7 KiB
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>
|