Backgrounds and shadows

Backgrounds

Helper classes for adding a background color for an element.

.bg-default
.bg-primary
.bg-secondary
.bg-transparent

Example
HTML

.bg-default

.bg-primary

.bg-secondary

.bg-transparent

development/documentation/docs/backgrounds-helper-classes/examples/backgrounds.html

<div class="row">
	<div class="col text-center my-16">
		<code>.bg-default</code>
		<div class="border mx-auto rounded d-flex align-items-center bg-default" style="height: 96px; width: 196px;">
		</div>
	</div>

	<div class="col text-center my-16">
		<code>.bg-primary</code>
		<div class="border mx-auto rounded d-flex align-items-center bg-primary" style="height: 96px; width: 196px;">
		</div>
	</div>
	<div class="col text-center my-16">
		<code>.bg-secondary</code>
		<div class="mx-auto rounded d-flex align-items-center bg-secondary" style="height: 96px; width: 196px;">
		</div>
	</div>
	<div class="col text-center my-16">
		<code>.bg-transparent</code>
		<div class="border mx-auto rounded d-flex align-items-center bg-transparent" style="height: 96px; width: 196px;">
		</div>
	</div>
</div>

Shadows

Helper classes for adding shadows for an element.

.shadow-50
.shadow-40
.shadow-30
.shadow-20
.shadow-10
.shadow-0

Example
HTML

.shadow-50

.shadow-40

.shadow-30

.shadow-20

.shadow-10

.shadow-0

development/documentation/docs/backgrounds-helper-classes/examples/shadows.html

<div class="row">
	<div class="col text-center my-16">
		<code>.shadow-50</code>
		<div class="mx-auto rounded d-flex align-items-center bg-default shadow-50" style="height: 96px; width: 196px;">
		</div>
	</div>

	<div class="col text-center my-16">
		<code>.shadow-40</code>
		<div class=" mx-auto rounded d-flex align-items-center bg-default shadow-40" style="height: 96px; width: 196px;">
		</div>
	</div>

	<div class="col text-center my-16">
		<code>.shadow-30</code>
		<div class="mx-auto rounded d-flex align-items-center bg-default shadow-30" style="height: 96px; width: 196px;">
		</div>
	</div>

	<div class="col text-center my-16">
		<code>.shadow-20</code>
		<div class="mx-auto rounded d-flex align-items-center bg-default shadow-20" style="height: 96px; width: 196px;">
		</div>
	</div>

	<div class="col text-center my-16">
		<code>.shadow-10</code>
		<div class="mx-auto rounded d-flex align-items-center bg-default shadow-10" style="height: 96px; width: 196px;">
		</div>
	</div>
	<div class="col text-center my-16">
		<code>.shadow-0</code>
		<div class="mx-auto rounded d-flex align-items-center bg-default shadow-0" style="height: 96px; width: 196px;">
		</div>
	</div>
</div>