Framework
Theme
All
683
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
Cards - All Examples
Discover 70 Cards examples available in Loopple
Card Stats Dark
Component from
Chakra UI Dashboard
Builder
<Card data-type='Card'
overflow='hidden'
variant='outline'
bg="blackAlpha.900"
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel' color="white">Visits</StatLabel>
<StatNumber data-type='StatNumber' color="white">345,670</StatNumber>
<StatHelpText data-type='StatHelpText' color="white">
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
23.36%
</StatHelpText>
</Stat>
</CardBody>
</Card>Card Post
Component from
Chakra UI Dashboard
Builder
<Card data-type='Card' maxW='md'>
<CardHeader data-type='CardHeader'>
<Flex data-type='Flex' spacing='4'>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Avatar data-type='Avatar' name='Segun Adebayo' src='https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NzF8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60'></Avatar>
<Box data-type='Box'>
<Heading data-type='Heading' size='sm'>Aloïs Pierre</Heading>
<Text data-type='Text'>Creator of Studio 23</Text>
</Box>
</Flex>
</Flex>
</CardHeader>
<CardBody data-type='CardBody'>
<Text data-type='Text'>
With Chakra UI, I wanted to sync the speed of development with the speed
of design. I wanted the developer to be just as excited as the designer to
create a screen.
</Text>
</CardBody>
<Image data-type='Image'
objectFit='cover'
src='https://images.unsplash.com/photo-1546815670-5c5e437ffc6d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c3RhcmJ1Y2tzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60'
alt='Starbucks'
></Image>
<CardFooter data-type='CardFooter'
justify='space-between'
flexWrap='wrap'
>
<Button data-type='Button' mr='2' flex='1' leftIcon='{<ChatIcon/>}'>
Comment
</Button>
<Button data-type='Button' flex='1' leftIcon='{<LinkIcon/>}'>
Share
</Button>
</CardFooter>
</Card>Card Profile
Component from
Adminkit
Builder
<div class="card draggable mb-3">
<div class="card-header">
<h5 class="card-title mb-0">Profile Details</h5>
</div>
<div class="card-body text-center">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128" height="128">
<h5 class="card-title mb-0">Christina Mason</h5>
<div class="text-muted mb-2">Lead Developer</div>
<div>
<a class="btn btn-primary btn-sm" href="#">Follow</a>
<a class="btn btn-primary btn-sm" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg> Message </a>
</div>
</div>
<hr class="my-0">
<div class="card-body">
<h5 class="h6 card-title">Skills</h5>
<a href="#" class="badge bg-primary me-1 my-1">HTML</a>
<a href="#" class="badge bg-primary me-1 my-1">JavaScript</a>
<a href="#" class="badge bg-primary me-1 my-1">Sass</a>
<a href="#" class="badge bg-primary me-1 my-1">Angular</a>
<a href="#" class="badge bg-primary me-1 my-1">Vue</a>
<a href="#" class="badge bg-primary me-1 my-1">React</a>
<a href="#" class="badge bg-primary me-1 my-1">Redux</a>
<a href="#" class="badge bg-primary me-1 my-1">UI</a>
<a href="#" class="badge bg-primary me-1 my-1">UX</a>
</div>
<hr class="my-0">
<div class="card-body">
<h5 class="h6 card-title">About</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home feather-sm me-1">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg> Lives in <a href="#">San Francisco, SA</a>
</li>
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase feather-sm me-1">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
</svg> Works at <a href="#">GitHub</a>
</li>
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin feather-sm me-1">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg> From <a href="#">Boston</a>
</li>
</ul>
</div>
</div>Card Horizontal
Component from
Chakra UI Dashboard
Builder
<Card data-type='Card'
direction={{base:'column',sm:'row'}}
overflow='hidden'
variant='outline'
>
<Image data-type='Image'
objectFit='cover'
maxW={{base:'100%',sm:'200px'}}
src='https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60'
alt='Caffe Latte'
/>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md'>The perfect latte</Heading>
<Text data-type='Text' py='2'>
Caffè latte is a coffee beverage of Italian origin made with espresso
and steamed milk.
</Text>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' colorScheme='blue'>
Buy Latte
</Button>
</CardFooter>
</Stack>
</Card>Card Storage
Component from
Horizon UI Dashboard
Builder
<div data-type='div' className="!z-5 relative flex flex-col rounded-[20px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:shadow-none w-full h-full p-4 draggable">
<div data-type='div' className="mb-auto flex flex-col items-center justify-center">
<div data-type='div' className="mt-2 flex items-center justify-center rounded-full bg-lightPrimary p-[26px] text-5xl font-bold text-brand-500 dark:!bg-navy-700 dark:text-white">
<BsCloudCheck data-type='BsCloudCheck' />
</div>
<h4 data-type='h4' className="mb-px mt-3 text-2xl font-bold text-navy-700 dark:text-white">
Your storage
</h4>
<p data-type='p' className="px-5 text-center text-base font-normal text-gray-600 md:!px-0 xl:!px-8">
Supervise your drive space in the easiest way
</p>
</div>
<div data-type='div' className="flex flex-col">
<div data-type='div' className="flex justify-between">
<p data-type='p' className="text-sm font-medium text-gray-600">25.6 GB</p>
<p data-type='p' className="text-sm font-medium text-gray-600">50 GB</p>
</div>
<div data-type='div' className="mt-2 flex h-3 w-full items-center rounded-full bg-lightPrimary dark:!bg-navy-700">
<span data-type='span' className="h-full w-1/2 rounded-full bg-brand-500 dark:!bg-white" />
</div>
</div>
</div>Card Carousel
Component from
Asteria Dashboard
Builder
<div class="card min-height-300 h-100 draggable">
<div class="overflow-hidden position-relative border-radius-lg min-height-300 h-100">
<div class="card-body position-relative z-index-1 d-flex flex-column min-height-300 h-100 p-0">
<div id="carouselImageSlide" class="carousel slide min-height-300 h-100" data-bs-ride="carousel">
<div class="carousel-inner min-height-300 h-100">
<div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1514894780887-121968d00567?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1746&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Go slow until you win</h5>
<p class="text-white text-sm mb-0">Remote work starts with eliminating commutes and cubicles.</p>
</div>
</div>
<div class="carousel-item min-height-300 h-100 bg-cover active" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1489710437720-ebb67ec84dd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Work with the rockets</h5>
<p class="text-white text-sm mb-0">Wealth creation is an evolutionarily recent positive-sum game.</p>
</div>
</div>
<div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2064&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Books don’t need an audience.</h5>
<p class="text-white text-sm mb-0">Set and enforce an aspirational hourly rate.</p>
</div>
</div>
</div>
<button class="carousel-control-prev ms-auto end-8 w-5" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="prev">
<span class="carousel-control-prev-icon position-absolute top-4 right-10" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next w-5 end-3" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="next">
<span class="carousel-control-next-icon position-absolute top-4 right-10 text-sm" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>Card Stat
Component from
Asteria Dashboard
Builder
<div class="card mb-4 draggable">
<div class="card-body p-3">
<div class="row">
<div class="col-8">
<div class="numbers">
<p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Today's Money</p>
<div class="d-flex align-items-center my-2">
<span class="badge bg-success-soft text-xxs">
<i class="fas fa-angle-up text-success" aria-hidden="true"></i>
</span>
<span class="text-xs font-weight-bolder ms-1">+55%</span>
</div>
<h4 class="font-weight-bolder mb-0">
$53,000
</h4>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
<i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>Card Social
Component from
Riva Dashboard Tailwind
Builder
<div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable">
<!-- card body -->
<div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
<div class="m-0">
<img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/twitter.svg" alt="Logo Twitter">
</div>
<div class="flex flex-col my-7">
<h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">1.3k</h3>
<div class="m-0">
<span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
</div>
</div>
<span class="text-center align-baseline inline-flex px-2 py-1 mr-auto items-center font-semibold text-base/none text-success bg-success-light rounded-lg border border-success">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
</svg> 12% </span>
</div>
<!-- end card body -->
</div>Card Task
Component from
Horizon UI Dashboard
Builder
<div data-type=”div” className="flex flex-col justify-center items-center h-[100vh] draggable">
<div data-type=”div” className="!z-5 relative flex flex-col rounded-[20px] max-w-[200px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 flex flex-col w-full !p-4 3xl:p-![18px] bg-white">
<div data-type=”div” className="relative flex flex-row justify-between">
<div data-type=”div” className="flex items-center">
<div data-type=”div” className="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-100 dark:bg-white/5">
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-brand-500 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” fill="none" d="M0 0h24v24H0z">
</path>
<path data-type=”path” d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z">
</path>
</svg>
</div>
<h4 data-type=”h4” className="ml-4 text-xl font-bold text-navy-700 dark:text-white">
Tasks
</h4>
</div>
<div data-type=”div” className="relative flex">
<div data-type=”div” className="flex">
<button data-type=”button” className="flex items-center text-xl hover:cursor-pointer bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10 linear justify-center rounded-md font-bold transition duration-200">
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 16 16" className="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z">
</path>
</svg>
</button>
</div>
<div data-type=”div” className="top-11 right-0 w-max absolute z-10 origin-top-right transition-all duration-300 ease-in-out scale-0">
<div data-type=”div” className="z-50 w-max rounded-md bg-white px-4 py-3 text-sm shadow-xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
<p data-type=”p” className="hover:text-black flex cursor-pointer items-center gap-2 text-gray-600 hover:font-medium">
<span data-type=”span”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z">
</path>
</svg>
</span>
Panel 1
</p>
<p data-type=”p” className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
<span data-type=”span”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” d="M882 272.1V144c0-17.7-14.3-32-32-32H174c-17.7 0-32 14.3-32 32v128.1c-16.7 1-30 14.9-30 31.9v131.7a177 177 0 0 0 14.4 70.4c4.3 10.2 9.6 19.8 15.6 28.9v345c0 17.6 14.3 32 32 32h676c17.7 0 32-14.3 32-32V535a175 175 0 0 0 15.6-28.9c9.5-22.3 14.4-46 14.4-70.4V304c0-17-13.3-30.9-30-31.9zM214 184h596v88H214v-88zm362 656.1H448V736h128v104.1zm234 0H640V704c0-17.7-14.3-32-32-32H416c-17.7 0-32 14.3-32 32v136.1H214V597.9c2.9 1.4 5.9 2.8 9 4 22.3 9.4 46 14.1 70.4 14.1s48-4.7 70.4-14.1c13.8-5.8 26.8-13.2 38.7-22.1.2-.1.4-.1.6 0a180.4 180.4 0 0 0 38.7 22.1c22.3 9.4 46 14.1 70.4 14.1 24.4 0 48-4.7 70.4-14.1 13.8-5.8 26.8-13.2 38.7-22.1.2-.1.4-.1.6 0a180.4 180.4 0 0 0 38.7 22.1c22.3 9.4 46 14.1 70.4 14.1 24.4 0 48-4.7 70.4-14.1 3-1.3 6-2.6 9-4v242.2zm30-404.4c0 59.8-49 108.3-109.3 108.3-40.8 0-76.4-22.1-95.2-54.9-2.9-5-8.1-8.1-13.9-8.1h-.6c-5.7 0-11 3.1-13.9 8.1A109.24 109.24 0 0 1 512 544c-40.7 0-76.2-22-95-54.7-3-5.1-8.4-8.3-14.3-8.3s-11.4 3.2-14.3 8.3a109.63 109.63 0 0 1-95.1 54.7C233 544 184 495.5 184 435.7v-91.2c0-.3.2-.5.5-.5h655c.3 0 .5.2.5.5v91.2z">
</path>
</svg>
</span>
Panel 2
</p>
<p data-type=”p” className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
<span data-type=”span”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} version="1.2" baseProfile="tiny" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<g data-type=”g”>
<path data-type=”path” d="M12.5 5.5c-.276 0-.5.224-.5.5s.224.5.5.5c1.083 0 1.964.881 1.964 1.964 0 .276.224.5.5.5s.5-.224.5-.5c0-1.634-1.33-2.964-2.964-2.964zM12.5 1c-4.136 0-7.5 3.364-7.5 7.5 0 1.486.44 2.922 1.274 4.165l.08.135c1.825 2.606 2.146 3.43 2.146 4.2v3c0 .552.448 1 1 1h2c0 .26.11.52.29.71.19.18.45.29.71.29.26 0 .52-.11.71-.29.18-.19.29-.45.29-.71h2c.552 0 1-.448 1-1v-3c0-.782.319-1.61 2.132-4.199.895-1.275 1.368-2.762 1.368-4.301 0-4.136-3.364-7.5-7.5-7.5zm2 18h-4v-1h4v1zm2.495-7.347c-1.466 2.093-2.143 3.289-2.385 4.347h-1.11v-2c0-.552-.448-1-1-1s-1 .448-1 1v2h-1.113c-.24-1.03-.898-2.2-2.306-4.22l-.077-.129c-.657-.934-1.004-2.024-1.004-3.151 0-3.033 2.467-5.5 5.5-5.5s5.5 2.467 5.5 5.5c0 1.126-.347 2.216-1.005 3.153z">
</path>
</g>
</svg>
</span>
Panel 3
</p>
<p data-type=”p” className="hover:text-black mt-2 flex cursor-pointer items-center gap-2 pt-1 text-gray-600 hover:font-medium">
<span data-type=”span”>
<svg data-type=”svg” stroke="currentColor" fill="none" strokeWidth={2} viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<circle data-type=”circle” cx={12} cy={12} r={3}>
</circle>
<path data-type=”path” d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
</path>
</svg>
</span>
Panel 4
</p>
</div>
</div>
</div>
</div>
<div data-type=”div” className="h-full w-full">
<div data-type=”div” className="mt-5 flex items-center justify-between p-2">
<div data-type=”div” className="flex items-center justify-center gap-2">
<input data-type=”input” type="checkbox" className="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400 undefined" name="weekly" />
<p data-type=”p” className="text-base font-bold text-navy-700 dark:text-white">
Landing Page Design
</p>
</div>
<div data-type=”div”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-navy-700 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type='path' fill="none" d="M0 0h24v24H0V0z">
</path>
<path data-type=”path” d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
</div>
</div>
<div data-type=”div” className="mt-2 flex items-center justify-between p-2">
<div data-type=”div” className="flex items-center justify-center gap-2">
<input data-type=”input” type="checkbox" className="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400 undefined" name="weekly" />
<p data-type=”p” className="text-base font-bold text-navy-700 dark:text-white">
Mobile App Design
</p>
</div>
<div data-type='div'>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-navy-700 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” fill="none" d="M0 0h24v24H0V0z">
</path>
<path data-type=”path” d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
</div>
</div>
<div data-type=”div” className="mt-2 flex items-center justify-between p-2">
<div data-type=”div” className="flex items-center justify-center gap-2">
<input data-type=”input” type="checkbox" className="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400 undefined" name="weekly" />
<p data-type=”p” className="text-base font-bold text-navy-700 dark:text-white">
Dashboard Builder
</p>
</div>
<div data-type=”div”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-navy-700 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type='path' fill="none" d="M0 0h24v24H0V0z">
</path>
<path data-type=”path” d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
</div>
</div>
<div data-type=”div” className="mt-2 flex items-center justify-between p-2">
<div data-type=”div” className="flex items-center justify-center gap-2">
<input data-type=”input” type="checkbox" className="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400 undefined" name="weekly" />
<p data-type=”p” className="text-base font-bold text-navy-700 dark:text-white">
Landing Page Design
</p>
</div>
<div data-type=”div”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-navy-700 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type=”path” fill="none" d="M0 0h24v24H0V0z">
</path>
<path data-type=”path” d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
</div>
</div>
<div data-type=”div” className="mt-2 flex items-center justify-between p-2">
<div data-type=”div” className="flex items-center justify-center gap-2">
<input data-type=”input” type="checkbox" className="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400 undefined" name="weekly" />
<p data-type=”p” className="text-base font-bold text-navy-700 dark:text-white">
Dashboard Builder
</p>
</div>
<div data-type=”div”>
<svg data-type=”svg” stroke="currentColor" fill="currentColor" strokeWidth={0} viewBox="0 0 24 24" className="h-6 w-6 text-navy-700 dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path data-type='path' fill="none" d="M0 0h24v24H0V0z">
</path>
<path data-type=”path” d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
</path>
</svg>
</div>
</div>
</div>
</div>
</div>Card Image
Component from
Soft UI Dashboard
Builder
<div class="card h-100 p-3 draggable">
<div class="overflow-hidden position-relative border-radius-lg bg-cover h-100" style="background-image: url(https://demos.creative-tim.com/soft-ui-dashboard/assets/img/ivancik.jpg);">
<span class="mask bg-gradient-dark"></span>
<div class="card-body position-relative z-index-1 d-flex flex-column h-100 p-3">
<h5 class="text-white font-weight-bolder mb-4 pt-2">Work with the rockets</h5>
<p class="text-white">Wealth creation is an evolutionarily recent positive-sum game. It is all about who take the opportunity first.</p>
<a class="text-white text-sm font-weight-bold mb-0 icon-move-right mt-auto" href="javascript:;">
Read More
<i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
</a>
</div>
</div>
</div>