Custom Finder CSS classes with a purpose to reduce the frequency of highly repetitive declarations.
{/* 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 */}
<div className='bg-gradient'>...</div>
{/* 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 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 */}
<h2 className='text-white text-shadow'>Text shadow</h2>
{/* 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>