Text
Component name: <v-text>
Using a consistent typographic scale and a limited set of spacing values is widely regarded as good practices in visual design. This is enforced via this component.
Examples
Basic
aA aA aA aA aA aA aA aA aA
<div class="app">
<v-text font-size="1" tag="span">aA</v-text>
<v-text font-size="2" tag="span">aA</v-text>
<v-text font-size="3" tag="span">aA</v-text>
<v-text font-size="4" tag="span">aA</v-text>
<v-text font-size="5" tag="span">aA</v-text>
<v-text font-size="6" tag="span">aA</v-text>
<v-text font-size="7" tag="span">aA</v-text>
<v-text font-size="8" tag="span">aA</v-text>
<v-text font-size="9" tag="span">aA</v-text>
</div>
1
2
3
4
5
6
7
8
9
10
11
Semantics and appearance
In the example below it's clear semantics and appearance are separated. Different tags can have the same appearance. This allows you to think about semantics and appearance seperately.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
<div class="app">
<v-text font-size="7" tag="h1" bold>The quick brown fox jumps over the lazy dog</v-text>
<v-text font-size="7" tag="span" bold>The quick brown fox jumps over the lazy dog</v-text>
<v-text font-size="7" tag="div" bold>The quick brown fox jumps over the lazy dog</v-text>
</div>
1
2
3
4
5
Different header levels with same appearance:
Header level 1 (h1)
Header level 2 (h2)
Header level 3 (h3)
<div class="app">
<v-text font-size="7" tag="h1" bold>Header level 1</v-text>
<v-text font-size="7" tag="h2" bold>Header level 2</v-text>
<v-text font-size="7" tag="h3" bold>Header level 3</v-text>
</div>
1
2
3
4
5
Utility classes
For different styles and behavior you can apply utility classes.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
<div class="app">
<v-text font-size="3" class="text-primary">The quick brown fox jumps over the lazy dog</v-text>
<v-text font-size="3" class="text-secondary text-center">The quick brown fox jumps over the lazy dog</v-text>
<v-text font-size="3" class="text-right">The quick brown fox jumps over the lazy dog</v-text>
</div>
1
2
3
4
5
Content
v-text
supports child content / components.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.
<div class="app">
<v-text font-size="3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus.
</p>
<p>
Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.
</p>
</v-text>
</div>
1
2
3
4
5
6
7
8
9
10
Responsiveness
Utilize font-md-size
and font-lg-size
for responsive typography scaling.
<div class="app">
<v-text font-size="5" font-md-size="7" font-lg-size="8" tag="h1" bold>Resize browser</v-text>
</div>
1
2
3
Scale
The type scale consists of 9 sizes.
Size | Example |
1 | Example |
2 | Example |
3 | Example |
4 | Example |
5 | Example |
6 | Example |
7 | Example |
8 | Example |
9 | Example |
API
Name | Type | Description | Default |
tag | String | Changes the underlying HTML element.
Valid value: HTML element | div |
font-size | Number | Defines the size of the text.
Valid values: 1, 2, 3, 4, 5, 6, 7, 8, 9 | 3 |
font-md-size | Number | A breakpoint specific version of font-size | - |
font-lg-size | Number | A breakpoint specific version of font-size | - |
bold | Boolean | Defines bold characters | false |
italic | Boolean | Defines italic font style. | false |
Notice
All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class
attribute.