Adjusting height of v-list-tile in Vuetify

Question

CodePen

Relevant section is:

<v-list-tile>
  <v-list-tile-content>
    <div>
      This is some content that's a little tall.<br />
      Maybe there's a lot of stuff that goes here.<br />
      Or maybe I'm using a third party control.<br />
      Either way, how can I adjust the height?
    </div>
  </v-list-tile-content>
</v-list-tile>

I have a Vuetify menu that contains a list. One of the list items is taller than the 48px set in the base styles. Is there a way to adjust this gracefully in the markup? Or do I need to use css to adjust?

Answer 1

According to the docs, you can increase the size of items in <v-list> with either two-line or three-line

Beyond that, it's advised you use a card:

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. If you need more than 3 lines, it is advised to use a card.

The purpose of v-list is to enforce uniformity of height in repeated elements, so if you need more than three lines to convey a particular point, it probably makes sense to use a repeating card element that can cover more area and use cases.