Cards
Tailwindss Cards provide a flexible and extensible content container with multiple variants and options.
Basic usage
Examples
Below is an example of a basic el-card with mixed content and a fixed width. el-cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.
Body
The building block of a el-card is the default slot. Just put content in the <el-card> component and it will be wrapped in a div with .card-body class. Use it whenever you need a padded section within a el-card.
<el-card>
This is some text within a el-card body.
</el-card>
Simple usage
<el-card>
<div class="card-header">
<h3>Card title</h3>
</div>
<div class="card-body">
<p class="break-normal text-slate-500">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est
fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut
reiciendis voluptates enim impedit veritatis officiis.
</p>
<div>
<el-button type="primary">Go somewhere</el-button>
</div>
</div>
</el-card>
Titles, text, and links
el-card titles are used by passing title prop or by using the slot="header" or by using the .card-title class.
<el-card class="items-center border-white">
<template #header>
<div class="flex justify-between">
<h3>Card title</h3>
</div>
</template>
<div class="card-body">
<p class="break-normal text-slate-500">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est
fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut
reiciendis voluptates enim impedit veritatis officiis.
</p>
<div>
<el-button type="primary">Go somewhere</el-button>
</div>
</div>
</el-card>
Advanced examples
Images
img places an image to the top of the el-card.
<el-card class="border-slate-100" :body-style="{ padding: '0px' }">
<img alt="..." src="@/assets/images/man_draw.jpg" />
<div class="px-6 pt-4 pb-8">
<div class="text-xl font-semibold pt-2 pb-1 text-card-title">
Get started with Argon
</div>
<div class="font-normal text-80 text-muted">
by John Snow on Oct 29th at 10:23 AM
</div>
<p class="text-muted py-5">
Argon is a great free UI package based on Bootstrap 4 that includes the most
important components and features.
</p>
<a href="#!" class="">
<span class="text-primary-blue hover:text-primary-blue-active text-sm font-semibold"
>View article</span
>
</a>
</div>
</el-card>
Overlay
<el-card :body-style="{ padding: '0px', position: 'relative' }">
<img alt="..." src="@/assets/images/window-purple-image.jpg" />
<div
class="card-body absolute text-white inset-y-0 left-0 flex items-center justify-center"
>
<div>
<div>
<span class="text-xl font-semibold">Card title</span>
</div>
<div>
<span class="break-normal font-light"
>This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</span
>
</div>
<div>
<span class="font-semibold">Last updated 3 mins ago</span>
</div>
</div>
</div>
</el-card>
Header and footer
Add an optional header and/or footer within a el-card with the help of footer and header slots.
<el-card class="items-center border-white">
<template #header>
<div class="flex justify-between">
<h3>Card title</h3>
<el-button class="el-button--secondary text-sky-700" size="small">Action</el-button>
</div>
</template>
<div class="card-body">
<p class="break-normal text-slate-500">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est
fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut
reiciendis voluptates enim impedit veritatis officiis.
</p>
<div>
<el-button type="primary">Go somewhere</el-button>
</div>
</div>
</el-card>
Quote el-card
<el-card :body-style="{ padding: '0px' }">
<div class="card-body text-white bg-gradient-to-r from-default to-[#1a174d]">
<div>
<h3 class="text-17 font-semimedium text-white">Testimonial</h3>
</div>
<div>
<span class="break-normal font-light"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.</span
>
</div>
<div>
<span class="font-light text-base text-danger">
<MinusIcon class="inline h-4 w-4" /> Someone famous in
<span class="italic"> Source Title</span>
</span>
</div>
</div>
</el-card>
Advanced usage
Profile
<el-card
class="text-center"
:body-style="{ padding: '0px', position: 'relative' }"
>
<img alt="..." src="@/assets/images/throne.jpg" />
<div class="justify-center">
<el-link :underline="false" class="card-avatar-profile">
<el-avatar
:size="!isHover ? 140 : 146"
@mouseover="hoverCheck(true)"
@mouseleave="hoverCheck(false)"
:src="Tywin_Lanister_Url"
class="transition-all border-white border-4"
/>
</el-link>
</div>
<div class="text-center border-0 card-header">
<div class="flex justify-between">
<div class="ml-4 z-0">
<el-button size="small" type="info">Connect</el-button>
</div>
<div class="mr-4 z-0">
<el-button size="small" type="default">Message</el-button>
</div>
</div>
</div>
<div class="mt-6">
<div class="flex justify-center gap-x-11">
<div class="block">
<div>
<span class="text-normal font-bold">22</span>
</div>
<div>
<span class="text-sm text-muted mb-0">Friends</span>
</div>
</div>
<div class="block">
<div>
<span class="text-normal font-bold">10</span>
</div>
<div>
<span class="text-sm text-muted mb-0">Photos</span>
</div>
</div>
<div class="block">
<div>
<span class="text-normal font-bold">89</span>
</div>
<div>
<span class="text-sm text-muted mb-0">Comments</span>
</div>
</div>
</div>
</div>
<div class="p-8">
<div class="text-center text-card-title">
<h3 class="font-semibold">
Tywin Lannister<span class="font-thin">, 67</span>
</h3>
<h5 class="font-light">
<el-icon :size="12">
<Location />
</el-icon>
The Castle of Trujillo, Spain
</h5>
</div>
</div>
</el-card>
Contact
<el-card>
<div class="flex flex-wrap">
<div>
<el-link :underline="false">
<el-avatar :size="70" :src="John_Snow_Url" />
</el-link>
</div>
<div class="py-2 ml-4 flex-grow">
<h4>
<el-link
:underline="false"
href="#index"
class="text-15 text-card-title font-semibold hover:text-primary-blue"
>John Snow</el-link
>
</h4>
<p class="text-sm text-muted">King of the north</p>
<span class="text-success">●</span>
<small class="text-dark-lighter">Active</small>
</div>
<div class="py-6 w-11">
<el-button type="primary" size="small">Add</el-button>
</div>
</div>
</el-card>
Team member
<el-card class="text-center border-white">
<el-link :underline="false">
<el-avatar :size="140" :src="Tyrion_Lanister_Url" />
</el-link>
<div class="pt-4">
<h4 class="mb-0 py-2">
<span class="text-17 font-semibold text-card-title">Tyrion Lannister</span>
</h4>
<h4 class="text-15 text-muted font-light mb-0">Hand of The King</h4>
</div>
<div class="flex flex-wrap items-center justify-center pt-4 gap-3">
<div>
<el-button
circle
class="w-9 h-9 bg-[#1da1f2] border-[#1da1f2] active:bg-[#33aaf3] active:border-[#33aaf3] text-white"
>
<font-awesome-icon :icon="['fab', 'twitter']" size="lg" />
</el-button>
</div>
<div>
<el-button
circle
class="w-9 h-9 bg-[#3b5999] border-[#3b5999] active:bg-[#2d4474] active:border-[#2d4474] text-white"
>
<font-awesome-icon :icon="['fab', 'facebook']" size="lg" />
</el-button>
</div>
<div>
<el-button
circle
class="w-9 h-9 bg-[#ea4c89] border-[#ea4c89] active:bg-[#ec5d94] active:border-[#ec5d94] text-white"
>
<font-awesome-icon :icon="['fab', 'dribbble']" size="lg" />
</el-button>
</div>
</div>
</el-card>
List groups
Create lists of content in a el-card with a flush list group.
<el-card :body-style="{ padding: '0px' }">
<img alt="..." src="@/assets/images/window-purple-image.jpg" />
<div
class="text-normal text-base font-normal p-4 border border-white border-b-slate-200"
>
Cras justo odio
</div>
<div
class="text-normal text-base font-normal p-4 border border-white border-b-slate-200"
>
Dapibus ac facilisis in
</div>
<div
class="text-normal text-base font-normal p-4 border border-white border-b-slate-200"
>
Vestibulum at eros
</div>
<div class="p-6">
<div class="card-header">
<h3>Card title</h3>
</div>
<div class="card-body">
<p class="break-normal text-slate-500">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est
fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut
reiciendis voluptates enim impedit veritatis officiis.
</p>
<div>
<el-button type="primary">Go somewhere</el-button>
</div>
</div>
</div>
</el-card>
Pricing
<el-card
:body-style="{ padding: '0px' }"
class="text-center bg-gradient-to-r from-[#2dce89] to-[#2dcecc]"
>
<template #header>
<h3 class="font-semibold text-white">BRAVO PACK</h3>
</template>
<div class="card-body flex flex-col items-center">
<div class="text-white text-[44px] font-semibold">$49</div>
<span class="text-white">per application</span>
<div class="table w-1/3 my-4">
<div class="table-row-group">
<div class="table-row h-16">
<div class="table-cell w-10 justify-center align-middle">
<div class="w-6 h-6 rounded-full text-slate-500 bg-white">
<font-awesome-icon :icon="['fas', 'terminal']" size="xs" />
</div>
</div>
<div class="table-cell justify-center align-middle">
<div class="pl-2">
<span class="text-sm text-white">Complete documentation</span>
</div>
</div>
</div>
<div class="table-row h-16">
<div class="table-cell w-10 justify-center align-middle">
<div class="w-6 h-6 rounded-full text-slate-500 bg-white">
<font-awesome-icon :icon="['fas', 'pen-fancy']" size="xs" />
</div>
</div>
<div class="table-cell justify-center align-middle">
<div class="pl-2">
<span class="text-sm text-white">Working materials in Sketch</span>
</div>
</div>
</div>
<div class="table-row h-16">
<div class="table-cell w-10 justify-center align-middle">
<div class="w-6 h-6 rounded-full text-slate-500 bg-white">
<font-awesome-icon :icon="['fas', 'hard-drive']" size="xs" />
</div>
</div>
<div class="table-cell justify-center align-middle">
<div class="pl-2">
<span class="text-sm text-white">2GB cloud storage</span>
</div>
</div>
</div>
</div>
</div>
<div>
<el-button type="primary" size="lg" class="w-32 font-semibold text-normal"
>Start free trial</el-button
>
</div>
</div>
<el-divider class="border-slate-800 py-5" />
<el-link
:underline="false"
class="text-white text-base font-normal hover:text-slate-200"
>Request a demo</el-link
>
</el-card>
Stats card
<div>
<el-card
:body-style="{ 'padding-top': '16px', 'padding-bottom': '16px' }"
>
<div class="flex flex-wrap">
<div class="basis-0 grow">
<div class="card-header">
<h5 class="font-semibold text-0.8125 text-muted">TOTAL TRAFFIC</h5>
</div>
<h2 class="text-xl text-default font-semibold leading-7.5">350,897</h2>
</div>
<div
class="w-12 h-12 text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#f5365c] to-[#f56036]"
>
<font-awesome-icon :icon="['fas', 'hand-point-up']" size="lg" />
</div>
</div>
<div class="pt-4">
<p class="text-sm">
<span class="text-success mr-2 inline">
<ArrowUpIcon class="inline h-5 w-4"/>
3.48%
</span>
<span class="whitespace-nowrap text-normal">Since last month</span>
</p>
</div>
</el-card>
<el-card
:body-style="{ 'padding-top': '16px', 'padding-bottom': '16px' }"
>
<div class="flex flex-wrap">
<div class="basis-0 grow">
<div class="card-header">
<h5 class="font-semibold text-0.8125 text-muted mb-0">NEW USERS</h5>
</div>
<h2 class="text-xl text-default font-semibold mb-0 leading-7.5">2,356</h2>
</div>
<div
class="w-12 h-12 text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#fb6340] to-[#fbb140]"
>
<font-awesome-icon :icon="['fas', 'chart-pie']" size="lg" />
</div>
</div>
<div class="pt-4">
<p class="text-sm">
<span class="text-success mr-2 inline">
<ArrowUpIcon class="inline h-5 w-4" aria-hidden="true" />
3.48%
</span>
<span class="whitespace-nowrap text-normal">Since last month</span>
</p>
</div>
</el-card>
<el-card
:body-style="{ 'padding-top': '16px', 'padding-bottom': '16px' }"
>
<div class="flex flex-wrap">
<div class="basis-0 grow">
<div class="card-header">
<h5 class="font-semibold text-0.8125 text-muted mb-0">SALES</h5>
</div>
<h2 class="text-xl text-default font-semibold mb-0 leading-7.5">924</h2>
</div>
<div
class="w-12 h-12 text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#2dce89] to-[#2dcecc]"
>
<font-awesome-icon :icon="['fas', 'coins']" size="lg" />
</div>
</div>
<div class="pt-4">
<p class="text-sm">
<span class="text-success mr-2 inline">
<ArrowUpIcon class="inline h-5 w-4" aria-hidden="true" />
3.48%
</span>
<span class="whitespace-nowrap text-normal">Since last month</span>
</p>
</div>
</el-card>
<el-card
:body-style="{ 'padding-top': '16px', 'padding-bottom': '16px' }"
>
<div class="flex flex-wrap">
<div class="basis-0 grow">
<div class="card-header">
<h5 class="font-semibold text-0.8125 text-muted mb-0">PERFORMANCE</h5>
</div>
<h2 class="text-xl text-default font-semibold mb-0 leading-7.5">49,65%</h2>
</div>
<div
class="w-12 h-12 text-center inline-flex items-center justify-center rounded-full text-white bg-gradient-to-r from-[#11cdef] to-[#1171ef]"
>
<font-awesome-icon :icon="['fas', 'chart-simple']" size="lg" />
</div>
</div>
<div class="pt-4">
<p class="text-sm">
<span class="text-success mr-2 inline">
<ArrowUpIcon class="inline h-5 w-4" aria-hidden="true" />
3.48%
</span>
<span class="whitespace-nowrap text-normal">Since last month</span>
</p>
</div>
</el-card>
</div>