Vuetify — Text Styles

Image for post
Image for post
Photo by Amanda Vick on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Typography

We can add classes for typography.

For example, we can write:

We have the text-h1 class to render a large heading.

We can do the same for the other headings, body, button, caption, subtitle, overline with the class with the same names.

Text Decoration

Vuetify also provides text-decoration classes to set this CSS property.

For example, we can write:

to style text with or without lines.

Text Transform

We can transform text with some text- classes.

For example, we can write:

We can change the text to upper case, lower case, or capitalized as we wish.

Font Weights and Italics

We can change the font-weight and toggle on or off italics with classes provided by Vuwetify.

For example, we can write:

The font-weight- classes let us set the font-weight to what we want.

Text Opacity

The text opacity can be changed with different classes.

For instance, we can write:

The opacity can be changed with the text--primary , text--secondary and text--disabled classes.

They have the opacities listed.

RTL Alignment

Vuetify has classes to change the alignment to RTL.

For example, we can write:

We have the classes to align text according to breakpoints and the position.

Image for post
Image for post
Photo by Joshua Reddekopp on Unsplash

Conclusion

We can align text and change text style with the classes provided by Vuetify.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store