brandv1.0
Utilities
Data Display
Data Entry
Feedback

Background

Convey meaning through background-color and add decoration with gradients.

Solid Color

For backgrounds, use .bg-* with any color from a predefined set of 270+ colors. Choose from 22 base colors with respective light & dark shades. See full list of colors here.

							
                                
<template>
    <div class="d-flex">
        <div class="flex-fill bg-danger h-70p"></div>
        <div class="flex-fill bg-pink h-70p"></div>
        <div class="flex-fill bg-purple h-70p"></div>
        <div class="flex-fill bg-violet h-70p"></div>
        <div class="flex-fill bg-indigo h-70p"></div>
        <div class="flex-fill bg-blue h-70p"></div>
        <div class="flex-fill bg-primary h-70p"></div>
        <div class="flex-fill bg-info h-70p"></div>
        <div class="flex-fill bg-teal h-70p"></div>
        <div class="flex-fill bg-success h-70p"></div>  
    </div>
    <div class="d-flex">
        <div class="flex-fill bg-neon h-70p"></div>
        <div class="flex-fill bg-lime h-70p"></div>
        <div class="flex-fill bg-sun h-70p"></div>
        <div class="flex-fill bg-warning h-70p"></div>
        <div class="flex-fill bg-orange h-70p"></div>
        <div class="flex-fill bg-pumpkin h-70p"></div>
        <div class="flex-fill bg-brown h-70p"></div>
        <div class="flex-fill bg-grey h-70p"></div>
        <div class="flex-fill bg-gold h-70p"></div>
        <div class="flex-fill bg-smoke h-70p"></div>
    </div>
</template>
Class Values
class="bg-[Value]" primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke
Dark Color

For Dark backgrounds, use .bg-dark-*

							
                                
<template>
    <div class="d-flex">
        <div class="flex-fill bg-dark-10 h-70p"></div>
        <div class="flex-fill bg-dark-20 h-70p"></div>
        <div class="flex-fill bg-dark-40 h-70p"></div>
        <div class="flex-fill bg-dark-60 h-70p"></div>
        <div class="flex-fill bg-dark-80 h-70p"></div>
        <div class="flex-fill bg-dark-100 h-70p"></div>
    </div>
</template>
Class Values
class="bg-dark-[Value]" 10 / 20 / 40 / 60 / 80 / 100
Grey Color

For Dark backgrounds, use .bg-grey-*

							
                                
<template>
    <div class="flex-fill bg-grey-light-5 h-70p"></div>
    <div class="flex-fill bg-grey-light-4 h-70p"></div>
    <div class="flex-fill bg-grey-light-3 h-70p"></div>
    <div class="flex-fill bg-grey-light-2 h-70p"></div>
    <div class="flex-fill bg-grey-light-1 h-70p"></div>
    <div class="flex-fill bg-grey h-70p"></div>
    <div class="flex-fill bg-grey-dark-1 h-70p"></div>
    <div class="flex-fill bg-grey-dark-2 h-70p"></div>
    <div class="flex-fill bg-grey-dark-3 h-70p"></div>
    <div class="flex-fill bg-grey-dark-4 h-70p"></div>
    <div class="flex-fill bg-grey-dark-5 h-70p"></div>
</template>
Class Values
class="bg-grey-light-[Value]"class="bg-grey-dark-[Value]" 1 / 2 / 3 / 4 / 5
Background Opacity

A set of dark & light background is made with different transparencies.

This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
							
                                
<template>
    <div class="bg-success p-2 text-white">This is default success
        background</div>
    <div class="bg-success p-2 text-white bg-opacity-75">This is 75%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-50">This is 50%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-25">This is 25%
        opacity success background</div>
    <div class="bg-success p-2 text-dark bg-opacity-10">This is 10%
        opacity success background</div>
</template>
Class Values
class="bg-opacity-[Value]" 10 / 25/ 50 / 75
Overlay

Use .bg-overlay .bg-success .bg-opacity-*.

img
img
							
                                
<template>
    <div class="overlay-wrap">
        <img class="d-block w-100 img-fluid" :src="bgImg" alt="img" />
        <div class="bg-overlay bg-success bg-opacity-25"></div>
    </div>
    <div class="overlay-wrap">
        <img class="d-block w-100 img-fluid" :src="bgImg" alt="img" />
        <div class="bg-overlay bg-light bg-opacity-25"></div>
    </div>
</template>

<script setup>
    import bgImg from '@/img-src/trans-bg.jpg'
</script>