# 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
# Default body sizes
# Default heading sizes
# Scoped styling
<v-text> is using scoped CSS, which means that CSS will only apply to it's child elements. The benefit of this is that we avoid avoid style collisions. Use <v-text> as a wrapper everytime you have content coming from a wysiwyg or similar.
# Animated list
Add the special usp-list-animated class to your unordered list ul element wrapped by <v-text> to enable list animation.
# 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.
Different responsive header levels with same appearance:
# Utility classes
For different styles and behavior you can apply utility classes.
# Content
v-text supports child content / components.
# Truncate
Use truncate to display text in a single line and cut overflowing content with an ellipsis (…) at the end. Use truncate-middle to still show the last part of the text, which can be useful when truncating e.g. filenames.
# Outgoing link icon
# Inactive state
Utilize the inactive prop for dimmed text styling.
# Responsiveness
Utilize font-md-size and font-lg-size for responsive typography scaling.
# 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 |
| heading | Boolean | Whether or not to use heading defaults | false |
| size | String | Heading defaults. Valid values for body: small, medium, large Valid values for heading: xsmall, small, medium, large, xlarge | - |
| linebreaks | Boolean | Whether or not to preserve linebreaks in the text | false |
| truncate | Boolean | Display text in a single line and truncate overflowing content | false |
| truncate-middle | Boolean | Same as truncate but shows last part of the text | false |
| inactive | Boolean | dimmed text | false |
General 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.