#
  • Dashboard
  • dashboard4
    • Project
    • Ecommerce
  • apps
    • Calendar
    • Profile Page
      • Profile
      • Setting
    • Projects Page
      • Projects
      • Projects Details
    • To-Do
    • Team
    • Api
    • Ticket
      • Ticket
      • Ticket Details
    • Emails Page
      • Email
      • Read Email
    • E-shop
      • Cart
      • Product
      • Add Product
      • Product-Details
      • Product list
      • Orders
      • Orders Details
      • Orders List
      • Checkout
      • Wishlist
    • Invoice
    • Chat
    • File Manager
    • Bookmark
    • kanban board
    • Timeline
    • FAQ
    • Pricing
    • Gallery
    • Blog Page
      • Blog
      • Blog Details
      • Add Blog
  • Widgets
  • Component
  • Ui Kits
    • Alert
    • Badges
    • Buttons
    • Cards
    • Dropdown
    • Grid
    • Avatar
    • Tabs
    • Accordions
    • Progress
    • Notifications
    • Lists
    • Helper Classes
    • Background
    • Divider
    • Ribbons
    • Editor
    • Collapse
    • Shadow
    • Wrapper
    • Bullet
    • Placeholder
    • Alignment Things
  • Advanced UI12+
    • Modals
    • OffCanvas Toggle
    • Sweet Alert
    • Scrollbar
    • Spinners
    • Animation
    • Video Embed
    • Tour
    • Slider
    • Bootstrap Slider
    • Scrollpy
    • Tooltip & Popovers
    • Rating
    • Prismjs
    • Count Down
    • Count Up
    • Draggable
    • Tree View
  • Icons
    • Fontawesome
    • Flag
    • Tabler
    • Weather
    • Animated
    • Iconoir
    • Phosphor
  • Misc
  • Map & Charts
  • Map & Charts
    • Google Maps
    • Leaflet map
  • Chart
    • Chart js
    • Apexcharts
      • Line
      • Area
      • Column
      • Bar
      • Mixed
      • Timeline & Range-Bars
      • Candlestick
      • Boxplot
      • Bubble
      • Scatter
      • Heatmap
      • Treemap
      • Pie
      • Radial bar
      • Radar
  • Table & forms
  • Table
    • Basic Table
    • Data Table
    • List Js
    • Advance Table
  • Forms elements
    • Form Validation
    • Base Input
    • Checkbox & Radio
    • Input Groups
    • Input Masks
    • Floating Labels
    • Datetimepicker
    • Touch spin
    • Select2
    • Switch
    • Range Slider
    • Typeahead
    • Textarea
    • Clipboard
    • File Upload
    • Dual List Boxes
    • Default Forms
  • Ready to usenew
    • Form Wizards
    • Form Wizards 1
    • Form Wizards 2
    • Ready To Use Form
    • Ready To Use Tables
  • Pages
  • Auth Pages
    • Sign In
    • Sign In with Bg-image
    • Sign Up
    • Sign Up with Bg-image
    • Password Reset
    • Password Reset with Bg-image
    • Password Create
    • Password Create with Bg-image
    • Lock Screen
    • Lock Screen with Bg-image
    • Two Step Verification
    • Two Step Verification with Bg-image
  • Error pages
    • Bad Request
    • Forbidden
    • Not Found
    • Internal Server Error
    • Service Unavailable
  • Other pages
    • Blank
    • Maintenance
    • Landing Pages
    • Coming Soon
    • Sitemap
    • Privacy Policy
    • Terms & Conditions
  • Others
  • 2 level
    • Blank
    • Another level
      • Blank
  • Document
  • Support
  • 26 °C
  • EN
  • 5
  • avatar

  • Copyright © 2025 axelit. All rights reserved 💖

  • V1.0.0
  • Need Help

Cards

  • Ui Kits
  • Cards
Card Header
Card Body

With supporting text below as a natural lead-in to additional content.

<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Card Body

With supporting text below as a natural lead-in to additional content.

Card Footer
<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Card Header

With supporting text below as a natural lead-in to additional content below as a natural.

Card Footer
<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Hover Effect
Card Body

With supporting text below lead-in to additional content below as a natural.

<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Primary card

With supporting text below lead-in to additional content below as a natural.

<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Secondary card

With supporting text below lead-in to additional content below as a natural.

<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Success card

With supporting text below lead-in to additional content below as a natural.

<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Danger card

With supporting text below lead-in to additional content below as a natural.

<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Outline card

With supporting text below lead-in to additional content below as a natural.

<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Secondary

With supporting text below lead-in to additional content below as a natural.

<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Light card

With supporting text below lead-in to additional content below as a natural.

<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Secondary

With supporting text below lead-in to additional content below as a natural.

<div class="card-body">
  <h6>Card body</h6>
  <p>...</p>
</div>
Card With icon

With supporting text below lead-in to additional content below as a natural.

Card With icon

With supporting text below lead-in to additional content below as a natural.

Card With icon

With supporting text below lead-in to additional content below as a natural.

Card With icon

With supporting text below lead-in to additional content below as a natural.

Card With Top border

With supporting text below lead-in to additional content below as a natural.

With supporting text below lead-in to additional content below as a natural.

Card With Bottom border

With supporting text below lead-in to additional content below as a natural.

Card With left border

With supporting text below lead-in to additional content below as a natural.

Card With right border
...
Card Title

This is a wider card with supporting text below as a natural lead-in to.

Last updated 3 min's ago

Card Title

This is a wider card with supporting text below as a natural lead-in to additional This content.

Last updated 3 min's ago

...
My Profile

I am a keen, hard working, reliable and excellent time keeper. I am a bright and receptive person

60 likes
  • 5+
Featured
  • An item
  • A second item
  • A third item
  • A Fourth item
...
Card Title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 min's ago

  • Description
  • How It Works
  • Drawbacks

The idea is to use :target pseudo class to show tabs, use anchors with fragment identifiers to switch between them.

  1. Show only the last tab.
  2. If :target matches a tab, show it and hide all following siblings.
  3. Matches a tab, show it and hide all following siblings.

The idea is to use :target pseudo class to show tabs, use anchors with fragment identifiers to switch between them.

Card Title

This is a wider card with supporting text with supporting little bit longer below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 min's ago

...
  • Features
  • History
  • Reviews

The idea is to use :target pseudo class to show tabs, use anchors with fragment identifiers to switch between them.

  1. Show only the last tab.
  2. If :target matches a tab, show it and hide all following siblings.
  3. Matches a tab, show it and hide all following siblings.

The idea is to use :target pseudo class to show tabs, use anchors with fragment identifiers to switch between them.