Component Library
Browse and explore components
Cards
A Card is a UI component used to group related information and actions within a contained, visually distinct box.
Component Code
Copy Code
import { Card } from 'flowbite-react'
const DefaultCardCode = () => {
return (
<>
<div>
<Card href='#' className='max-w-sm'>
<h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white'>
Noteworthy technology acquisitions
</h5>
<p className='font-normal'>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using more-or-less normal
distribution of letters, as opposed to using more-or-less normal
distribution of letters
</p>
</Card>
</div>
</>
)
}
export default DefaultCardCode
Card With CTA Button
Noteworthy technology acquisitions
Here are the biggest enterprise technology acquisitions of 2024 so far, in reverse chronological order.It is a long established fact that a reader will be distracted by the readable content of a page.
Component Code
Copy Code
import { Card, Button } from 'flowbite-react'
const CTACardButtonCode = () => {
return (
<>
<div>
<Card className='max-w-sm'>
<h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white'>
Noteworthy technology acquisitions
</h5>
<p className='font-normal pb-[0.625rem]'>
Here are the biggest enterprise technology acquisitions of 2024 so
far, in reverse chronological order.It is a long established fact
that a reader will be distracted by the readable content of a page.
</p>
<Button color='primary' className='w-fit'>
Read more
<svg
className='-mr-1 ml-2 h-4 w-4'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path
fillRule='evenodd'
d='M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z'
clipRule='evenodd'
/>
</svg>
</Button>
</Card>
</div>
</>
)
}
export default CTACardButtonCode
Card With Image
Noteworthy technology acquisitions
Here are the biggest enterprise technology acquisitions of 2024 so far, in reverse chronological order.
Component Code
Copy Code
import { Card } from 'flowbite-react'
const CardWithImageCode = () => {
return (
<>
<div>
<Card
className='max-w-sm'
imgAlt='Meaningful alt text for an image that is not purely decorative'
imgSrc='/images/blog/blog-img2.jpg'>
<h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white pt-3'>
Noteworthy technology acquisitions
</h5>
<p className='font-normal'>
Here are the biggest enterprise technology acquisitions of 2024 so
far, in reverse chronological order.
</p>
</Card>
</div>
</>
)
}
export default CardWithImageCode
Image Render Function
Noteworthy technology acquisitions
Here are the biggest enterprise technology acquisitions of 2024 so far, in reverse chronological order.
Component Code
Copy Code
import { Card } from 'flowbite-react'
const CustomImageREnderCode = () => {
return (
<>
<div>
<Card
className='max-w-sm'
renderImage={() => (
<img
width={300}
height={200}
src='/images/blog/blog-img2.jpg'
alt='image 1'
/>
)}>
<h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white pt-4'>
Noteworthy technology acquisitions
</h5>
<p className='font-normal'>
Here are the biggest enterprise technology acquisitions of 2024 so
far, in reverse chronological order.
</p>
</Card>
</div>
</>
)
}
export default CustomImageREnderCode
Horizontal Card
Noteworthy technology acquisitions
Here are the biggest enterprise technology acquisitions of 2024 so far, in reverse chronological order.
Noteworthy technology acquisitions
Here are the biggest enterprise technology acquisitions of 2024 so far, in reverse chronological order.
Component Code
Copy Code
import { Card } from 'flowbite-react'
const HorizontalCardCode = () => {
return (
<>
<div className='grid grid-cols-12 gap-5 sm:gap-7'>
<div className='lg:col-span-6 col-span-12'>
<Card
className='max-w-sm'
imgSrc='/images/blog/blog-img3.jpg'
horizontal>
<h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white p-4'>
Noteworthy technology acquisitions
</h5>
<p className='font-normal pl-4'>
Here are the biggest enterprise technology acquisitions of 2024 so
far, in reverse chronological order.
</p>
</Card>
</div>
<div className='lg:col-span-6 col-span-12'>
<Card
className='max-w-sm'
imgSrc='/images/blog/blog-img4.jpg'
horizontal>
<h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white p-4'>
Noteworthy technology acquisitions
</h5>
<p className='font-normal pl-4'>
Here are the biggest enterprise technology acquisitions of 2024 so
far, in reverse chronological order.
</p>
</Card>
</div>
</div>
</>
)
}
export default HorizontalCardCode
User Profile Card
Component Code
Copy Code
import { Card, Dropdown, DropdownItem } from 'flowbite-react'
const UserProfileCardCode = () => {
return (
<div>
<div>
<Card className='max-w-sm'>
<div className='flex justify-end px-4'>
<Dropdown label='' inline className='cursor-pointer'>
<DropdownItem>
<a
href='#'
className='block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white'>
Edit
</a>
</DropdownItem>
<DropdownItem>
<a
href='#'
className='block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white'>
Export Data
</a>
</DropdownItem>
<DropdownItem>
<a
href='#'
className='block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:text-red-600 dark:hover:bg-gray-600 dark:hover:text-white'>
Delete
</a>
</DropdownItem>
</Dropdown>
</div>
<div className='flex flex-col items-center'>
<img
alt='Bonnie image'
height={96}
src='/images/profile/user-3.jpg'
width={96}
className='mb-3 rounded-full shadow-lg'
/>
<h5 className='mb-1 text-xl font-medium text-gray-900 dark:text-white'>
Bonnie Green
</h5>
<span className='text-sm text-gray-500 dark:text-gray-400'>
Visual Designer
</span>
<div className='mt-4 flex space-x-3 lg:mt-6'>
<a
href='#'
className='inline-flex items-center rounded-lg bg-primary px-4 py-2 text-center text-sm font-medium text-white focus:outline-hidden dark:bg-primary dark:hover:bg-primaryemphasis'>
Add friend
</a>
<a
href='#'
className='inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-hidden focus:ring-0 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-700'>
Message
</a>
</div>
</div>
</Card>
</div>
</div>
)
}
export default UserProfileCardCode
Card With Form
Component Code
Copy Code
import { Card, Label, TextInput, Checkbox, Button } from 'flowbite-react'
const CardWithFormCode = () => {
return (
<div>
<Card className='max-w-sm'>
<form className='flex flex-col gap-4'>
<div>
<div className='mb-2 block'>
<Label htmlFor='email1'>Your email</Label>
</div>
<TextInput
id='email1'
type='email'
placeholder='info@matdash.com'
className='!form-control'
required
/>
</div>
<div>
<div className='mb-2 block'>
<Label htmlFor='password1'>Your password</Label>
</div>
<TextInput
id='password1'
type='password'
className='!form-control'
required
/>
</div>
<div className='flex items-center gap-2'>
<Checkbox id='remember' className='checkbox' />
<Label htmlFor='remember'>Remember me</Label>
</div>
<Button type='submit' color='primary' className='w-fit px-10'>
Submit
</Button>
</form>
</Card>
</div>
)
}
export default CardWithFormCode
Card With List
Latest Customers
View all
Neil Sims
email@windster.com
$320
Bonnie Green
email@windster.com
$3467
Michael Gough
email@windster.com
$67
Lana Byrd
email@windster.com
$367
Thomes Lean
email@windster.com
$2367
Thomes Alia
email@windster.com
$1267
Component Code
Copy Code
import { Card } from 'flowbite-react'
import Image from 'next/image'
const CardWithListCode = () => {
return (
<div>
<Card className='max-w-sm'>
<div className='mb-4 flex items-center justify-between'>
<h5 className='text-xl font-bold leading-none text-gray-900 dark:text-white'>
Latest Customers
</h5>
<a
href='#'
className='text-sm font-medium text-primary hover:underline dark:text-primary'>
View all
</a>
</div>
<div className='flow-root'>
<ul className='divide-y divide-gray-200 dark:divide-gray-700'>
<li className='py-3 sm:py-4'>
<div className='flex items-center space-x-4'>
<div className='shrink-0'>
<Image
alt='Neil image'
height='32'
src='/images/profile/user-2.jpg'
width='32'
className='rounded-full'
/>
</div>
<div className='min-w-0 flex-1'>
<p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
Neil Sims
</p>
<p className='truncate text-sm text-gray-500 dark:text-gray-400'>
email@windster.com
</p>
</div>
<div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
$320
</div>
</div>
</li>
<li className='py-3 sm:py-4'>
<div className='flex items-center space-x-4'>
<div className='shrink-0'>
<Image
alt='Bonnie image'
height='32'
src='/images/profile/user-3.jpg'
width='32'
className='rounded-full'
/>
</div>
<div className='min-w-0 flex-1'>
<p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
Bonnie Green
</p>
<p className='truncate text-sm text-gray-500 dark:text-gray-400'>
email@windster.com
</p>
</div>
<div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
$3467
</div>
</div>
</li>
<li className='py-3 sm:py-4'>
<div className='flex items-center space-x-4'>
<div className='shrink-0'>
<Image
alt='Michael image'
height='32'
src='/images/profile/user-4.jpg'
width='32'
className='rounded-full'
/>
</div>
<div className='min-w-0 flex-1'>
<p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
Michael Gough
</p>
<p className='truncate text-sm text-gray-500 dark:text-gray-400'>
email@windster.com
</p>
</div>
<div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
$67
</div>
</div>
</li>
<li className='py-3 sm:py-4'>
<div className='flex items-center space-x-4'>
<div className='shrink-0'>
<Image
alt='Lana image'
height='32'
src='/images/profile/user-5.jpg'
width='32'
className='rounded-full'
/>
</div>
<div className='min-w-0 flex-1'>
<p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
Lana Byrd
</p>
<p className='truncate text-sm text-gray-500 dark:text-gray-400'>
email@windster.com
</p>
</div>
<div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
$367
</div>
</div>
</li>
<li className='py-3 sm:py-4'>
<div className='flex items-center space-x-4'>
<div className='shrink-0'>
<Image
alt='Thomas image'
height='32'
src='/images/profile/user-6.jpg'
width='32'
className='rounded-full'
/>
</div>
<div className='min-w-0 flex-1'>
<p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
Thomes Lean
</p>
<p className='truncate text-sm text-gray-500 dark:text-gray-400'>
email@windster.com
</p>
</div>
<div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
$2367
</div>
</div>
</li>
<li className='py-3 sm:py-4'>
<div className='flex items-center space-x-4'>
<div className='shrink-0'>
<Image
alt='Thomas image'
height='32'
src='/images/profile/user-7.jpg'
width='32'
className='rounded-full'
/>
</div>
<div className='min-w-0 flex-1'>
<p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
Thomes Alia
</p>
<p className='truncate text-sm text-gray-500 dark:text-gray-400'>
email@windster.com
</p>
</div>
<div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
$1267
</div>
</div>
</li>
</ul>
</div>
</Card>
</div>
)
}
export default CardWithListCode
Pricing Card
Standard plan
$49/month
- 2 team members
- 20GB Cloud storage
- Integration help
- Sketch Files
- API Access
- Complete documentation
- 24×7 phone & email support
Component Code
Copy Code
import { Card } from 'flowbite-react'
const PricingCardCode = () => {
return (
<div>
<Card className='max-w-sm'>
<h5 className='mb-4 text-xl font-medium text-gray-500 dark:text-gray-400'>
Standard plan
</h5>
<div className='flex items-baseline text-gray-900 dark:text-white'>
<span className='text-3xl font-semibold'>$</span>
<span className='text-5xl font-extrabold tracking-tight'>49</span>
<span className='ml-1 text-xl font-normal text-gray-500 dark:text-gray-400'>
/month
</span>
</div>
<ul className='my-7 space-y-5'>
<li className='flex space-x-3'>
<svg
className='h-5 w-5 shrink-0 text-primary dark:text-primary'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path
fillRule='evenodd'
d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
clipRule='evenodd'
/>
</svg>
<span className='text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
2 team members
</span>
</li>
<li className='flex space-x-3'>
<svg
className='h-5 w-5 shrink-0 text-primary dark:text-primary'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path
fillRule='evenodd'
d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
clipRule='evenodd'
/>
</svg>
<span className='text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
20GB Cloud storage
</span>
</li>
<li className='flex space-x-3'>
<svg
className='h-5 w-5 shrink-0 text-primary dark:text-primary'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path
fillRule='evenodd'
d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
clipRule='evenodd'
/>
</svg>
<span className='text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
Integration help
</span>
</li>
<li className='flex space-x-3 line-through decoration-gray-500'>
<svg
className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path
fillRule='evenodd'
d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
clipRule='evenodd'
/>
</svg>
<span className='text-base font-normal leading-tight text-gray-500'>
Sketch Files
</span>
</li>
<li className='flex space-x-3 line-through decoration-gray-500'>
<svg
className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path
fillRule='evenodd'
d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
clipRule='evenodd'
/>
</svg>
<span className='text-base font-normal leading-tight text-gray-500'>
API Access
</span>
</li>
<li className='flex space-x-3 line-through decoration-gray-500'>
<svg
className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path
fillRule='evenodd'
d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
clipRule='evenodd'
/>
</svg>
<span className='text-base font-normal leading-tight text-gray-500'>
Complete documentation
</span>
</li>
<li className='flex space-x-3 line-through decoration-gray-500'>
<svg
className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path
fillRule='evenodd'
d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
clipRule='evenodd'
/>
</svg>
<span className='text-base font-normal leading-tight text-gray-500'>
24×7 phone & email support
</span>
</li>
</ul>
<button
type='button'
className='inline-flex w-full justify-center rounded-lg bg-primary px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primary focus:outline-none focus:ring-0 focus:ring-cyan-200 dark:focus:ring-cyan-900 hover:cursor-pointer'>
Choose plan
</button>
</Card>
</div>
)
}
export default PricingCardCode
E-commerce card
Component Code
Copy Code
import { Card } from 'flowbite-react'
const EcommerceCardCode = () => {
return (
<>
<Card
imgAlt='Apple Watch Series 7 in colors pink, silver, and black'
imgSrc='/images/products/s1.jpg'
className='max-w-sm'>
<a href='#'>
<h5 className='text-xl font-semibold tracking-tight text-gray-900 dark:text-white pt-2'>
The Ultimate Aluminium Case in Starlight Sport
</h5>
</a>
<div className='mb-5 mt-2.5 flex items-center'>
<svg
className='h-5 w-5 text-warning'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' />
</svg>
<svg
className='h-5 w-5 text-warning'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' />
</svg>
<svg
className='h-5 w-5 text-warning'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' />
</svg>
<svg
className='h-5 w-5 text-warning'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' />
</svg>
<svg
className='h-5 w-5 text-warning'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'>
<path d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' />
</svg>
<span className='ml-3 mr-2 rounded bg-cyan-100 px-2.5 py-0.5 text-xs font-semibold text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800'>
5.0
</span>
</div>
<div className='flex items-center justify-between mb-2'>
<span className='text-3xl font-bold text-gray-900 dark:text-white'>
$599
</span>
<a
href='#'
className='rounded-lg bg-primary px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primaryemphasis focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-primary dark:hover:bg-primaryemphasis dark:focus:ring-cyan-800'>
Add to cart
</a>
</div>
</Card>
</>
)
}
export default EcommerceCardCode
CTA card
Work fast from anywhere
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web It is a long 'lorem ipsum' will uncover many web It is a long
Component Code
Copy Code
import { Card } from 'flowbite-react'
const ActionCardCode = () => {
return (
<>
<Card className='max-w-lg'>
<h5 className='mb-2 text-3xl font-bold text-gray-900 dark:text-white'>
Work fast from anywhere
</h5>
<p className='mb-5 text-base text-gray-500 dark:text-gray-400 sm:text-lg'>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content here', making it
look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web It is a long
established fact that a reader will be distracted by the readable
content of a page when looking at its layout. Many desktop publishing
packages and web page editors now use Lorem Ipsum as their default
model text, and a search for 'lorem ipsum' will uncover many web It is
a long 'lorem ipsum' will uncover many web It is a long
</p>
<div className='items-center justify-center space-y-4 sm:flex sm:space-x-4 sm:space-y-0 pb-6'>
<a
href='#'
className='inline-flex w-full items-center justify-center rounded-lg bg-gray-800 px-4 py-2.5 text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 sm:w-auto'>
<svg
className='mr-3 h-7 w-7'
aria-hidden='true'
focusable='false'
data-prefix='fab'
data-icon='apple'
role='img'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 384 512'>
<path
fill='currentColor'
d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'
/>
</svg>
<div className='text-left'>
<div className='mb-1 text-xs'>Download on the</div>
<div className='-mt-1 font-sans text-sm font-semibold'>
Mac App Store
</div>
</div>
</a>
<a
href='#'
className='inline-flex w-full items-center justify-center rounded-lg bg-gray-800 px-4 py-2.5 text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 sm:w-auto'>
<svg
className='mr-3 h-7 w-7'
aria-hidden='true'
focusable='false'
data-prefix='fab'
data-icon='google-play'
role='img'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'>
<path
fill='currentColor'
d='M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z'
/>
</svg>
<div className='text-left'>
<div className='mb-1 text-xs'>Get in on</div>
<div className='-mt-1 font-sans text-sm font-semibold'>
Google Play
</div>
</div>
</a>
</div>
</Card>
</>
)
}
export default ActionCardCode
API ( Card )
| Prop | Description | Type | Default |
|---|---|---|---|
href | Specifies the URL to navigate to when the card is clicked. | string | null |
imgAlt | Provides alternative text for the image, improving accessibility. | string | null |
imgSrc | Specifies the source URL of the image to be displayed in the card. | string | null |
renderImage | Allows custom rendering of the image component. If provided, `imgSrc` and `imgAlt` are ignored. | () => <Image width={500} height={500} src="/images/blog/image-1.jpg" alt="image 1" /> | null |
horizontal | Displays the card in a horizontal layout, placing the image beside the content. | boolean | false |