Logo
avatar
Ninfa Monaldo

Web Developer

  • Dashboard
  • dashboardnew
    • Ecommerce
    • Project
  • 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
  • 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 use4
    • 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

Cards

  • Ui Kits
  • Cards
Card Header
Card Body

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

<Card className="card">
  <Card.Header>
  <h5>Card Header</h5>
</Card.Header>
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below as a natural lead-in to additional content.</p>
  </Card.Body>
  
</Card>
Card Body

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

Card Footer
<Card className="card">
  
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below as a natural lead-in to additional content.</p>
  </Card.Body>
  <Card.Footer>
  <h5>Card Footer</h5>
</Card.Footer>
</Card>
Card Header

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

Card Footer
<Card className="border-0">
  <Card.Header>
  <h5>Card Header</h5>
</Card.Header>
  <Card.Body>
    <p>With supporting text below as a natural lead-in to additional content below as a natural.</p>
  </Card.Body>
  <Card.Footer>
  <h5>Card Footer</h5>
</Card.Footer>
</Card>
Hover Effect
Card Body

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

<Card className="hover-effect">
  <Card.Header>
  <h5>Hover Effect</h5>
</Card.Header>
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below lead-in to additional content below as a natural.</p>
  </Card.Body>
  
</Card>
Primary card
Card Body

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

<Card className="hover-effect card-primary">
  <Card.Header>
  <h5>Primary card</h5>
</Card.Header>
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below lead-in to additional content below as a natural.</p>
  </Card.Body>
  
</Card>
Secondary card
Card Body

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

<Card className="hover-effect card-secondary">
  <Card.Header>
  <h5>Secondary card</h5>
</Card.Header>
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below lead-in to additional content below as a natural.</p>
  </Card.Body>
  
</Card>
Success card
Card Body

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

<Card className="hover-effect card-success">
  <Card.Header>
  <h5>Success card</h5>
</Card.Header>
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below lead-in to additional content below as a natural.</p>
  </Card.Body>
  
</Card>
Danger card
Card Body

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

<Card className="hover-effect card-danger">
  <Card.Header>
  <h5>Danger card</h5>
</Card.Header>
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below lead-in to additional content below as a natural.</p>
  </Card.Body>
  
</Card>
Outline card
Card Body

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

<Card className="hover-effect card-outline-primary">
  <Card.Header>
  <h5>Outline card</h5>
</Card.Header>
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below lead-in to additional content below as a natural.</p>
  </Card.Body>
  
</Card>
Secondary
Card Body

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

<Card className="hover-effect card-outline-secondary">
  <Card.Header>
  <h5>Secondary</h5>
</Card.Header>
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below lead-in to additional content below as a natural.</p>
  </Card.Body>
  
</Card>
Secondary
Card Body

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

<Card className="hover-effect card-light-secondary">
  <Card.Header>
  <h5>Secondary</h5>
</Card.Header>
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below lead-in to additional content below as a natural.</p>
  </Card.Body>
  
</Card>
Light card
Card Body

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

<Card className="hover-effect card-light-primary">
  <Card.Header>
  <h5>Light card</h5>
</Card.Header>
  <Card.Body>
    <h6>Card Body</h6>
    <p>With supporting text below lead-in to additional content below as a natural.</p>
  </Card.Body>
  
</Card>
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
  • Sabrina Torres
  • Sabrina Torres
  • Sabrina Torres
  • Sabrina Torres
  • 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

Card Image
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.

© 2025 ki-admin. All rights reserved 💖 V1.0.0

Need Help