Styleguide | UI Elements | Whimsy - SaaS Website Template

Base UI

List Group

Social Media Shared

Instagram

2,1k
Twitter

2,7k
Facebook

1,2k
Youtube

3,2k
Linkedin

0,9k
Dribbble

3,0k
Tiktok

1,2k

Activity

Hosain Alfathir commented on your blog Design inspiration#23
10 mins ago
Mardigu Gunawarman commented on your blog How to be a millioner in a year.
10 mins ago
Nero Pandero commented on your blog Design trend in 2023
10 mins ago
Margaret commented on your blog Design inspiration#26
10 mins ago

Transactions

Product sold #12490
Paypal

+180.00 USD
Refund
Transfer

+82.2 USD
Product sold #12491
Credit Card

-20.6 USD
Product sold #12494
Credit Card

-78.6 USD
Send money
Wallet

-90.88 USD
Monthly bonus
Wallet

+23.6 USD

Sales by Countries

Monthly Sales Overview

$8,567k
2.1%

United states of america

884k
$8,567k
6.2%

Germany

645k
$8,567k
11.9%

Australia

148k
$8,567k
25.8%

France

86k
$8,567kk
12.4%

China

42k

Pages Session

/Portfolio
30% 1h 30m
/Homepage
20% 0h 30m
/About us
20% 1h 15m
/Portfolio/Logo de...
17% 1h 00m
/Portfolio/Marvelic...
8% 1h 00m
/Contact us
5% 0h 45m

To do list

Design a social media ads
- Action 1
- Action 2
Monthly Meeting
- Action 1
- Action 2
Analyze Data for Amaz project
- Action 1
- Action 2
Social Media Post
- Action 1
- Action 2
New Company Website
- Action 1
- Action 2
Icon set for sale
- Action 1
- Action 2

View all user

Active Users

Sonya Stoltenberg sonya@gmail.com
Theresa Swaniawski theresa@gmail.com
Johanna Hand johanna@gmail.com
Bobby Okuneva bobby@gmail.com
Shawn Herzog shawn@gmail.com

View all user

Trending now

Artificial Intelligence
1,208 posts
- Action 1
- Action 2
Tesla
890 posts
- Action 1
- Action 2
International Design Day
730 posts
- Action 1
- Action 2
Presidential election
890 posts
- Action 1
- Action 2
2024
890 posts
- Action 1
- Action 2

Suggested for you

Sonya Stoltenberg sonya@gmail.com
Follow
Theresa Swaniawski theresa@gmail.com
Follow
Johanna Hand johanna@gmail.com
Follow
Bobby Okuneva bobby@gmail.com
Follow
Shawn Herzog shawn@gmail.com
Follow

See all

Recent Activity

You sold an item

Paul Sances just purchased

Curology product set

8 min ago
Audrey Monterey

Send you message "Are you there?"

14 hours ago
Order #12489 from September

Invoices have been paid to the company

invoices.pdf

Tuesday
Order #12490 from September

Invoices have been paid to the company

Friday

Documentation

Starter Kit Codes

Starter Kit Code

<div class="card">
	<div class="card-header">
		<h5 class="card-title">Social Media Shared</h5>

		<div class="card-header-actions">
			<div class="btn-group card-action-dots">
				<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
					<i class="ic ic-three-dots"></i>
				</button>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="javascript:void()">Action 1</a></li>
					<li><a class="dropdown-item" href="javascript:void()">Action 2</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="card-body py-3">

		<ul class="list-group">

			{% for item in [
				{
					'icon'		: 'ic-instagram',
					'name'		: 'Instagram',
					'value'		: '2,1k',
					'progress'		: '80',
					'trendIcon'	: 'ic-arrow-up',
				},
				{
					'icon'		: 'ic-X',
					'name'		: 'Twitter',
					'value'		: '2,7k',
					'progress'		: '30',
					'trendIcon'	: 'ic-arrow-up',
				},
				{
					'icon'		: 'ic-facebook',
					'name'		: 'Facebook',
					'value'		: '1,2k',
					'progress'		: '50',
					'trendIcon'	: 'ic-arrow-down',
				},
				{
					'icon'		: 'ic-youtube',
					'name'		: 'Youtube',
					'value'		: '3,2k',
					'progress'		: '10',
					'trendIcon'	: 'ic-arrow-down',
				},
				{
					'icon'		: 'ic-linkedin',
					'name'		: 'Linkedin',
					'value'		: '0,9k',
					'progress'		: '60',
					'trendIcon'	: 'ic-arrow-up',
				},
				{
					'icon'		: 'ic-dribbble',
					'name'		: 'Dribbble',
					'value'		: '3,0k',
					'progress'		: '70',
					'trendIcon'	: 'ic-arrow-up',
				},
				{
					'icon'		: 'ic-tiktok',
					'name'		: 'Tiktok',
					'value'		: '1,2k',
					'progress'		: '30',
					'trendIcon'	: 'ic-arrow-down',
				},
			] %}
				<li class="list-group-item list-group-item-py-12px">
					<div class="d-flex align-items-center">
						<i class="ic {{ item.icon }} color"></i>
						<strong class="ms-2">{{ item.name }}</strong>
						<div class="d-flex align-items-center ms-auto">											
							<div class="progress me-1" style="width: 90px;">
								<div class="progress-bar bg-brand-primary-1" role="progressbar" style="width: {{ item.progress }}%" aria-valuenow="{{ item.progress }}" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
							<div class="d-flex align-items-center justify-content-end ms-2" style="width: 54px; gap: 2px;">
								<strong>{{ item.value }}</strong>
								<i class="ic xs {{ item.trendIcon }} color"></i>
							</div>
						</div>
					</div>
				</li>
			{% endfor %}

		</ul>

	</div>

</div>

Starter Kit Code

<div class="card">
	<div class="card-header">
		<h5 class="card-title">Activity</h5>

		<div class="card-header-actions">
			<div class="btn-group card-action-dots">
				<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
					<i class="ic ic-three-dots"></i>
				</button>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="javascript:void()">Action 1</a></li>
					<li><a class="dropdown-item" href="javascript:void()">Action 2</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="card-body pt-3">

		<ul class="list-group">

			{% for item in [
				{
					'avatar'		: {
						'size'		: 32,
					},
					'description'	: '<span class="text-dark-1">Hosain Alfathir</span> commented on your blog <a href="javascript:void();">Design inspiration#23</a>',
					'time'			: '10 mins ago',
				},
				{
					'avatar'		: {
						'size'		: 32,

						'image'		: 'avatar-7.png',
					},
					'description'	: '<span class="text-dark-1">Mardigu Gunawarman</span> commented on your blog <a href="javascript:void();">How to be a millioner in a year.</a>',
					'time'			: '10 mins ago',
				},
				{
					'avatar'		: {
						'size'		: 32,

						'image'		: 'avatar-5.png',
					},
					'description'	: '<span class="text-dark-1">Nero Pandero</span> commented on your blog <a href="javascript:void();">Design trend in 2023</a>',
					'time'			: '10 mins ago',
				},
				{
					'avatar'		: {
						'size'		: 32,
					},
					'description'	: '<span class="text-dark-1">Margaret</span> commented on your blog <a href="javascript:void();">Design inspiration#26</a>',
					'time'			: '10 mins ago',
				}
			] %}
				<li class="list-group-item">
					<div class="d-flex align-items-start">
						{# include components/avatar  #}
						{% include "../../components/avatar.twig", with item.avatar %}

						<div class="d-flex flex-column ms-2 ps-1 text-dark-3">
							<div class="fw-medium mb-2">{{ item.description }}</div>
							<small>{{ item.time }}</small>
						</div>
					</div>
				</li>
			{% endfor %}

		</ul>

	</div>

</div>

Starter Kit Code

<div class="card">
	<div class="card-header">
		<h5 class="card-title">Transactions</h5>

		<div class="card-header-actions">
			<div class="btn-group card-action-dots">
				<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
					<i class="ic ic-three-dots"></i>
				</button>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="javascript:void()">Action 1</a></li>
					<li><a class="dropdown-item" href="javascript:void()">Action 2</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="card-body py-3">

		<ul class="list-group">

			{% for item in [
				{
					'icon'		: 'ic-arrow-square-right color',

					'title'		: 'Product sold #12490',
					'amount'	: '<strong class="text-success">+180.00 USD</strong>',
					'via'		: 'Paypal',
				},
				{
					'icon'		: 'ic-arrowu-down-left color',

					'title'		: 'Refund',
					'amount'	: '<strong class="text-success">+82.2 USD</strong>',
					'via'		: 'Transfer',
				},
				{
					'icon'		: 'ic-arrow-square-left color',

					'title'		: 'Product sold #12491',
					'amount'	: '<strong class="text-dark-1">-20.6 USD</strong>',
					'via'		: 'Credit Card',
				},
				{
					'icon'		: 'ic-arrow-square-left color',

					'title'		: 'Product sold #12494',
					'amount'	: '<strong class="text-dark-1">-78.6 USD</strong>',
					'via'		: 'Credit Card',
				},
				{
					'icon'		: 'ic-arrow-square-left color',

					'title'		: 'Send money',
					'amount'	: '<strong class="text-dark-1">-90.88 USD</strong>',
					'via'		: 'Wallet',
				},
				{
					'icon'		: 'ic-arrow-square-right color',

					'title'		: 'Monthly bonus',
					'amount'	: '<strong class="text-success">+23.6 USD</strong>',
					'via'		: 'Wallet',
				},
			] %}
				<li class="list-group-item">
					<div class="d-flex align-items-center">
						<div class="d-flex">
							<i class="ic {{ item.icon }} color"></i>
							<div class="d-flex flex-column ms-2 ps-1" style="gap: 1px;">
								<div class="fw-medium">{{ item.title }}</div>
								<small class="text-dark-3">{{ item.via }}</small>
							</div>
						</div>

						<div class="ms-auto">{{ item.amount }}</div>
					</div>
				</li>
			{% endfor %}

		</ul>

	</div>

</div>

Starter Kit Code

<div class="card">
	<div class="card-header">
		<div class="">
			<h5 class="card-title">Sales by Countries</h5>
			<span class="">Monthly Sales Overview</span>
		</div>

		<div class="card-header-actions">
			<div class="btn-group card-action-dots">
				<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
					<i class="ic ic-three-dots"></i>
				</button>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="javascript:void()">Action 1</a></li>
					<li><a class="dropdown-item" href="javascript:void()">Action 2</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="card-body">

		<ul class="list-group">

			{% for item in [
				{
					'avatar'		: {
						'size'		: 32,

						'image'		: 'flag-usa-circle.svg',
					},
					'country'	: 'United states of america',

					'total'		: '$8,567k',
					'growth'	: '<strong class="text-success">2.1%</strong><i class="ic xs ic-arrow-up color"></i>',
					'count'		: '884k',
				},
				{
					'avatar'		: {
						'size'		: 32,

						'image'		: 'flag-germany-circle.svg',
					},
					'country'	: 'Germany',

					'total'		: '$8,567k',
					'growth'	: '<strong class="text-danger">6.2%</strong><i class="ic xs ic-arrow-down color"></i>',
					'count'		: '645k',
				},
				{
					'avatar'		: {
						'size'		: 32,

						'image'		: 'flag-australia-circle.svg',
					},
					'country'	: 'Australia',

					'total'		: '$8,567k',
					'growth'	: '<strong class="text-danger">11.9%</strong><i class="ic xs ic-arrow-down color"></i>',
					'count'		: '148k',
				},
				{
					'avatar'		: {
						'size'		: 32,

						'image'		: 'flag-france-circle.svg',
					},
					'country'	: 'France',

					'total'		: '$8,567k',
					'growth'	: '<strong class="text-success">25.8%</strong><i class="ic xs ic-arrow-up color"></i>',
					'count'		: '86k',
				},
				{
					'avatar'		: {
						'size'		: 32,

						'image'		: 'flag-china-circle.svg',
					},
					'country'	: 'China',

					'total'		: '$8,567kk',
					'growth'	: '<strong class="text-success">12.4%</strong><i class="ic xs ic-arrow-up color"></i>',
					'count'		: '42k',
				},
			] %}
				<li class="list-group-item">
					<div class="d-flex align-items-center">
						<div class="d-flex">
							{# include components/avatar  #}
							{% include "../../components/avatar.twig", with item.avatar %}
							<div class="d-flex flex-column ms-2 ps-1" style="gap: 1px;">
								<div class="d-flex fw-medium">
									<span>{{ item.total }}</span>
									<div class="d-flex align-items-center ms-1" style="width: 54px; gap: 2px;">{{ item.growth }}</div>
								</div>
								<small class="text-dark-3">{{ item.country }}</small>
							</div>
						</div>

						<div class="ms-auto"><strong>{{ item.count }}</strong></div>
					</div>
				</li>
			{% endfor %}

		</ul>

	</div>

</div>

Starter Kit Code

<div class="card">
	<div class="card-header">
		<h5 class="card-title">Pages Session</h5>

		<div class="card-header-actions">
			<div class="btn-group card-action-dots">
				<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
					<i class="ic ic-three-dots"></i>
				</button>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="javascript:void()">Action 1</a></li>
					<li><a class="dropdown-item" href="javascript:void()">Action 2</a></li>
				</ul>
			</div>
		</div>
	</div>
	{% set pagesSession = [
		{
			'bgClass'		: 'bg-brand-primary-1',
			'page'		: '/Portfolio',
			'percentage'	: '30%',
			'growthIcon'	: 'ic-arrow-up color',
			'duration'		: '1h 30m',
		},
		{
			'bgClass'		: 'bg-brand-primary-2',
			'page'		: '/Homepage',
			'percentage'	: '20%',
			'growthIcon'	: 'ic-arrow-up color',
			'duration'		: '0h 30m',
		},
		{
			'bgClass'		: 'bg-brand-primary-3',
			'page'		: '/About us',
			'percentage'	: '20%',
			'growthIcon'	: 'ic-arrow-down color',
			'duration'		: '1h 15m',
		},
		{
			'bgClass'		: 'bg-brand-secondary-1',
			'page'		: '/Portfolio/Logo de...',
			'percentage'	: '17%',
			'growthIcon'	: 'ic-arrow-up color',
			'duration'		: '1h 00m',
		},
		{
			'bgClass'		: 'bg-brand-secondary-2',
			'page'		: '/Portfolio/Marvelic...',
			'percentage'	: '8%',
			'growthIcon'	: 'ic-arrow-down color',
			'duration'		: '1h 00m',
		},
		{
			'bgClass'		: 'bg-brand-secondary-3',
			'page'		: '/Contact us',
			'percentage'	: '5%',
			'growthIcon'	: 'ic-arrow-up color',
			'duration'		: '0h 45m',
		},
	] %}
	<div class="card-body">

		<div class="progress-stacked mb-3" style="height: 28px;">

			{% for item in pagesSession %}
				<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="height: 28px; width: {{ item.percentage }};">
					<div class="progress-bar {{ item.bgClass }}"></div>
				</div>
			{% endfor %}
		</div>

		<ul class="list-group">

			{% for item in pagesSession %}
				<li class="list-group-item list-group-item-py-12px">
					<div class="d-flex align-items-center">
						<i class="rounded {{ item.bgClass }}" style="width: 8px; height: 8px;"></i>
						<strong class="ms-2">{{ item.page }}</strong>
						
						<div class="d-flex align-items-center ms-auto text-end">
							<strong class="d-flex align-items-center justify-content-end ms-2" style="width: 54px; gap: 2px;">{{ item.percentage }} <i class="ic xs {{ item.growthIcon }}"></i></strong>
							<span class="text-dark-3 ms-3" style="width: 72px;">{{ item.duration }}</span>
						</div>
					</div>
				</li>
			{% endfor %}

		</ul>

	</div>
</div>

Starter Kit Code

<div class="card">
	<div class="card-header">
		<h5 class="card-title">To do list</h5>
	</div>

	<div class="card-body pb-0">

		<ul class="list-group list-group-to-do">

			{% for idx, item in [
				{
					'text'	: 'Design a social media ads',
					'checked'	: true,
				},
				{
					'text'	: 'Monthly Meeting',
					'checked'	: true,
				},
				{
					'text'	: 'Analyze Data for Amaz project',
					'checked'	: false,
				},
				{
					'text'	: 'Social Media Post',
					'checked'	: false,
				},
				{
					'text'	: 'New Company Website',
					'checked'	: false,
				},
				{
					'text'	: 'Icon set for sale',
					'checked'	: false,
				},
			] %}
				<li class="list-group-item list-group-item-py-12px">
					<div class="d-flex align-items-center">
						<div class="d-flex">
							<div class="form-check">
								<input class="form-check-input" type="checkbox" value="" id="form-checkbox-{{ idx }}" {{ item.checked ? 'checked' : '' }}>
								<label class="form-check-label" for="form-checkbox-{{ idx }}">{{ item.text }}
								</label>
							</div>
						</div>

						<div class="ms-auto">
							<div class="btn-group card-action-dots">
								<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
									<i class="ic ic-three-dots"></i>
								</button>
								<ul class="dropdown-menu">
									<li><a class="dropdown-item" href="javascript:void()">Action 1</a></li>
									<li><a class="dropdown-item" href="javascript:void()">Action 2</a></li>
								</ul>
							</div>
						</div>
					</div>
				</li>
			{% endfor %}

		</ul>
	</div>
	<div class="card-footer p-0">
		<a class="btn btn-block btn-dark-6 text-primary" href="javascript:void();">View all user</a>
	</div>
</div>

Starter Kit Code

<div class="card">
	<div class="card-header">
		<h5 class="card-title">Active Users</h5>

		<div class="card-header-actions">
			<div class="btn-group card-action-dots">
				<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
					<i class="ic ic-three-dots"></i>
				</button>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="javascript:void()">Action 1</a></li>
					<li><a class="dropdown-item" href="javascript:void()">Action 2</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="card-body py-3">

		<ul class="list-group">

			{% for item in [
				{
					'avatar'		: {
						'size'		: 40,

						'image'		: 'avatar-3.png',
						'circleClass'	: 'bg-brand-secondary-1',
					},
					'name'		: 'Sonya Stoltenberg',
					'email'		: 'sonya@gmail.com',
				},
				{
					'avatar'		: {
						'size'		: 40,

						'image'		: 'avatar-2.png',
						'circleClass'	: 'bg-brand-secondary-1',
					},
					'name'		: 'Theresa Swaniawski',
					'email'		: 'theresa@gmail.com',
				},
				{
					'avatar'		: {
						'size'		: 40,

						'image'		: 'avatar-6.png',
						'circleClass'	: 'bg-brand-secondary-2',
					},
					'name'		: 'Johanna Hand',
					'email'		: 'johanna@gmail.com',
				},
				{
					'avatar'		: {
						'size'		: 40,

						'image'		: 'avatar-7.png',
						'circleClass'	: 'bg-dark-4',
					},
					'name'		: 'Bobby Okuneva',
					'email'		: 'bobby@gmail.com',
				},
				{
					'avatar'		: {
						'size'		: 40,

						'image'		: 'avatar-8.png',
						'circleClass'	: 'bg-dark-4',
					},
					'name'		: 'Shawn Herzog',
					'email'		: 'shawn@gmail.com',
				},
			] %}
				<li class="list-group-item py-2">
					<div class="d-flex align-items-center">
						{# include components/avatar  #}
						{% include "../../components/avatar.twig", with item.avatar %}

						<div class="d-flex flex-column ms-2 ps-1">
							<strong class="fw-medium">{{ item.name }}</strong>
							<small class="text-dark-3">{{ item.email }}</small>
						</div>
					</div>
				</li>
			{% endfor %}

		</ul>
	</div>
	<div class="card-footer p-0">
		<a class="btn btn-block btn-dark-6 text-primary" href="javascript:void();">View all user</a>
	</div>
</div>

Starter Kit Code

<div class="card card-no-border">
	<div class="card-header">
		<h5 class="card-title">Trending now</h5>
	</div>
	<div class="card-body py-3">

		<ul class="list-group">

			{% for item in [
				{
					'title'	: 'Artificial Intelligence',
					'subtitle'	: '1,208 posts',
				},
				{
					'title'	: 'Tesla',
					'subtitle'	: '890 posts',
				},
				{
					'title'	: 'International Design Day',
					'subtitle'	: '730 posts',
				},
				{
					'title'	: 'Presidential election',
					'subtitle'	: '890 posts',
				},
				{
					'title'	: '2024',
					'subtitle'	: '890 posts',
				},
			] %}
				<li class="list-group-item py-2">
					<div class="d-flex align-items-center">
						<div class="d-flex flex-column">
							<div class="fw-medium">{{ item.title }}</div>
							<small class="text-dark-3">{{ item.subtitle }}</small>
						</div>

						<div class="ms-auto">
							<div class="btn-group card-action-dots">
								<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
									<i class="ic ic-three-dots"></i>
								</button>
								<ul class="dropdown-menu">
									<li><a class="dropdown-item" href="javascript:void()">Action 1</a></li>
									<li><a class="dropdown-item" href="javascript:void()">Action 2</a></li>
								</ul>
							</div>
						</div>
					</div>
				</li>
			{% endfor %}

		</ul>

	</div>

</div>

Starter Kit Code

<div class="card card-no-border">
	<div class="card-header">
		<h5 class="card-title">Suggested for you</h5>
	</div>

	<div class="card-body py-3">

		<ul class="list-group">

			{% for item in [
				{
					'avatar'		: {
						'size'		: 40,

						'image'		: 'avatar-3.png',
					},
					'name'		: 'Sonya Stoltenberg',
					'email'		: 'sonya@gmail.com',
				},
				{
					'avatar'		: {
						'size'		: 40,

						'image'		: 'avatar-2.png',
					},
					'name'		: 'Theresa Swaniawski',
					'email'		: 'theresa@gmail.com',
				},
				{
					'avatar'		: {
						'size'		: 40,

						'image'		: 'avatar-6.png',
					},
					'name'		: 'Johanna Hand',
					'email'		: 'johanna@gmail.com',
				},
				{
					'avatar'		: {
						'size'		: 40,

						'image'		: 'avatar-7.png',
					},
					'name'		: 'Bobby Okuneva',
					'email'		: 'bobby@gmail.com',
				},
				{
					'avatar'		: {
						'size'		: 40,

						'image'		: 'avatar-8.png',
					},
					'name'		: 'Shawn Herzog',
					'email'		: 'shawn@gmail.com',
				},
			] %}
				<li class="list-group-item py-2">
					<div class="d-flex align-items-center">
						{# include components/avatar  #}
						{% include "../../components/avatar.twig", with item.avatar %}

						<div class="d-flex flex-column ms-2 ps-1">
							<strong class="fw-medium">{{ item.name }}</strong>
							<small class="text-dark-3">{{ item.email }}</small>
						</div>

						<a class="text-sm fw-medium text-decoration-none ms-auto" href="javascript:void()">Follow</a>
					</div>
				</li>
			{% endfor %}

		</ul>
	</div>
	<div class="card-footer p-0">
		<a class="btn btn-block btn-dark-6 text-primary" href="javascript:void();">See all </a>
	</div>
</div>

Starter Kit Code

<div class="card">
	<div class="card-header">
		<h5 class="card-title">Recent Activity</h5>
	</div>

	<div class="card-body pb-0">

		<ul class="list-group list-group-activity">

			{% for item in [
				{
					'dotClass'		: 'bg-brand-primary-1',
					'title'		: 'You sold an item',	
					'description'	: 'Paul Sances just purchased ',
					'time'		: '8 min ago',
					'attachment'	: '<img src="assets/images/product-curology.png" height="24"/><a href="javascript:void()" class="ms-2 fw-medium text-dark-1 text-decoration-none">Curology product set</a>',
				},
				{
					'dotClass'		: 'bg-brand-primary-2',
					'title'		: 'Audrey Monterey',	
					'description'	: 'Send you message <span class="fw-medium">"Are you there?"</span>',
					'time'		: '14 hours ago',
				},
				{
					'dotClass'		: 'bg-brand-secondary-1',
					'title'		: 'Order #12489 from September',	
					'description'	: 'Invoices have been paid to the company',
					'time'		: 'Tuesday',
					'attachment'	: '<i class="ic sm ic-file-pdf primary-1"></i><a href="javascript:void()" class="ms-2 fw-medium text-decoration-none">invoices.pdf</a>',
				},
				{
					'dotClass'		: 'bg-brand-secondary-2',
					'title'		: 'Order #12490 from September',	
					'description'	: 'Invoices have been paid to the company',
					'time'		: 'Friday',
				},

			] %}
				<li class="list-group-item py-3">
					<div class="d-flex align-items-center">
						<div>
							<div class="d-flex align-items-center">
								<div class="dot {{ item.dotClass }}">
									<i class="dot-inner {{ item.dotClass }}"></i>
								</div>
								<div class="d-flex flex-column ms-3" style="gap: 2px;">
									<div class="fw-medium">{{ item.title }}</div>
									<div class="text-dark-3">{{ item.description }}</div>
								</div>
							</div>
							{% if item.attachment %}
								<div class="d-flex align-items-center ms-3 mt-2 ps-3">{{ item.attachment }}</div>
							{% endif %}
						</div>

						<div class="text-dark-3 ms-auto">{{ item.time }}</div>
					</div>
				</li>
			{% endfor %}

		</ul>

	</div>
</div>