CODEWITHSUNDEEP
htmlvue.jsbreakpointstypography
xetra11
xetra11

Reputation: 8855

Vuetify dynamic typography by breakpoint?

I am trying to understand the following docs: https://vuetifyjs.com/en/styles/text-and-typography/ Using this vue template snippet:

<div class="text-h4 text-xs-body-2">
  FooBar
</div>

My idea was that this would render the text in xs (mobile) as body-2 size/style. Otherwise it should fall back to h4. However it does not work and I am unsure why?

Upvotes: 0

Views: 390

Answers (1)

JHeth
JHeth

Reputation: 8376

The base is xs. So h4 is your xs in this example. It says so in the docs:

These classes can be applied to all breakpoints from xs to xl. When using a base class,.text-{value}, it is inferred to be .text-xs-${value}.

There is no xs in Vuetify, when a breakpoint is omitted that is the xs.

Upvotes: 2

Related Questions