Back to contents of Vuetify

# CSS related matters of Vuetify 2.0

# Text & Colours

# Text and Background Colors

  • class="red white--text"
// Home.vue
<template>
  <div class="home">
    <h1>Homepage</h1>
    <p class="red white--text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat assumenda odit soluta aliquid. Quas dignissimos consequatur reprehenderit, ullam non, at distinctio aperiam nulla, nisi labore debitis neque architecto iure praesentium!</p>
  </div>
</template>

# lighten

// Home.vue
<template>
  <div class="home">
    <h1>Homepage</h1>
    <p class="pink lighten-1 red--text--darken-1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque commodi veniam esse beatae dolor eligendi animi. Quia, eaque? Magni quos rem facere sapiente accusamus eveniet quam similique quo quae ullam?</p>
    <p class="pink lighten-5 red--text--darken-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque commodi veniam esse beatae dolor eligendi animi. Quia, eaque? Magni quos rem facere sapiente accusamus eveniet quam similique quo quae ullam?</p>
  </div>
</template>

# references


Last Updated: 2/28/2021, 4:31:52 AM