AroundUI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Around utilities

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

Around component

Faded background colors

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

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

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

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

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

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

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

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

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

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

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

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

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

Translucent image overlay

Primary overlay
Success overlay
Danger overlay
Warning overlay
Info overlay
Dark overlay
<!-- Primary overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center zindex-5 py-5">
    Primary overlay
  </div>
</div>

<!-- Success overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-success opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center zindex-5 py-5">
    Success overlay
  </div>
</div>

<!-- Danger overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-danger opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center zindex-5 py-5">
    Danger overlay
  </div>
</div>

<!-- Warning overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-warning opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center zindex-5 py-5">
    Warning overlay
  </div>
</div>

<!-- Info overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-info opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center zindex-5 py-5">
    Info overlay
  </div>
</div>

<!-- Dark overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-60"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center zindex-5 py-5">
    Dark overlay
  </div>
</div>
// Primary overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(assets/img/landing/corporate/features/03.jpg);")
  span.position-absolute.top-0.start-0.w-100.h-100.bg-primary.opacity-70
  .position-relative.fs-lg.fw-semibold.text-white.text-center.zindex-5.py-5
    | Primary overlay

// Success overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(assets/img/landing/corporate/features/03.jpg);")
  span.position-absolute.top-0.start-0.w-100.h-100.bg-success.opacity-70
  .position-relative.fs-lg.fw-semibold.text-white.text-center.zindex-5.py-5
    | Success overlay

// Danger overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(assets/img/landing/corporate/features/03.jpg);")
  span.position-absolute.top-0.start-0.w-100.h-100.bg-danger.opacity-70
  .position-relative.fs-lg.fw-semibold.text-white.text-center.zindex-5.py-5
    | Danger overlay

// Warning overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(assets/img/landing/corporate/features/03.jpg);")
  span.position-absolute.top-0.start-0.w-100.h-100.bg-warning.opacity-70
  .position-relative.fs-lg.fw-semibold.text-white.text-center.zindex-5.py-5
    | Warning overlay

// Info overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(assets/img/landing/corporate/features/03.jpg);")
  span.position-absolute.top-0.start-0.w-100.h-100.bg-info.opacity-70
  .position-relative.fs-lg.fw-semibold.text-white.text-center.zindex-5.py-5
    | Info overlay

// Dark overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(assets/img/landing/corporate/features/03.jpg);")
  span.position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-60
  .position-relative.fs-lg.fw-semibold.text-white.text-center.zindex-5.py-5
    | Dark overlay

Gradient text

I'm a gradient text

<!-- Gradient text -->
<h2 class="display-4">
  <span style="background: linear-gradient(90.72deg, #cbfdb1 3.49%, #acbff1 50.67%, #efa7ec 100.79%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
    I'm a gradient text
  </span>
</h2>
// Gradient text
h2.display-4
  span(style="background: linear-gradient(90.72deg, #cbfdb1 3.49%, #acbff1 50.67%, #efa7ec 100.79%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;")
    | I'm a gradient text

Opacity

Opacity 10%Opacity 20%Opacity 25%Opacity 30%Opacity 40%Opacity 50%Opacity 60%Opacity 70%Opacity 75%Opacity 80%Opacity 90%Opacity 100%
<!-- Opacity -->
<div class="opacity-0">...</div>
<div class="opacity-10">...</div>
<div class="opacity-20">...</div>
<div class="opacity-25">...</div>
<div class="opacity-30">...</div>
<div class="opacity-40">...</div>
<div class="opacity-50">...</div>
<div class="opacity-60">...</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-0
  | ...
.opacity-10
  | ...
.opacity-20
  | ...
.opacity-25
  | ...
.opacity-30
  | ...
.opacity-40
  | ...
.opacity-50
  | ...
.opacity-60
  | ...
.opacity-70
  | ...
.opacity-80
  | ...
.opacity-90
  | ...
.opacity-100
  | ...