286 lines
23 KiB
PHP
286 lines
23 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Badges';
|
|
$subTitle = 'Components / Badges';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="row gy-4">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Default Badges</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Outline Badges</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<span class="badge text-sm fw-semibold border border-primary-600 text-primary-600 bg-transparent px-20 py-9 radius-4 text-white">Primary</span>
|
|
<span class="badge text-sm fw-semibold border border-lilac-600 text-lilac-600 bg-transparent px-20 py-9 radius-4 text-white">Secondary</span>
|
|
<span class="badge text-sm fw-semibold border border-success-600 text-success-600 bg-transparent px-20 py-9 radius-4 text-white">Success</span>
|
|
<span class="badge text-sm fw-semibold border border-info-600 text-info-600 bg-transparent px-20 py-9 radius-4 text-white">Info</span>
|
|
<span class="badge text-sm fw-semibold border border-warning-600 text-warning-600 bg-transparent px-20 py-9 radius-4 text-white">Warning</span>
|
|
<span class="badge text-sm fw-semibold border border-danger-600 text-danger-600 bg-transparent px-20 py-9 radius-4 text-white">Danger</span>
|
|
<span class="badge text-sm fw-semibold border border-neutral-800 text-neutral-800 bg-transparent px-20 py-9 radius-4 text-white">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 border border bg-transparent px-20 py-9 radius-4 text-secondary-light">Light</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Soft Badges</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<span class="badge text-sm fw-semibold text-primary-600 bg-primary-100 px-20 py-9 radius-4 text-white">Primary</span>
|
|
<span class="badge text-sm fw-semibold text-lilac-600 bg-lilac-100 px-20 py-9 radius-4 text-white">Secondary</span>
|
|
<span class="badge text-sm fw-semibold text-success-600 bg-success-100 px-20 py-9 radius-4 text-white">Success</span>
|
|
<span class="badge text-sm fw-semibold text-info-600 bg-info-100 px-20 py-9 radius-4 text-white">Info</span>
|
|
<span class="badge text-sm fw-semibold text-warning-600 bg-warning-100 px-20 py-9 radius-4 text-white">Warning</span>
|
|
<span class="badge text-sm fw-semibold text-danger-600 bg-danger-100 px-20 py-9 radius-4 text-white">Danger</span>
|
|
<span class="badge text-sm fw-semibold text-neutral-800 bg-neutral-300 px-20 py-9 radius-4 text-white">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-100 px-20 py-9 radius-4 text-secondary-light">Light</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Default Badges</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<span class="badge text-sm fw-semibold rounded-pill bg-primary-600 px-20 py-9 radius-4 text-white">Primary</span>
|
|
<span class="badge text-sm fw-semibold rounded-pill bg-lilac-600 px-20 py-9 radius-4 text-white">Secondary</span>
|
|
<span class="badge text-sm fw-semibold rounded-pill bg-success-600 px-20 py-9 radius-4 text-white">Success</span>
|
|
<span class="badge text-sm fw-semibold rounded-pill bg-info-600 px-20 py-9 radius-4 text-white">Info</span>
|
|
<span class="badge text-sm fw-semibold rounded-pill bg-warning-600 px-20 py-9 radius-4 text-white">Warning</span>
|
|
<span class="badge text-sm fw-semibold rounded-pill bg-danger-600 px-20 py-9 radius-4 text-white">Danger</span>
|
|
<span class="badge text-sm fw-semibold rounded-pill bg-neutral-800 px-20 py-9 radius-4 text-base">Dark</span>
|
|
<span class="badge text-sm fw-semibold rounded-pill bg-transparent px-20 py-9 radius-4 text-primary-600">Link</span>
|
|
<span class="badge text-sm fw-semibold rounded-pill bg-light-600 px-20 py-9 radius-4 text-dark">Light</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Gradient Badges</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<span class="badge text-sm fw-semibold bg-dark-primary-gradient px-20 py-9 radius-4 text-white">Primary</span>
|
|
<span class="badge text-sm fw-semibold bg-dark-lilac-gradient px-20 py-9 radius-4 text-white">Secondary</span>
|
|
<span class="badge text-sm fw-semibold bg-dark-success-gradient px-20 py-9 radius-4 text-white">Success</span>
|
|
<span class="badge text-sm fw-semibold bg-dark-info-gradient px-20 py-9 radius-4 text-white">Info</span>
|
|
<span class="badge text-sm fw-semibold bg-dark-warning-gradient px-20 py-9 radius-4 text-white">Warning</span>
|
|
<span class="badge text-sm fw-semibold bg-dark-danger-gradient px-20 py-9 radius-4 text-white">Danger</span>
|
|
<span class="badge text-sm fw-semibold bg-dark-dark-gradient px-20 py-9 radius-4 text-white">Dark</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Badges With Button</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<button type="button" class="badge text-sm fw-semibold bg-primary-600 px-16 py-9 radius-4 text-white d-flex align-items-center gap-2">
|
|
Primary
|
|
<span class="badge bg-white text-dark radius-5 text-xs">4</span>
|
|
</button>
|
|
<button type="button" class="badge text-sm fw-semibold bg-lilac-600 px-16 py-9 radius-4 text-white d-flex align-items-center gap-2">
|
|
Secondary
|
|
<span class="badge bg-white text-dark radius-5 text-xs">4</span>
|
|
</button>
|
|
<button type="button" class="badge text-sm fw-semibold bg-success-600 px-16 py-9 radius-4 text-white d-flex align-items-center gap-2">
|
|
Success
|
|
<span class="badge bg-white text-dark radius-5 text-xs">4</span>
|
|
</button>
|
|
<button type="button" class="badge text-sm fw-semibold bg-info-600 px-20 16-9 radius-4 text-white d-flex align-items-center gap-2">
|
|
Info
|
|
<span class="badge bg-white text-dark radius-5 text-xs">4</span>
|
|
</button>
|
|
<button type="button" class="badge text-sm fw-semibold bg-warning-600 px-16 py-9 radius-4 text-white d-flex align-items-center gap-2">
|
|
Warning
|
|
<span class="badge bg-white text-dark radius-5 text-xs">4</span>
|
|
</button>
|
|
<button type="button" class="badge text-sm fw-semibold bg-danger-600 px-16 py-9 radius-4 text-white d-flex align-items-center gap-2">
|
|
Danger
|
|
<span class="badge bg-white text-dark radius-5 text-xs">4</span>
|
|
</button>
|
|
<button type="button" class="badge text-sm fw-semibold bg-neutral-800 px-16 py-9 radius-4 text-base d-flex align-items-center gap-2">
|
|
Dark
|
|
<span class="badge bg-white text-dark radius-5 text-xs">4</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Default Badges</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle bg-primary-600 text-white">1</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle bg-lilac-600 text-white">2</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle bg-success-600 text-white">3</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle bg-warning-600 text-white">4</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle bg-danger-600 text-white">5</span>
|
|
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle text-primary-600 bg-primary-50 radius-4 text-white">1</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle text-lilac-600 bg-lilac-100 radius-4 text-white">2</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle text-success-600 bg-success-100 radius-4 text-white">3</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle text-warning-600 bg-warning-100 radius-4 text-white">4</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle text-danger-600 bg-danger-100 radius-4 text-white">5</span>
|
|
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle border border-primary-600 text-primary-600 radius-4 text-white">1</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle border border-lilac-600 text-lilac-600 radius-4 text-white">2</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle border border-success-600 text-success-600 radius-4 text-white">3</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle border border-warning-600 text-warning-600 radius-4 text-white">4</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center rounded-circle border border-danger-600 text-danger-600 radius-4 text-white">5</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Default Badges</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 bg-primary-600 text-white">1</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 bg-lilac-600 text-white">2</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 bg-success-600 text-white">3</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 bg-warning-600 text-white">4</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 bg-danger-600 text-white">5</span>
|
|
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 text-primary-600 bg-primary-50 radius-4 text-white">1</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 text-lilac-600 bg-lilac-100 radius-4 text-white">2</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 text-success-600 bg-success-100 radius-4 text-white">3</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 text-warning-600 bg-warning-100 radius-4 text-white">4</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 text-danger-600 bg-danger-100 radius-4 text-white">5</span>
|
|
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 border border-primary-600 text-primary-600 radius-4 text-white">1</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 border border-lilac-600 text-lilac-600 radius-4 text-white">2</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 border border-success-600 text-success-600 radius-4 text-white">3</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 border border-warning-600 text-warning-600 radius-4 text-white">4</span>
|
|
<span class="badge text-sm fw-semibold w-32-px h-32-px d-flex justify-content-center align-items-center radius-4 border border-danger-600 text-danger-600 radius-4 text-white">5</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Default Badges</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-4">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<button type="button" class="btn btn-primary-600 position-relative px-20 py-8 text-sm line-height-1 d-flex align-items-center">
|
|
Inbox
|
|
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary-600 border border-white">2</span>
|
|
</button>
|
|
</div>
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<button type="button" class="btn btn-warning-600 position-relative px-20 py-8 text-sm line-height-1 d-flex align-items-center">
|
|
Inbox
|
|
<span class="position-absolute top-0 end-0 translate-middle-y badge rounded-pill bg-danger-600">99+</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<button type="button" class="position-relative">
|
|
<img src="{{ asset('assets/images/lang-flag.png') }}" alt="image" class="w-32-px h-32-px object-fit-cover rounded-circle">
|
|
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger-600 border border-white">2</span>
|
|
</button>
|
|
</div>
|
|
|
|
<button class="position-relative rounded-circle d-flex justify-content-center align-items-center" type="button">
|
|
<iconify-icon icon="mage:email" class="text-primary-light text-2xxl"></iconify-icon>
|
|
<span class="position-absolute top-0 start-50 translate-middle-y badge rounded-pill bg-danger-600 border-0">2</span>
|
|
</button>
|
|
|
|
<button class="position-relative rounded-circle d-flex justify-content-center align-items-center" type="button">
|
|
<iconify-icon icon="iconoir:bell" class="text-primary-light text-2xxl"></iconify-icon>
|
|
<span class="position-absolute top-0 start-50 translate-middle-y badge rounded-pill bg-danger-600 border-0">2</span>
|
|
</button>
|
|
<button class="position-relative rounded-circle d-flex justify-content-center align-items-center" type="button">
|
|
<iconify-icon icon="iconoir:bell" class="text-primary-light text-2xxl"></iconify-icon>
|
|
<span class="position-absolute top-0 start-50 translate-middle-y rounded-pill bg-danger-600 border-0 w-8-px h-8-px"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Badge Dots Style </h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-4">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="w-8-px h-8-px bg-primary-600 rounded-circle"></span>
|
|
<span class="text-primary-600 fw-medium">Primary</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="w-8-px h-8-px bg-lilac-600 rounded-circle"></span>
|
|
<span class="text-lilac-600 fw-medium">Secondary</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="w-8-px h-8-px bg-success-600 rounded-circle"></span>
|
|
<span class="text-success-600 fw-medium">Success</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="w-8-px h-8-px bg-info-600 rounded-circle"></span>
|
|
<span class="text-info-600 fw-medium">Info</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="w-8-px h-8-px bg-warning-600 rounded-circle"></span>
|
|
<span class="text-warning-600 fw-medium">Warning</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="w-8-px h-8-px bg-danger-600 rounded-circle"></span>
|
|
<span class="text-danger-600 fw-medium">Danger</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection |