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>

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>