Basic Components
Buttons
<button type="button" class="btn btn-primary-600 radius-8 px-20 py-11">Primary</button>
<button type="button" class="btn btn-lilac-600 radius-8 px-20 py-11">Secondary</button>
<button type="button" class="btn btn-success-600 radius-8 px-20 py-11">Success</button>
<button type="button" class="btn btn-info-600 radius-8 px-20 py-11">Info</button>
<button type="button" class="btn btn-warning-600 radius-8 px-20 py-11">Warning</button>
<button type="button" class="btn btn-danger-600 radius-8 px-20 py-11">Danger</button>
<button type="button" class="btn btn-neutral-900 text-base radius-8 px-20 py-11">Dark</button>
<button type="button" class="btn btn-link text-secondary-light text-decoration-none radius-8 px-20 py-11">Link</button>
<button type="button" class="btn btn-light-100 text-dark radius-8 px-20 py-11">Light</button>
Dropdown
<div class="dropdown">
<button class="btn btn-primary-600 not-active px-18 py-11 dropdown-toggle toggle-icon" type="button"
data-bs-toggle="dropdown" aria-expanded="false"> Default Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-outline-primary-600 not-active px-18 py-11 dropdown-toggle toggle-icon" type="button"
data-bs-toggle="dropdown" aria-expanded="false"> Outline Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
<div class="dropdown">
<button
class="btn btn-primary-600 bg-primary-50 border-primary-50 text-primary-600 hover-text-primary not-active px-18 py-11 dropdown-toggle toggle-icon"
type="button" data-bs-toggle="dropdown" aria-expanded="false"> Focus Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn text-primary-600 hover-text-primary px-18 py-11 dropdown-toggle toggle-icon" type="button"
data-bs-toggle="dropdown" aria-expanded="false"> Focus Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Primary action</a></li>
<li><a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
href="#">Something else</a></li>
</ul>
</div>
Alerts
This is a Primary alert
This is a Secondary alert
This is a Warning alert
This is a Info alert
This is a Danger alert
<div class="alert alert-primary bg-primary-50 text-primary-600 border-primary-50 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Primary alert
<button class="remove-button text-primary-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div class="alert alert-lilac bg-lilac-50 text-lilac-600 border-lilac-50 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Secondary alert
<button class="remove-button text-lilac-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div class="alert alert-warning bg-warning-100 text-warning-600 border-warning-100 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Warning alert
<button class="remove-button text-warning-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div class="alert alert-info bg-info-100 text-info-600 border-info-100 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Info alert
<button class="remove-button text-info-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
<div
class="alert alert-danger bg-danger-100 text-danger-600 border-danger-100 px-24 py-11 mb-0 fw-semibold text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
This is a Danger alert
<button class="remove-button text-danger-600 text-xxl line-height-1"> <iconify-icon icon="iconamoon:sign-times-light" class="icon"></iconify-icon></button>
</div>
Badges
Primary
Secondary
Success
Info
Warning
Danger
Dark
Link
Light
<span class="badge text-sm fw-semibold bg-primary-600 px-20 py-9 radius-4 text-white">Primary</span>
<span class="badge text-sm fw-semibold bg-lilac-600 px-20 py-9 radius-4 text-white">Secondary</span>
<span class="badge text-sm fw-semibold bg-success-600 px-20 py-9 radius-4 text-white">Success</span>
<span class="badge text-sm fw-semibold bg-info-600 px-20 py-9 radius-4 text-white">Info</span>
<span class="badge text-sm fw-semibold bg-warning-600 px-20 py-9 radius-4 text-white">Warning</span>
<span class="badge text-sm fw-semibold bg-danger-600 px-20 py-9 radius-4 text-white">Danger</span>
<span class="badge text-sm fw-semibold bg-neutral-800 px-20 py-9 radius-4 text-base">Dark</span>
<span class="badge text-sm fw-semibold bg-transparent px-20 py-9 radius-4 text-primary-600">Link</span>
<span class="badge text-sm fw-semibold bg-light-600 px-20 py-9 radius-4 text-dark">Light</span>
Tooltip & Popover
<button type="button" class="btn btn-primary-50 text-primary-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-primary"
data-bs-title="Primary Tooltip">
Primary
</button>
<button type="button" class="btn btn-lilac-100 text-lilac-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-purple"
data-bs-title="Secondary Tooltip">
Secondary
</button>
<button type="button" class="btn btn-success-100 text-success-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-success"
data-bs-title="Success Tooltip">
Success
</button>
<button type="button" class="btn btn-info-100 text-info-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-info"
data-bs-title="Info Tooltip">
Info
</button>
<button type="button" class="btn btn-warning-100 text-warning-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-warning"
data-bs-title="Warning Tooltip">
Warning
</button>
<button type="button" class="btn btn-danger-100 text-danger-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-danger"
data-bs-title="Danger Tooltip">
Danger
</button>
<button type="button" class="btn btn-neutral-100 text-neutral-600 radius-8 px-32 py-11"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
data-bs-title="Dark Tooltip">
Dark
</button>
JavaScript
// Boxed Tooltip
$(document).ready(function() {
$('.tooltip-button').each(function () {
var tooltipButton = $(this);
var tooltipContent = $(this).siblings('.my-tooltip').html();
// Initialize the tooltip
tooltipButton.tooltip({
title: tooltipContent,
trigger: 'hover',
html: true
});
// Optionally, reinitialize the tooltip if the content might change dynamically
tooltipButton.on('mouseenter', function() {
tooltipButton.tooltip('dispose').tooltip({
title: tooltipContent,
trigger: 'hover',
html: true
}).tooltip('show');
});
});
});
Tabs
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
<ul class="nav bordered-tab border border-top-0 border-start-0 border-end-0 d-inline-flex nav-pills mb-16"
id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10 active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"
type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-details-tab" data-bs-toggle="pill" data-bs-target="#pills-details"
type="button" role="tab" aria-controls="pills-details" aria-selected="false">Details</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-16 py-10" id="pills-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-settings"
type="button" role="tab" aria-controls="pills-settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
<div class="tab-pane fade" id="pills-details" role="tabpanel" aria-labelledby="pills-details-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
<div class="tab-pane fade" id="pills-settings" role="tabpanel" aria-labelledby="pills-settings-tab" tabindex="0">
<div>
<h6 class="text-lg mb-8">Title</h6>
<p class="text-secondary-light mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not </p>
<p class="text-secondary-light mb-0">It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop</p>
</div>
</div>
</div>