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
Info faded background
Success faded background
Warning faded background
Danger faded background
Dark faded background
<!-- Primary faded background -->
<div class="bg-faded-primary">...</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
| ...
// 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
| ...
Background shapes
Slant bottom right
Slant bottom left
Slant top right
Slant top left
Curve bottom center
Curve top center
Curve bottom right
Curve bottom left
Curve top right
Curve top left
<!-- Slant bottom right -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="cs-shape cs-shape-bottom cs-shape-slant bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
<polygon fill="currentColor" points="0,257 0,260 3000,260 3000,0"></polygon>
</svg>
</div>
</div>
<!-- Slant bottom left -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="cs-shape cs-shape-bottom cs-shape-slant bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
<polygon fill="currentColor" points="0,0 0,260 3000,260 3000,255"></polygon>
</svg>
</div>
</div>
<!-- Slant top right -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="cs-shape cs-shape-top cs-shape-slant bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
<polygon fill="currentColor" points="0,0 0,2.4 3000,260 3000,0"></polygon>
</svg>
</div>
</div>
<!-- Slant top left -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="cs-shape cs-shape-top cs-shape-slant bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
<polygon fill="currentColor" points="0,0 0,260 3000,2.9 3000,0"></polygon>
</svg>
</div>
</div>
<!-- Curve bottom center -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="cs-shape cs-shape-bottom cs-shape-curve bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 185.4">
<path fill="currentColor" d="M3000,0v185.4H0V0c496.4,115.6,996.4,173.4,1500,173.4S2503.6,115.6,3000,0z"></path>
</svg>
</div>
</div>
<!-- Curve top center -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="cs-shape cs-shape-top cs-shape-curve bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 185.4">
<path fill="currentColor" d="M3000,185.4V0H0v185.4C496.4,69.8,996.4,12,1500,12S2503.6,69.8,3000,185.4z"></path>
</svg>
</div>
</div>
<!-- Curve bottom right -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="cs-shape cs-shape-bottom cs-shape-curve-side bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
<path fill="currentColor" d="M3000,0v250H0v-51c572.7,34.3,1125.3,34.3,1657.8,0C2190.3,164.8,2637.7,98.4,3000,0z"></path>
</svg>
</div>
</div>
<!-- Curve bottom left -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="cs-shape cs-shape-bottom cs-shape-curve-side bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
<path fill="currentColor" d="M0,0l0,250h3000v-51c-572.7,34.3-1125.3,34.3-1657.8,0C809.7,164.8,362.3,98.4,0,0z"></path>
</svg>
</div>
</div>
<!-- Curve top right -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="cs-shape cs-shape-top cs-shape-curve-side bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
<path fill="currentColor" d="M3000,250V0H0v51c572.7-34.3,1125.3-34.3,1657.8,0C2190.3,85.2,2637.7,151.6,3000,250z"></path>
</svg>
</div>
</div>
<!-- Curve top left -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="cs-shape cs-shape-top cs-shape-curve-side bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
<path fill="currentColor" d="M0,250L0,0l3000,0v51c-572.7-34.3-1125.3-34.3-1657.8,0C809.7,85.2,362.3,151.6,0,250z"></path>
</svg>
</div>
</div>
<!-- Curve right -->
<div class="bg-dark position-relative py-7">
<div class="bg-overlay-content">
<!-- Content goes here -->
</div>
<div class="cs-shape cs-shape-right bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.4 2500">
<path fill="currentColor" d="M228.4,0v2500H0c134.9-413.7,202.4-830.4,202.4-1250S134.9,413.7,0,0H228.4z"></path>
</svg>
</div>
</div>
<!-- Curve left -->
<div class="bg-dark position-relative py-7">
<div class="bg-overlay-content">
<!-- Content goes here -->
</div>
<div class="cs-shape cs-shape-left bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.4 2500">
<path fill="currentColor" d="M0,0l0,2500h228.4C93.5,2086.3,26.1,1669.6,26.1,1250S93.5,413.7,228.4,0L0,0z"></path>
</svg>
</div>
</div>// Slant bottom right
.bg-dark.position-relative.py-7
//- Content goes here
.cs-shape.cs-shape-bottom.cs-shape-slant.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 260")
polygon(fill="currentColor", points="0,257 0,260 3000,260 3000,0")
// Slant bottom left
.bg-dark.position-relative.py-7
//- Content goes here
.cs-shape.cs-shape-bottom.cs-shape-slant.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 260")
polygon(fill="currentColor", points="0,0 0,260 3000,260 3000,255")
// Slant top right
.bg-dark.position-relative.py-7
//- Content goes here
.cs-shape.cs-shape-top.cs-shape-slant.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 260")
polygon(fill="currentColor", points="0,0 0,2.4 3000,260 3000,0")
// Slant top left
.bg-dark.position-relative.py-7
//- Content goes here
.cs-shape.cs-shape-top.cs-shape-slant.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 260")
polygon(fill="currentColor", points="0,0 0,260 3000,2.9 3000,0")
// Curve bottom center
.bg-dark.position-relative.py-7
//- Content goes here
.cs-shape.cs-shape-bottom.cs-shape-curve.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 185.4")
path(fill="currentColor", d="M3000,0v185.4H0V0c496.4,115.6,996.4,173.4,1500,173.4S2503.6,115.6,3000,0z")
// Curve top center
.bg-dark.position-relative.py-7
//- Content goes here
.cs-shape.cs-shape-top.cs-shape-curve.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 185.4")
path(fill="currentColor", d="M3000,185.4V0H0v185.4C496.4,69.8,996.4,12,1500,12S2503.6,69.8,3000,185.4z")
// Curve bottom right
.bg-dark.position-relative.py-7
//- Content goes here
.cs-shape.cs-shape-bottom.cs-shape-curve-side.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 250")
path(fill="currentColor", d="M3000,0v250H0v-51c572.7,34.3,1125.3,34.3,1657.8,0C2190.3,164.8,2637.7,98.4,3000,0z")
// Curve bottom left
.bg-dark.position-relative.py-7
//- Content goes here
.cs-shape.cs-shape-bottom.cs-shape-curve-side.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 250")
path(fill="currentColor", d="M0,0l0,250h3000v-51c-572.7,34.3-1125.3,34.3-1657.8,0C809.7,164.8,362.3,98.4,0,0z")
// Curve top right
.bg-dark.position-relative.py-7
//- Content goes here
.cs-shape.cs-shape-top.cs-shape-curve-side.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 250")
path(fill="currentColor", d="M3000,250V0H0v51c572.7-34.3,1125.3-34.3,1657.8,0C2190.3,85.2,2637.7,151.6,3000,250z")
// Curve top left
.bg-dark.position-relative.py-7
//- Content goes here
.cs-shape.cs-shape-top.cs-shape-curve-side.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 250")
path(fill="currentColor", d="M0,250L0,0l3000,0v51c-572.7-34.3-1125.3-34.3-1657.8,0C809.7,85.2,362.3,151.6,0,250z")
// Curve right
.bg-dark.position-relative.py-7
.bg-overlay-content
//- Content goes here
.cs-shape.cs-shape-right.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 228.4 2500")
path(fill="currentColor", d="M228.4,0v2500H0c134.9-413.7,202.4-830.4,202.4-1250S134.9,413.7,0,0H228.4z")
// Curve left
.bg-dark.position-relative.py-7
.bg-overlay-content
//- Content goes here
.cs-shape.cs-shape-left.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 228.4 2500")
path(fill="currentColor", d="M0,0l0,2500h228.4C93.5,2086.3,26.1,1669.6,26.1,1250S93.5,413.7,228.4,0L0,0z")
Background cover with overlay
<!-- Background cover with overlay -->
<div class="bg-size-cover position-relative py-7" style="background-image: url(path-to-background-image);">
<span class="bg-overlay bg-gradient" style="opacity: .75;"></span>
<div class="bg-overlay-content">
<!-- Content goes here -->
</div>
</div>// Background cover with overlay
.bg-size-cover.position-relative.py-7(style="background-image: url(path-to-background-image);")
span.bg-overlay.bg-gradient(style="opacity: .75;")
.bg-overlay-content
//- Content goes here
Opacity
Opacity 25%Opacity 50%Opacity 60%Opacity 70%Opacity 75%Opacity 80%Opacity 90%Opacity 100%
<!-- Opacity -->
<div class="opacity-25"></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-25
.opacity-50
.opacity-60
.opacity-70
.opacity-75
.opacity-80
.opacity-90
.opacity-100
Image swap on hover
<!-- Image swap on hover -->
<a href="#" class="cs-swap-image">
<img src="path-to-image" class="cs-swap-to" width="176" alt="Alt text">
<img src="path-to-image" class="cs-swap-from" width="176" alt="Alt text">
</a>// Image swap on hover
a(href="#").cs-swap-image
+image("path-to-image", "Alt text")(width="176").cs-swap-to
+image("path-to-image", "Alt text")(width="176").cs-swap-from
Fancy link
<!-- Default fancy link -->
<a href="#" class="cs-fancy-link">I'm a fancy link</a>
<!-- Light fancy link -->
<a href="#" class="cs-fancy-link text-light">Light fancy link</a>// Default fancy link
a(href="#").cs-fancy-link
| I'm a fancy link
// Light fancy link
a(href="#").cs-fancy-link.text-light
| Light fancy link