CODEWITHSUNDEEP
javascriptcssvue.jsstylesvuetify.js
Daniel Dwyer
Daniel Dwyer

Reputation: 11

Is it possible to utilize multiple bottom borders in Vue/Vuetify specifically within the v-card component

See the image here of the goal :

See image here of the goal

I need to add 3 bottom borders to my v-card component and am having trouble doing so.

I have tried:

Everything I try looks awful and feels so hacky. What is the correct way to add this 3 border setup to the bottom of a Vuetify v-card component?

Upvotes: 0

Views: 342

Answers (2)

tony19
tony19

Reputation: 138216

You could add a couple v-divider inside the v-card, and give them vertical margins:

<template>
  <v-card>
    ...

    <!-- special bottom border lines -->
    <v-divider />
    <v-divider />
  </v-card>
</template>

<style>
.v-divider {
  margin: 8px 0;
}
</style>

demo

Upvotes: 1

Daniel Dwyer
Daniel Dwyer

Reputation: 11

My solution was to remove the padding and margin from the v-card and ul. That meant I had to apply it to each li and not to the final li that housed the v-dividers. So there is a little repeated code with all the class="px-6" assignments on each li instead of the overall v-card, but it allowed me to single out that last li and utilize all the real estate in the v-card.

Winner, winner, chicken (veggie) dinner

Upvotes: 0

Related Questions