Vue Bootstrap Color combination
Vue Color combination - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5. Go to docs v.5
The Material Design color system can be used to create a color theme that
reflects your brand or style.
The Material Design color system uses an organized approach to applying
color to your UI. In this system, a primary and a secondary color are
typically selected to represent your brand. Dark and light variants of each
color can then be applied to your UI in different ways.
A primary color is the color displayed most frequently
across your app’s screens and components.
If you don’t have a secondary color, your primary color can also be used to
accent elements.
Dark and light primary variants
You can make a color theme for your app using your primary color, as well as
dark and light primary variants.
Distinguish UI elements
To create contrast between UI elements, such as distinguishing a top app bar
from a system bar, you can use light or dark variants of your primary color
on each elements. You can also use variants to distinguish elements within a
component, such different variants used on a floating action button
container, and the icon within it.
Deep-purple accent-4
#6200ea
Deep-purple darken-4
#304ffe
Deep-purple accent-1
#b388ff
Alie Corporation
NYSE: AZHC • Oct 16, 1:45PM
<template>
<mdb-card>
<mdb-card-header
class="deep-purple darken-4 white-text text-right p-2"
>
<mdb-icon fab class="px-2" icon="facebook-f" size="sm" />
<mdb-icon fab class="px-2" icon="twitter" size="sm" />
<mdb-icon fab class="px-2" icon="instagram" size="sm" />
</mdb-card-header>
<mdb-navbar dark color="deep-purple accent-4" hamburger expand="xl">
<mdb-navbar-brand>
Analytics
</mdb-navbar-brand>
<mdb-navbar-toggler> </mdb-navbar-toggler>
</mdb-navbar>
<mdb-card-body>
<mdb-card-title>Alie Corporation</mdb-card-title>
<mdb-card-text>NYSE: AZHC • Oct 16, 1:45PM</mdb-card-text>
<div class="d-flex justify-content-between mb-2">
<p class="display-4 align-self-end">887.32</p>
<p class="align-self-end pb-2">887.02 (.03%)</p>
</div>
<mdb-bar-chart :data="data" :options="options" :height="200" />
<mdb-btn
tag="a"
floating
icon="plus"
class="deep-purple accent-1 float-right"
iconClass="black-text"
/>
</mdb-card-body>
</mdb-card>
</template>
<script>
import {
mdbIcon,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBarChart,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbNavbar,
mdbNavbarToggler,
mdbNavbarBrand
} from "mdbvue";
export default {
name: "ColorCombination",
components: {
mdbIcon,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBarChart,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbNavbar,
mdbNavbarToggler,
mdbNavbarBrand
},
data() {
return {
data: {
labels: [
"8 AM",
"10 AM",
"12 PM",
"2 PM",
"4 PM",
"6 PM",
"8 PM"
],
datasets: [
{
fill: false,
borderColor: "#673ab7",
pointBackgroundColor: "#673ab7",
data: [881, 882, 883, 884, 887, 885, 0],
backgroundColor: "#311b92"
}
]
},
options: {
responsive: true,
legend: {
display: false
},
elements: {
line: {
tension: 0.0
}
},
scales: {
xAxes: [
{
gridLines: {
display: false
},
ticks: {
padding: 15,
height: 30
}
}
],
yAxes: [
{
gridLines: {
drawBorder: false
},
ticks: {
maxTicksLimit: 5,
padding: 15,
min: 880,
max: 890
}
}
]
}
}
};
}
};
</script>
A secondary color provides more ways to accent and
distinguish your product. Having a secondary color is optional, and should
be applied sparingly to accent select parts of your UI.
Secondary colors are best for:
Floating action buttons
Selection controls, like sliders and switches
Highlighting selected text
Progress bars
Links and headlines
Dark and light secondary variants
Just like the primary color, your secondary color can have dark and light
variants. You can make a color theme by using your primary color, secondary
color, and dark and light variants of each color.
Deep-purple accent-4
#6200ea
Deep-purple darken-4
#304ffe
Alie Corporation
NYSE: AZHC • Oct 16, 1:45PM
<template>
<mdb-card>
<mdb-card-header
class="deep-purple darken-4 white-text text-right p-2"
>
<mdb-icon fab class="px-2" icon="facebook-f" size="sm" />
<mdb-icon fab class="px-2" icon="twitter" size="sm" />
<mdb-icon fab class="px-2" icon="instagram" size="sm" />
</mdb-card-header>
<mdb-navbar dark color="deep-purple accent-4" hamburger expand="xl">
<mdb-navbar-brand>
Analytics
</mdb-navbar-brand>
<mdb-navbar-toggler> </mdb-navbar-toggler>
</mdb-navbar>
<mdb-card-body>
<mdb-card-title>Alie Corporation</mdb-card-title>
<mdb-card-text>NYSE: AZHC • Oct 16, 1:45PM</mdb-card-text>
<div class="d-flex justify-content-between mb-2">
<p class="display-4 align-self-end">887.32</p>
<p class="align-self-end pb-2">887.02 (.03%)</p>
</div>
<mdb-bar-chart :data="data" :options="options" :height="200" />
<mdb-btn
tag="a"
floating
icon="plus"
class="teal accent-3 float-right"
iconClass="black-text"
/>
</mdb-card-body>
</mdb-card>
</template>
<script>
import {
mdbIcon,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBarChart,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbNavbar,
mdbNavbarToggler,
mdbNavbarBrand
} from "mdbvue";
export default {
name: "ColorCombination",
components: {
mdbIcon,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBarChart,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbNavbar,
mdbNavbarToggler,
mdbNavbarBrand
},
data() {
return {
data: {
labels: [
"8 AM",
"10 AM",
"12 PM",
"2 PM",
"4 PM",
"6 PM",
"8 PM"
],
datasets: [
{
fill: false,
borderColor: "#673ab7",
pointBackgroundColor: "#673ab7",
data: [881, 882, 883, 884, 887, 885, 0],
backgroundColor: "#311b92"
}
]
},
options: {
responsive: true,
legend: {
display: false
},
elements: {
line: {
tension: 0.0
}
},
scales: {
xAxes: [
{
gridLines: {
display: false
},
ticks: {
padding: 15,
height: 30
}
}
],
yAxes: [
{
gridLines: {
drawBorder: false
},
ticks: {
maxTicksLimit: 5,
padding: 15,
min: 880,
max: 890
}
}
]
}
}
};
}
};
</script>
The Material Design color system supports
alternative colors , which are colors used as alternatives
to your brand’s primary and secondary colors (they constitute additional
colors to your theme). Apps can use alternative colors to establish themes
that distinguish different sections.
Alternative colors are best for:
Apps with light and dark themes
Apps with different themes in different sections
Apps that exist as part of a suite of products
Alternative colors should be used cautiously, because they can be
challenging to implement cohesively with existing color themes.
Yellow is used as the primary color for areas such as onboarding and
choosing areas of interest.
Choose topics which interest you
<template>
<mdb-card class="yellow darken-1">
<mdb-card-body>
<mdb-card-title
tag="h2"
transparent
style="color: #304ffe"
class="font-weight-bold p-2"
>
<mdb-icon icon="code" class="red-text mr-2" />MDB
</mdb-card-title>
<mdb-card-title class="text-center font-weight-bold p-4"
>Choose topic which interests you</mdb-card-title
>
<mdb-container>
<mdb-row class="mt-4">
<mdb-col lg="6">
<mdb-card class="flex-row">
<mdb-view
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).webp"
imageClass="card-img-64"
>
<mdb-mask overlay="pink-strong" />
</mdb-view>
<mdb-card-body class="font-weight-bold">
Gaming
</mdb-card-body>
</mdb-card>
</mdb-col>
<mdb-col lg="6">
<mdb-card class="flex-row">
<mdb-view
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).webp"
imageClass="card-img-64"
>
<mdb-mask overlay="pink-strong" />
</mdb-view>
<mdb-card-body class="font-weight-bold">
Music
</mdb-card-body>
</mdb-card>
</mdb-col>
</mdb-row>
<mdb-row class="mt-4">
<mdb-col lg="6">
<mdb-card class="flex-row">
<mdb-view
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(2).webp"
imageClass="card-img-64"
>
<mdb-mask overlay="pink-strong" />
</mdb-view>
<mdb-card-body class="font-weight-bold">
Illustration
</mdb-card-body>
</mdb-card>
</mdb-col>
<mdb-col lg="6">
<mdb-card class="flex-row">
<mdb-view
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).webp"
imageClass="card-img-64"
>
<mdb-mask overlay="pink-strong" />
</mdb-view>
<mdb-card-body class="font-weight-bold">
Photography
</mdb-card-body>
</mdb-card>
</mdb-col>
</mdb-row>
<mdb-row class="mt-4">
<mdb-col lg="6">
<mdb-card class="flex-row">
<mdb-view
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(21).webp"
imageClass="card-img-64"
>
<mdb-mask overlay="pink-strong" />
</mdb-view>
<mdb-card-body class="font-weight-bold">
Architecture
</mdb-card-body>
</mdb-card>
</mdb-col>
<mdb-col lg="6">
<mdb-card class="flex-row">
<mdb-view
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).webp"
imageClass="card-img-64"
>
<mdb-mask overlay="pink-strong" />
</mdb-view>
<mdb-card-body class="font-weight-bold">
Technology
</mdb-card-body>
</mdb-card>
</mdb-col>
</mdb-row>
</mdb-container>
<mdb-btn
class="indigo accent-4 float-right mt-4"
icon="gem"
far
floating
tag="a"
/>
</mdb-card-body>
</mdb-card>
</template>
<script>
import {
mdbContainer,
mdbRow,
mdbIcon,
mdbCol,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbView,
mdbMask,
mdbInput
} from "mdbvue";
export default {
name: "ColorCombination",
components: {
mdbContainer,
mdbRow,
mdbIcon,
mdbCol,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbView,
mdbMask,
mdbInput
}
};
</script>
Blue is used as the primary color for areas of the app that relate to the
user’s personal account, such as selected classes.
Painting
Lorem ipsum dolor sit consectetur adipisicing elit
Design
Similique voluptas neque ab possimus nobis amet saepe
Technology
Itaque soluta sed atum culpa dolorum
Architecture
Quidem veniam qui aut dignissimos
<template>
<mdb-card class="indigo accent-4">
<mdb-card-body>
<mdb-card-title
tag="h2"
transparent
class="font-weight-bold p-2 white-text"
>
<mdb-icon icon="code" class="red-text mr-2" />MDB<mdb-icon
icon="user"
class="float-right"
/>
</mdb-card-title>
<mdb-row class="justify-content-center">
<mdb-col md="6" class="mt-4">
<mdb-card testimonial>
<mdb-card-up>
<img
src="https://mdbootstrap.com/img/Photos/Others/photo2.webp"
class="img-fluid"
/>
</mdb-card-up>
<mdb-card-avatar color="white" class="mx-auto"
><img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.webp"
class="rounded-circle"
/></mdb-card-avatar>
<mdb-card-body style="color: #304ffe">
<mdb-card-title>PAINTING</mdb-card-title>
<p class="black-text font-weight-bold">
Lorem ipsum dolor sit consectetur adipisicing elit
</p>
<mdb-icon fab icon="youtube" /> 123
</mdb-card-body>
</mdb-card>
</mdb-col>
<mdb-col md="6" class="mt-4">
<mdb-card testimonial>
<mdb-card-up>
<img
src="https://mdbootstrap.com/img/Photos/Others/photo9.webp"
class="img-fluid"
/>
</mdb-card-up>
<mdb-card-avatar color="white" class="mx-auto"
><img
src="https://mdbootstrap.com/img/Photos/Avatars/img (20).webp"
class="rounded-circle"
/></mdb-card-avatar>
<mdb-card-body style="color: #304ffe">
<mdb-card-title>DESIGN</mdb-card-title>
<p class="black-text font-weight-bold">
Similique voluptas neque ab possimus nobis
</p>
<mdb-icon fab icon="youtube" /> 98
</mdb-card-body>
</mdb-card>
</mdb-col>
</mdb-row>
<mdb-row class="justify-content-center">
<mdb-col md="6" class="mt-4">
<mdb-card testimonial>
<mdb-card-up>
<img
src="https://mdbootstrap.com/img/Photos/Others/img (45).webp"
class="img-fluid"
/>
</mdb-card-up>
<mdb-card-avatar color="white" class="mx-auto"
><img
src="https://mdbootstrap.com/img/Photos/Avatars/img (21).webp"
class="rounded-circle"
/></mdb-card-avatar>
<mdb-card-body style="color: #304ffe">
<mdb-card-title>TECHNOLOGY</mdb-card-title>
<p class="black-text font-weight-bold">
Itaque soluta sed atum culpa dolorum
</p>
<mdb-icon fab icon="youtube" /> 165
</mdb-card-body>
</mdb-card>
</mdb-col>
<mdb-col md="6" class="mt-4">
<mdb-card testimonial>
<mdb-card-up>
<img
src="https://mdbootstrap.com/img/Photos/Others/photo7.webp"
class="img-fluid"
/>
</mdb-card-up>
<mdb-card-avatar color="white" class="mx-auto"
><img
src="https://mdbootstrap.com/img/Photos/Avatars/img (32).webp"
class="rounded-circle"
/></mdb-card-avatar>
<mdb-card-body style="color: #304ffe">
<mdb-card-title>ARCHITECTURE</mdb-card-title>
<p class="black-text font-weight-bold">
Quidem veniam qui aut dignissimos
</p>
<mdb-icon fab icon="youtube" /> 74
</mdb-card-body>
</mdb-card>
</mdb-col>
</mdb-row>
<div class="white-text m-5 px-5 d-flex justify-content-between">
<mdb-icon icon="cogs" size="2x" />
<mdb-icon icon="heart" style="color: #fdd835" size="2x" />
<mdb-icon icon="search" size="2x" />
</div>
</mdb-card-body>
</mdb-card>
</template>
<script>
import {
mdbContainer,
mdbRow,
mdbIcon,
mdbCol,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbCardUp,
mdbCardAvatar
} from "mdbvue";
export default {
name: "ColorCombination",
components: {
mdbContainer,
mdbRow,
mdbIcon,
mdbCol,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbCardUp,
mdbCardAvatar
}
};
</script>
Pink is used as the primary color for classes.
Photography
Similique totam inventore numquam ipsa sed
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Obcaecati aut rem beatae quidem a reprehenderit accusamus
maxime voluptatem. Quo, adipisci, eius dolorum atque
necessitatibus cupiditate aliquam inventore eligendi quaerat
odio praesentium.
About me
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Maxime quae, dolores dicta. Blanditiis rem amet repellat,
dolores nihil quae in mollitia asperiores ut rerum
repellendus, voluptatum eum, officia laudantium quaerat?
<template>
<mdb-flipping-card
:flipped="flipped"
style="max-width: 22rem; height: 500px;"
>
<mdb-card class="face front" style="height: 500px;" testimonial>
<mdb-card-up>
<img
src="https://mdbootstrap.com/img/Photos/Others/images/18.webp"
class="img-fluid"
/>
</mdb-card-up>
<mdb-avatar circle class="mx-auto white"
><img
src="https://mdbootstrap.com/img/Photos/Avatars/img (21).webp"
class="rounded-circle"
/></mdb-avatar>
<mdb-card-body>
<mdb-card-title tag="h6" class="pink-text"
>PHOTOGRAPHY</mdb-card-title
>
<mdb-card-title class="font-weight-bold"
>Similique totam inventore numquam ipsa sed</mdb-card-title
>
<mdb-card-text class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Obcaecati aut rem beatae quidem a reprehenderit accusamus
maxime voluptatem. Quo, adipisci, eius dolorum atque
necessitatibus cupiditate aliquam inventore eligendi quaerat
odio praesentium
</mdb-card-text>
<mdb-btn
icon="redo-alt"
tag="a"
floating
color="pink"
@click="flipped = true"
/>
</mdb-card-body>
</mdb-card>
<mdb-card class="face back text-center" style="height: 500px;">
<mdb-card-body>
<h4 class="font-weight-bold">About me</h4>
<hr />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Maxime quae, dolores dicta. Blanditiis rem amet repellat,
dolores nihil quae in mollitia asperiores ut rerum
repellendus, voluptatum eum, officia laudantium quaerat?
</p>
<hr />
<ul class="list-inline py-2">
<li class="list-inline-item">
<mdb-btn
size="sm"
tag="a"
floating
color="pink"
fab
icon="facebook-f"
/>
</li>
<li class="list-inline-item">
<mdb-btn
size="sm"
tag="a"
floating
color="pink"
fab
icon="twitter"
/>
</li>
<li class="list-inline-item">
<mdb-btn
size="sm"
tag="a"
floating
color="pink"
fab
icon="google-plus-g"
/>
</li>
<li class="list-inline-item">
<mdb-btn
size="sm"
tag="a"
floating
color="pink"
fab
icon="linkedin-in"
/>
</li>
</ul>
<a class="rotate-btn" @click="flipped = false">
<mdb-icon class="pr-2" icon="undo" />Click here to rotate back
</a>
</mdb-card-body>
</mdb-card>
</mdb-flipping-card>
</template>
<script>
import {
mdbIcon,
mdbFlippingCard,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbCardUp,
mdbAvatar
} from "mdbvue";
export default {
name: "ColorCombination",
components: {
mdbIcon,
mdbFlippingCard,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbCardUp,
mdbAvatar
},
data() {
return {
flipped: false
};
}
};
</script>
Color can communicate the meaning of different UI elements. For example, a
weather app may display colors indicating current weather conditions, and a
navigation app may display color showing traffic conditions, with roads
colored red or green
Color should be used consistently in a product, so that certain colors
always mean the same thing, even if the context changes. Attention should
also be given to colors with local or cultural significance. For example,
alerts may typically be colored red in some cultures, but not in others.
Dark theme
<template>
<mdb-card class="pink darken-4 mdb-pink-darken-form">
<mdb-card-body>
<mdb-card-title
class="white-text text-center p-2 font-weight-bold"
>SIGN UP</mdb-card-title
>
<mdb-input
icon="user"
far
iconClass="white-text pink darken-4"
label="First name"
labelClass="white-text pink darken-4"
/>
<mdb-input
icon="hand-point-right"
far
iconClass="white-text pink darken-4"
label="Last name"
labelClass="white-text pink darken-4"
/>
<mdb-input
type="email"
icon="envelope"
far
iconClass="white-text pink darken-4"
label="Email"
labelClass="white-text pink darken-4"
/>
<mdb-input
type="password"
icon="star"
far
iconClass="white-text pink darken-4"
label="Password"
labelClass="white-text pink darken-4"
small="At least 8 characters and 1 digit"
/>
</mdb-card-body>
<div class="white rounded-top p-4 text-center">
<mdb-btn outline="red" block rounded>Sign in</mdb-btn>
<p class="small mt-3 mb-1">or sign up with:</p>
<ul class="list-inline">
<li class="list-inline-item">
<mdb-btn
class="p-0 mx-1"
size="lg"
flat
transparent
style="color: #c51162"
fab
icon="facebook-f"
/>
</li>
<li class="list-inline-item">
<mdb-btn
class="p-0 mx-1"
size="lg"
flat
transparent
style="color: #c51162"
fab
icon="twitter"
/>
</li>
<li class="list-inline-item">
<mdb-btn
class="p-0 mx-1"
size="lg"
flat
transparent
style="color: #c51162"
fab
icon="google-plus-g"
/>
</li>
<li class="list-inline-item">
<mdb-btn
class="p-0 mx-1"
size="lg"
flat
transparent
style="color: #c51162"
fab
icon="linkedin-in"
/>
</li>
</ul>
<hr />
<p class="small">
By clicking <i>Sign up</i> you agree to our
<a href="#" style="color: #c51162">terms of service</a>
</p>
</div>
</mdb-card>
</template>
<script>
import {
mdbCard,
mdbCardBody,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbInput
} from "mdbvue";
export default {
name: "ColorCombination",
components: {
mdbCard,
mdbCardBody,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbInput
}
};
</script>
<style>
.mdb-pink-darken-form input {
color: white !important;
}
.mdb-pink-darken-form input:focus {
border-color: white !important;
box-shadow: 0 1px 0 0 white !important;
}
.mdb-pink-darken-form small {
color: white !important;
}
</style>
<template>
<mdb-card style="color: #3e2723">
<mdb-card-header class="red lighten-4 text-right p-2">
<mdb-icon fab class="px-2" icon="facebook-f" size="sm" />
<mdb-icon fab class="px-2" icon="twitter" size="sm" />
<mdb-icon fab class="px-2" icon="instagram" size="sm" />
</mdb-card-header>
<mdb-navbar color="red lighten-5">
<mdb-navbar-brand>
<h6 class="h6 mb-0">
<mdb-icon icon="gem" far class="mr-1" /> SHOP
</h6>
</mdb-navbar-brand>
<mdb-navbar-nav right>
<mdb-nav-item>
<mdb-icon icon="search" />
</mdb-nav-item>
</mdb-navbar-nav>
</mdb-navbar>
<mdb-card-body>
<mdb-container class="text-center">
<mdb-row>
<mdb-col>
<mdb-view
src="https://mdbootstrap.com/img/Photos/Others/img (31).webp"
rounded
class="z-depth-1"
>
<mdb-mask overlay="white-slight" />
</mdb-view>
<h6 class="font-weight-bold mt-4">Skateboard</h6>
<p>$64</p>
</mdb-col>
<mdb-col>
<mdb-view
src="https://mdbootstrap.com/img/Photos/Others/img (30).webp"
rounded
class="z-depth-1"
>
<mdb-mask overlay="white-slight" />
</mdb-view>
<h6 class="font-weight-bold mt-4">Red Cap</h6>
<p>$15</p>
</mdb-col>
</mdb-row>
<mdb-row>
<mdb-col>
<mdb-view
src="https://mdbootstrap.com/img/Photos/Others/food3.webp"
rounded
class="z-depth-1"
>
<mdb-mask overlay="white-slight" />
</mdb-view>
<h6 class="font-weight-bold mt-4">Fruit Porridge</h6>
<p>$3</p>
</mdb-col>
<mdb-col>
<mdb-view
src="https://mdbootstrap.com/img/Photos/Others/img (29).webp"
rounded
class="z-depth-1"
>
<mdb-mask overlay="white-slight" />
</mdb-view>
<h6 class="font-weight-bold mt-4">Orange Cocktail</h6>
<p>$10</p>
</mdb-col>
</mdb-row>
</mdb-container>
<div class="d-flex justify-content-between align-items-end">
<div>
<mdb-btn
icon="share-alt"
transparent
flat
class="p-0"
iconClass="fa-lg"
/>
<mdb-btn
icon="question-circle"
far
transparent
flat
class="p-0"
iconClass="fa-lg"
/>
</div>
<mdb-btn
tag="a"
floating
icon="shopping-basket"
class="red lighten-4"
iconClass="brown-darken-text"
/>
</div>
</mdb-card-body>
</mdb-card>
</template>
<script>
import {
mdbContainer,
mdbRow,
mdbIcon,
mdbCol,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBtn,
mdbNavbar,
mdbNavbarToggler,
mdbNavbarBrand,
mdbNavbarNav,
mdbNavItem,
mdbView,
mdbMask
} from "mdbvue";
export default {
name: "ColorCombination",
components: {
mdbContainer,
mdbRow,
mdbIcon,
mdbCol,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBtn,
mdbNavbar,
mdbNavbarToggler,
mdbNavbarBrand,
mdbNavbarNav,
mdbNavItem,
mdbView,
mdbMask
}
};
</script>
<style>
.brown-darken-text {
color: #3e2723 !important;
}
</style>
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)