Finder utilities

Custom Around classes with a purpose to reduce the frequency of highly repetitive declarations.

Finder component

Faded background colors

Primary faded background
Accent faded background
Secondary background
Info faded background
Success faded background
Warning faded background
Danger faded background
Dark faded background
<!-- Primary faded background -->
<div class="bg-faded-primary">...</div>

<!-- Accent background -->
<div class="bg-faded-accent">...</div>

<!-- Secondary background -->
<div class="bg-secondary">...</div>

<!-- Info faded background -->
<div class="bg-faded-info">...</div>

<!-- Success faded background -->
<div class="bg-faded-success">...</div>

<!-- Warning faded background -->
<div class="bg-faded-warning">...</div>

<!-- Danger faded background -->
<div class="bg-faded-danger">...</div>

<!-- Dark faded background -->
<div class="bg-faded-dark">...</div>
// Primary faded background
.bg-faded-primary
  | ...

// Accent background
.bg-faded-accent
  | ...

// Secondary background
.bg-secondary
  | ...

// Info faded background
.bg-faded-info
  | ...

// Success faded background
.bg-faded-success
  | ...

// Warning faded background
.bg-faded-warning
  | ...

// Danger faded background
.bg-faded-danger
  | ...

// Dark faded background
.bg-faded-dark
  | ...

Gradient background

Gradient background
<!-- Gradient background -->
<div class="bg-gradient">...</div>
// Gradient background
.bg-gradient
  | ...

Translucent image overlay

Primary overlay
Accent overlay
Success overlay
Warning overlay
Danger overlay
Info overlay
Dark overlay
White overlay
Gradient overlay
<!-- Primary overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-primary opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Primary overlay</div>
</div>

<!-- Success overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-success opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Success overlay</div>
</div>

<!-- Warning overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-warning opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Warning overlay</div>
</div>

<!-- Danger overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-danger opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Danger overlay</div>
</div>

<!-- Info overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-info opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Info overlay</div>
</div>

<!-- Dark overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-dark opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Dark overlay</div>
</div>

<!-- White overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-white opacity-60"></span>
  <div class="content-overlay fw-bold text-center py-5">White overlay</div>
</div>

<!-- Gradient overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(path-to-bg-image);">
  <span class="img-overlay bg-gradient opacity-60"></span>
  <div class="content-overlay fw-bold text-white text-shadow text-center py-5">Gradient overlay</div>
</div>
// Primary overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-primary.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Primary overlay

// Success overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-success.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Success overlay

// Warning overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-warning.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Warning overlay

// Danger overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-danger.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Danger overlay

// Info overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-info.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Info overlay

// Dark overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-dark.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Dark overlay

// White overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-white.opacity-60
  .content-overlay.fw-bold.text-center.py-5 White overlay

// Gradient overlay
.position-relative.bg-size-cover.py-5(style="background-image: url(path-to-bg-image);")
  span.img-overlay.bg-gradient.opacity-60
  .content-overlay.fw-bold.text-white.text-shadow.text-center.py-5 Gradient overlay

Opacity

Opacity 10%Opacity 15%Opacity 25%Opacity 35%Opacity 40%Opacity 50%Opacity 60%Opacity 65%Opacity 70%Opacity 75%Opacity 80%Opacity 90%Opacity 100%
<!-- Opacity -->
<div class="opacity-10"></div>
<div class="opacity-15"></div>
<div class="opacity-25"></div>
<div class="opacity-35"></div>
<div class="opacity-40"></div>
<div class="opacity-50"></div>
<div class="opacity-60"></div>
<div class="opacity-65"></div>
<div class="opacity-70"></div>
<div class="opacity-75"></div>
<div class="opacity-80"></div>
<div class="opacity-90"></div>
<div class="opacity-100"></div>
// Opacity
.opacity-10
.opacity-15
.opacity-25
.opacity-35
.opacity-40
.opacity-50
.opacity-60
.opacity-65
.opacity-70
.opacity-75
.opacity-80
.opacity-90
.opacity-100

Text shadow

Text shadow

<!-- Text shadow -->
<h2 class="text-white text-shadow">Text shadow</h2>
// Text shadow
h2.text-white.text-shadow Text shadow

Opacity transition

Opacity from 25% to 100%
Opacity from 50% to 100%
Opacity from 75% to 100%
<!-- Opacity transition from 25% to 100% -->
<div class="opacity-25 opacity-transition">...</div>

<!-- Opacity transition from 50% to 100% -->
<div class="opacity-50 opacity-transition">...</div>

<!-- Opacity transition from 75% to 100% -->
<div class="opacity-75 opacity-transition">...</div>
// Opacity transition from 25% to 100%
.opacity-25.opacity-transition
  | ...

// Opacity transition from 50% to 100%
.opacity-50.opacity-transition
  | ...

// Opacity transition from 75% to 100%
.opacity-75.opacity-transition
  | ...
Top