CODEWITHSUNDEEP
htmlcsssassvuetify.js
Denis Stephanov
Denis Stephanov

Reputation: 5281

Set 2 background colors in Vuetify's card component

I need create login card with following design:

enter image description here

I want split card in half by v-row and v-col components, where left column should be some place for image and other stuff, and right column for form. When resize card to mobile version, left column should hide. Hiding column I fix with display none, but I don't know how to set each half different color.

I had idea to background color to v-col element, but problem is that card have rounded corners. Any idea?

My not working sample is here

https://codepen.io/peter-peter-the-typescripter/pen/KKzZVrm

Upvotes: 0

Views: 7348

Answers (1)

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

Try adding overflow: hidden; style on the <v-row/> element so its square corners (which overflows the card component) will be hidden.

<v-card class="mx-auto" color="#26c6da" dark max-width="800" rounded="xl">
  <v-row class="mx-0" style="overflow:hidden;"> <!-- Add `overflow: hidden;` here! -->

    <!-- I've also tweaked this first column -->
    <v-col cols="6" class="yellow">
      <div class="fill-height d-flex justify-center align-center">this should be different color</div>
    </v-col>

    <v-col cols="6">
      <!-- v-card-title and v-card-action -->
    </v-col>

  </v-row>
</v-card>

enter image description here

Here's a sample demo.

Upvotes: 3

Related Questions