Finder utilities

Custom Finder CSS 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 className='bg-faded-primary'>...</div>

{/* Accent faded background */}
<div className='bg-faded-accent'>...</div>

{/* Secondary background */}
<div className='bg-secondary'>...</div>

{/* Info faded background */}
<div className='bg-faded-info'>...</div>

{/* Success faded background */}
<div className='bg-faded-success'>...</div>

{/* Warning faded background */}
<div className='bg-faded-warning'>...</div>

{/* Danger faded background */}
<div className='bg-faded-danger'>...</div>

{/* Dark faded background */}
<div className='bg-faded-dark'>...</div>

Gradient background

Gradient background
{/* Gradient background */}
<div className='bg-gradient'>...</div>

Gradient background

Primary overlay
Accent overlay
Success overlay
Warning overlay
Danger overlay
Info overlay
Dark overlay
White overlay
Gradient overlay
{/* Primary overlay */}
<div className='position-relative bg-size-cover py-5' style={{backgroundImage: 'url(/images/real-estate/city/dallas.jpg)'}}>
  <span className='img-overlay bg-primary opacity-60'></span>
  <div className='content-overlay fw-bold text-white text-shadow text-center py-5'>Primary overlay</div>
</div>

{/* Accent overlay */}
<div className='position-relative bg-size-cover py-5' style={{backgroundImage: 'url(/images/real-estate/city/dallas.jpg)'}}>
  <span className='img-overlay bg-accent opacity-60'></span>
  <div className='content-overlay fw-bold text-white text-shadow text-center py-5'>Accent overlay</div>
</div>

{/* Success overlay */}
<div className='position-relative bg-size-cover py-5' style={{backgroundImage: 'url(/images/real-estate/city/dallas.jpg)'}}>
  <span className='img-overlay bg-success opacity-60'></span>
  <div className='content-overlay fw-bold text-white text-shadow text-center py-5'>Success overlay</div>
</div>

{/* Warning overlay */}
<div className='position-relative bg-size-cover py-5' style={{backgroundImage: 'url(/images/real-estate/city/dallas.jpg)'}}>
  <span className='img-overlay bg-warning opacity-60'></span>
  <div className='content-overlay fw-bold text-white text-shadow text-center py-5'>Warning overlay</div>
</div>

{/* Danger overlay */}
<div className='position-relative bg-size-cover py-5' style={{backgroundImage: 'url(/images/real-estate/city/dallas.jpg)'}}>
  <span className='img-overlay bg-danger opacity-60'></span>
  <div className='content-overlay fw-bold text-white text-shadow text-center py-5'>Danger overlay</div>
</div>

{/* Info overlay */}
<div className='position-relative bg-size-cover py-5' style={{backgroundImage: 'url(/images/real-estate/city/dallas.jpg)'}}>
  <span className='img-overlay bg-info opacity-60'></span>
  <div className='content-overlay fw-bold text-white text-shadow text-center py-5'>Info overlay</div>
</div>

{/* Dark overlay */}
<div className='position-relative bg-size-cover py-5' style={{backgroundImage: 'url(/images/real-estate/city/dallas.jpg)'}}>
  <span className='img-overlay bg-dark opacity-60'></span>
  <div className='content-overlay fw-bold text-white text-shadow text-center py-5'>Dark overlay</div>
</div>

{/* White overlay */}
<div className='position-relative bg-size-cover py-5' style={{backgroundImage: 'url(/images/real-estate/city/dallas.jpg)'}}>
  <span className='img-overlay bg-white opacity-60'></span>
  <div className='content-overlay fw-bold text-center py-5'>White overlay</div>
</div>

{/* Gradient overlay */}
<div className='position-relative bg-size-cover py-5' style={{backgroundImage: 'url(/images/real-estate/city/dallas.jpg)'}}>
  <span className='img-overlay bg-gradient opacity-60'></span>
  <div className='content-overlay fw-bold text-white text-shadow text-center py-5'>Gradient overlay</div>
</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%
{/* Opacity classes */}
<div className='opacity-10'>Opacity 10%</div>
<div className='opacity-15'>Opacity 15%</div>
<div className='opacity-25'>Opacity 25%</div>
<div className='opacity-35'>Opacity 35%</div>
<div className='opacity-40'>Opacity 40%</div>
<div className='opacity-50'>Opacity 50%</div>
<div className='opacity-60'>Opacity 60%</div>
<div className='opacity-65'>Opacity 65%</div>
<div className='opacity-70'>Opacity 70%</div>
<div className='opacity-75'>Opacity 75%</div>
<div className='opacity-80'>Opacity 80%</div>
<div className='opacity-90'>Opacity 90%</div>
<div className='opacity-100'>Opacity 100%</div>

Text shadow

Text shadow

{/* Text shadow */}
<h2 className='text-white text-shadow'>Text shadow</h2>

Opacity transition

Opacity from 25% to 100%
Opacity from 50% to 100%
Opacity from 75% to 100%
{/* Opacity transition from 25% to 100% */}
<div className='opacity-25 opacity-transition'>...</div>

{/* Opacity transition from 50% to 100% */}
<div className='opacity-50 opacity-transition'>...</div>

{/* Opacity transition from 75% to 100% */}
<div className='opacity-75 opacity-transition'>...</div>