Home

Framework

All Frameworks
bootstrap tailwind chakra

Theme

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

Chakra UI Dashboard View Theme 
<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

Soft UI Dashboard View Theme

Section Projects Participants

Soft UI Dashboard View Theme

Section Projects

Argon Dashboard View Theme 
<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>