Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard AdminKit Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Motion Landing Library React Riva Dashboard Tailwind Soft UI Design System Argon Dashboard Soft UI Dashboard Tailwind
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

Component from Argon Dashboard Builder 
<div class="card card-stats draggable">
  <div class="card-body">
    <div class="row">
      <div class="col">
        <h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
        <span class="h2 font-weight-bold mb-0">2,356</span>
      </div>
      <div class="col-auto">
        <div class="icon icon-shape bg-orange text-white rounded-circle shadow">
          <i class="fa fa-chart-pie"></i>
        </div>
      </div>
    </div>
    <p class="mt-3 mb-0 text-sm">
      <span class="text-success mr-2">
        <i class="fa fa-arrow-up"></i> 3.48% </span>
      <span class="text-nowrap">Since last month</span>
    </p>
  </div>
</div>

Card With Divider

Component from Chakra UI Dashboard Builder 
<Card data-type='Card'>
  <CardHeader data-type='CardHeader'>
    <Heading data-type='Heading' size='md'>Client Report</Heading>
  </CardHeader>

  <CardBody data-type='CardBody'>
    <Stack data-type='Stack' spacing='4'>
      <Box data-type='Box'>
        <Heading data-type='Heading' size='xs' textTransform='uppercase'>
          Summary
        </Heading>
        <Text data-type='Text' pt='2' fontSize='sm'>
          View a summary of all your clients over the last month.
        </Text>
      </Box>
      <Divider data-type='Divider' orientation='horizontal'></Divider>
      <Box data-type='Box'>
        <Heading data-type='Heading' size='xs' textTransform='uppercase'>
          Overview
        </Heading>
        <Text data-type='Text' pt='2' fontSize='sm'>
          Check out the overview of your clients.
        </Text>
      </Box>
      <Divider data-type='Divider' orientation='horizontal'></Divider>
      <Box data-type='Box'>
        <Heading data-type='Heading' size='xs' textTransform='uppercase'>
          Analysis
        </Heading>
        <Text data-type='Text' pt='2' fontSize='sm'>
          See a detailed analysis of all your business clients.
        </Text>
      </Box>
    </Stack>
  </CardBody>
</Card>

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 Vertical

Component from Chakra UI Dashboard Builder 
<Card data-type='Card' overflow="hidden" variant="outline">
                    <Image data-type='Image' alt="Caffe Latte" src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib" objectFit="cover" maxW='100%'>
                    </Image>
                    <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' type="button" variant="solid" colorScheme="blue">
                                Buy Latte
                            </Button>
                        </CardFooter>
                    </Stack>
                </Card>

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>

Card Image

Component from Adminkit Builder 
<div class="card draggable" style="width: 18rem;">
  <img src="https://demo-basic.adminkit.io/img/photos/unsplash-1.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card#&39;s content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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 Informations

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-3">
     <div data-type='div' className="mt-2 mb-8 w-full">
       <h4 data-type='h4' className="px-2 text-xl font-bold text-navy-700 dark:text-white">General Information</h4>
        <p data-type='p' className="mt-2 px-2 text-base text-gray-600">As we live, our hearts turn colder. Cause pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand. We get our heart broken by people we love, even that we give them all...</p>
      </div>
     <div data-type='div' className="grid grid-cols-2 gap-4 px-2">
       <div data-type='div' className="flex flex-col items-start justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
          <p data-type='p' className="text-sm text-gray-600">Education</p>
          <p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">Stanford University</p>
        </div>
       <div data-type='div' className="flex flex-col justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
          <p data-type='p' className="text-sm text-gray-600">Languages</p>
          <p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">English, Spanish, Italian</p>
        </div>
       <div data-type='div' className="flex flex-col items-start justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
          <p data-type='p' className="text-sm text-gray-600">Department</p>
          <p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">Product Design</p>
        </div>
       <div data-type='div' className="flex flex-col justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
          <p data-type='p' className="text-sm text-gray-600">Work History</p>
          <p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">English, Spanish, Italian</p>
        </div>
       <div data-type='div' className="flex flex-col items-start justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
          <p data-type='p' className="text-sm text-gray-600">Organization</p>
          <p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">Simmmple Web LLC</p>
        </div>
       <div data-type='div' className="flex flex-col justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
          <p data-type='p' className="text-sm text-gray-600">Birthday</p>
          <p data-type='p' className="text-base font-medium text-navy-700 dark:text-white">20 July 1986</p>
        </div>
      </div>
    </div>

Profile Card

Component from Horizon UI Dashboard Builder 
<div data-type=”div” className="flex flex-col justify-center items-center w-full h-[100vh] draggable">
  <div data-type=”div” className="relative flex flex-col items-center rounded-[20px] w-full mx-auto p-4 bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:!shadow-none">
    <div data-type=”div” className="relative flex h-32 w-full justify-center rounded-xl bg-cover">
      <img data-type=”img” src="https://horizon-tailwind-react-git-tailwind-components-horizon-ui.vercel.app/static/media/banner.ef572d78f29b0fee0a09.png" className="absolute flex h-32 w-full justify-center rounded-xl bg-cover" /> 
      <div data-type=”div” className="absolute -bottom-12 flex h-[87px] w-[87px] items-center justify-center rounded-full border-[4px] border-white bg-pink-400 dark:!border-navy-700">
        <img data-type=”img” className="h-full w-full rounded-full" src="https://horizon-tailwind-react-git-tailwind-components-horizon-ui.vercel.app/static/media/avatar11.1060b63041fdffa5f8ef.png" alt="" />
      </div>
    </div> 
    <div data-type=”div” className="mt-16 flex flex-col items-center">
      <h4 data-type=”h4” className="text-xl font-bold text-navy-700 dark:text-white">
        Adela Parkson
      </h4>
      <p data-type=”p” className="text-base font-normal text-gray-600">Product Manager</p>
    </div> 
    <div data-type=”div” className="mt-6 mb-3 flex gap-5">
      <div data-type=”div” className="flex flex-col items-center justify-center">
        <p data-type=”p” className="text-2xl font-bold text-navy-700 dark:text-white">17</p>
        <p data-type=”p” className="text-sm font-normal text-gray-600">Posts</p>
      </div>
      <div data-type=”div” className="flex flex-col items-center justify-center">
        <p data-type=”p” className="text-2xl font-bold text-navy-700 dark:text-white">
          9.7K
        </p>
        <p data-type=”p” className="text-sm font-normal text-gray-600">Followers</p>
      </div>
      <div data-type=”div” className="flex flex-col items-center justify-center">
        <p data-type=”p” className="text-2xl font-bold text-navy-700 dark:text-white">
          434
        </p>
        <p data-type=”p” className="text-sm font-normal text-gray-600">Following</p>
      </div>
    </div>
  </div>
</div>

Card Exchange

Component from Argon Dashboard Builder