Home
Framework
Theme
All
663
Forms
12
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
51
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Cards Section
37
Features
25
Teams Section
11
Faq
9
Headers
45
Blogs
13
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Http Codes
6
Authentication
15
Call To Actions
21
Teams
16
Pricing
13


Projects Section - All Examples
Discover 14 Projects Section examples available in Loopple
Section Projects Activity

<Grid data-type='Grid' templateColumns='repeat(12,1fr)' gap={6}>
<GridItem data-type='GridItem' colSpan={{base:12,lg:4}}>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<Image data-type='Image'
objectFit='cover'
maxW='100%'
src='https://images.unsplash.com/photo-1620325867502-221cfb5faa5f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvamVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=2000&q=60'
alt='Work'
/>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md'>Slack</Heading>
<Text data-type='Text' py='2'>
This project is about integrating a new chat system to slack platform.
</Text>
<Stack data-type='Stack' direction='row' mt='3'>
<Badge data-type='Badge' colorScheme='green'>IOS App</Badge>
<Badge data-type='Badge' colorScheme='red'>Desktop App</Badge>
</Stack>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' size='sm'>
Attach File
</Button>
</CardFooter>
</Stack>
</Card>
</GridItem>
<GridItem data-type='GridItem' colSpan={{base:12,lg:8}}>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md' mb='4'>Activites</Heading>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Vanessa Tucker added 2 new files in Loopple</Text>
<Text data-type='Text' fontSize='xs'>Today 7:51 PM</Text>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Charles Hall pushed 2 commits into Chakra UI Builder</Text>
<Text data-type='Text' fontSize='xs' mb='2'>Today 8:15 PM</Text>
<Box data-type='Box' border='1px' borderColor='gray.200' p='2'>
<Text data-type='Text' fontSize='xs'>Hi guys, I have a problem when I try to push into the main branch. Do you have any time today to take a look?</Text>
</Box>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Marko finished tasks</Text>
<Text data-type='Text' fontSize='xs'>Today 8:54 PM</Text>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Leonard completed the list for today's meeting</Text>
<Text data-type='Text' fontSize='xs' mb='2'>Today 9:14 PM</Text>
<UnorderedList data-type='UnorderedList'>
<ListItem data-type='ListItem'>Add tasks into Jira</ListItem>
<ListItem data-type='ListItem'>Discuss about new content on our blog</ListItem>
</UnorderedList>
</Box>
</Flex>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' size='sm'>
See more
</Button>
</CardFooter>
</Stack>
</Card>
</GridItem>
</Grid>
<Grid data-type='Grid' templateColumns='repeat(12,1fr)' gap={6}>
<GridItem data-type='GridItem' colSpan={{base:12,lg:4}}>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<Image data-type='Image'
objectFit='cover'
maxW='100%'
src='https://images.unsplash.com/photo-1620325867502-221cfb5faa5f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvamVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=2000&q=60'
alt='Work'
/>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md'>Slack</Heading>
<Text data-type='Text' py='2'>
This project is about integrating a new chat system to slack platform.
</Text>
<Stack data-type='Stack' direction='row' mt='3'>
<Badge data-type='Badge' colorScheme='green'>IOS App</Badge>
<Badge data-type='Badge' colorScheme='red'>Desktop App</Badge>
</Stack>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' size='sm'>
Attach File
</Button>
</CardFooter>
</Stack>
</Card>
</GridItem>
<GridItem data-type='GridItem' colSpan={{base:12,lg:8}}>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md' mb='4'>Activites</Heading>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Vanessa Tucker added 2 new files in Loopple</Text>
<Text data-type='Text' fontSize='xs'>Today 7:51 PM</Text>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Charles Hall pushed 2 commits into Chakra UI Builder</Text>
<Text data-type='Text' fontSize='xs' mb='2'>Today 8:15 PM</Text>
<Box data-type='Box' border='1px' borderColor='gray.200' p='2'>
<Text data-type='Text' fontSize='xs'>Hi guys, I have a problem when I try to push into the main branch. Do you have any time today to take a look?</Text>
</Box>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Marko finished tasks</Text>
<Text data-type='Text' fontSize='xs'>Today 8:54 PM</Text>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Leonard completed the list for today's meeting</Text>
<Text data-type='Text' fontSize='xs' mb='2'>Today 9:14 PM</Text>
<UnorderedList data-type='UnorderedList'>
<ListItem data-type='ListItem'>Add tasks into Jira</ListItem>
<ListItem data-type='ListItem'>Discuss about new content on our blog</ListItem>
</UnorderedList>
</Box>
</Flex>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' size='sm'>
See more
</Button>
</CardFooter>
</Stack>
</Card>
</GridItem>
</Grid>
Section Projects Cards
Section Projects Participants
Section Projects

<div class="row removable">
<div class="col-xl-6 drop-zone">
<!-- Members list group card -->
<div class="card draggable">
<!-- Card header -->
<div class="card-header">
<!-- Title -->
<h5 class="h3 mb-0">Team members</h5>
</div>
<!-- Card body -->
<div class="card-body">
<!-- List group -->
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">John Michael</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">Alex Smith</a>
</h4>
<span class="text-warning">●</span>
<small>In a meeting</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">Samantha Ivy</a>
</h4>
<span class="text-danger">●</span>
<small>Offline</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">John Michael</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-6 drop-zone">
<!-- Progress track -->
<div class="card draggable">
<!-- Card header -->
<div class="card-header">
<!-- Title -->
<h5 class="h3 mb-0">Progress track</h5>
</div>
<!-- Card body -->
<div class="card-body">
<!-- List group -->
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg">
</a>
</div>
<div class="col">
<h5>Argon Design System</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg">
</a>
</div>
<div class="col">
<h5>Angular Now UI Kit PRO</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg">
</a>
</div>
<div class="col">
<h5>Black Dashboard</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-red" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg">
</a>
</div>
<div class="col">
<h5>React Material Dashboard</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-teal" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row removable">
<div class="col-xl-6 drop-zone">
<!-- Members list group card -->
<div class="card draggable">
<!-- Card header -->
<div class="card-header">
<!-- Title -->
<h5 class="h3 mb-0">Team members</h5>
</div>
<!-- Card body -->
<div class="card-body">
<!-- List group -->
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">John Michael</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">Alex Smith</a>
</h4>
<span class="text-warning">●</span>
<small>In a meeting</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">Samantha Ivy</a>
</h4>
<span class="text-danger">●</span>
<small>Offline</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">John Michael</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-6 drop-zone">
<!-- Progress track -->
<div class="card draggable">
<!-- Card header -->
<div class="card-header">
<!-- Title -->
<h5 class="h3 mb-0">Progress track</h5>
</div>
<!-- Card body -->
<div class="card-body">
<!-- List group -->
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg">
</a>
</div>
<div class="col">
<h5>Argon Design System</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg">
</a>
</div>
<div class="col">
<h5>Angular Now UI Kit PRO</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg">
</a>
</div>
<div class="col">
<h5>Black Dashboard</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-red" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg">
</a>
</div>
<div class="col">
<h5>React Material Dashboard</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-teal" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>