ChatGPT UI Cards - Horizon AI Template

Our cards provide a flexible and extensible content container with multiple variants and options. All the Card components compose Box.

Import#

import Card from "components/card/Card"

Mini Statistics#

function MiniStatistics() {
  const textColor = useColorModeValue("secondaryGray.900", "white")
  const textColorSecondary = "secondaryGray.600"
  return (
    <Flex py="15px">
      <Flex
        my="auto"
        h="100%"
        align={{ base: "center", xl: "start" }}
        justify={{ base: "center", xl: "center" }}
      >
        <Stat my="auto" ms="18px">
          <StatLabel
            lineHeight="100%"
            color={textColorSecondary}
            fontSize={{
              base: "sm",
            }}
          >
            Sales
          </StatLabel>
          <StatNumber
            color={textColor}
            fontSize={{
              base: "2xl",
            }}
          >
            $574.34
          </StatNumber>
          <Flex align="center">
            <Text color="green.500" fontSize="xs" fontWeight="700" me="5px">
              +23%
            </Text>
            <Text color="secondaryGray.600" fontSize="xs" fontWeight="400">
              since last month
            </Text>
          </Flex>
        </Stat>
      </Flex>
    </Flex>
  )
}

import MiniStatistics from "components/card/MiniStatistics"

<MiniStatistics growth="+23%" name="Sales" value="$574.34" />

Project Card#

function ProjectCard() {
  const textColor = useColorModeValue('#1B2559', 'white');
  const gray = useColorModeValue('gray.500', 'white'); 
  const {
    isOpen: isOpen1,
    onOpen: onOpen1,
    onClose: onClose1,
  } = useDisclosure(); 
  const textHover = useColorModeValue(
    { color: 'navy.700', bg: 'unset' },
    { color: 'gray.500', bg: 'unset' },
  );
  const bgList = useColorModeValue('white', 'whiteAlpha.100');
  const bgShadow = useColorModeValue(
    '14px 17px 40px 4px rgba(112, 144, 176, 0.08)',
    'unset',
  );
  const cardBg = useColorModeValue(
    '14px 17px 40px 4px rgba(112, 144, 176, 0.08)',
    'unset',
  );
  const cardShd = useColorModeValue(
    '14px 17px 40px 4px rgba(112, 144, 176, 0.08)',
    'unset',
  );
  return (
    <Flex
      p= '20px'
      display= 'flex'
      flexDirection= 'column'
      width= '100%'
      position= 'relative'
      borderRadius= '14px'
      minWidth= '0px'
      wordWrap= 'break-word'
      bg={cardBg}
      boxShadow={cardBg} 
      >
      <Flex
        my="auto"
        h="100%"
        direction={'column'}
        align={{ base: 'center', xl: 'start' }}
        justify={{ base: 'center', xl: 'center' }}
      >
        <Flex align="center" justify={'space-between'} w="100%" mb="60px">
          <Text fontSize="lg" color={textColor} fontWeight="700">
           Untitled Project 5
          </Text>
          <Checkbox colorScheme={'brand'} />
        </Flex>
        <Flex w="100%" align="center" justify="space-between">
          <Flex align="center"> 
              <Icon me="4px" as={() => { return <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -996 996 996" width="20" fill="currentColor"><path fill="currentColor" d="m627-287 45-45-159-160v-201h-60v225l174 181ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-82 31.5-155t86-127.5Q252-817 325-848.5T480-880q82 0 155 31.5t127.5 86Q817-708 848.5-635T880-480q0 82-31.5 155t-86 127.5Q708-143 635-111.5T480-80Zm0-400Zm0 340q140 0 240-100t100-240q0-140-100-240T480-820q-140 0-240 100T140-480q0 140 100 240t240 100Z"/></svg>
            }}/>
            <Text fontSize="sm" color={gray} fontWeight="500">
             Yesterday at 08:27 AM
            </Text>
          </Flex>
          <Menu isOpen={isOpen1} onClose={onClose1}>
            <MenuButton onClick={onOpen1} p="0px"> 
              <Icon me="4px" as={() => { return <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"fill="currentColor"><path fill="currentColor" d="M207.858-432Q188-432 174-446.142q-14-14.141-14-34Q160-500 174.142-514q14.141-14 34-14Q228-528 242-513.858q14 14.141 14 34Q256-460 241.858-446q-14.141 14-34 14Zm272 0Q460-432 446-446.142q-14-14.141-14-34Q432-500 446.142-514q14.141-14 34-14Q500-528 514-513.858q14 14.141 14 34Q528-460 513.858-446q-14.141 14-34 14Zm272 0Q732-432 718-446.142q-14-14.141-14-34Q704-500 718.142-514q14.141-14 34-14Q772-528 786-513.858q14 14.141 14 34Q800-460 785.858-446q-14.141 14-34 14Z"/></svg>
            }}/>
             </MenuButton>
            <MenuList
              w="150px"
              minW="unset"
              maxW="150px !important"
              border="transparent"
              backdropFilter="blur(63px)"
              bg={bgList}
              boxShadow={bgShadow}
              borderRadius="20px"
              p="15px"
            >
              <MenuItem
                transition="0.2s linear"
                color={textColor}
                _hover={textHover}
                p="0px"
                borderRadius="8px"
                _active={{
                  bg: 'transparent',
                }}
                _focus={{
                  bg: 'transparent',
                }}
                mb="10px"
              >
                <Flex align="center"> 
                  <Text fontSize="sm" fontWeight="400">
                    Panel 1
                  </Text>
                </Flex>
              </MenuItem>
              <MenuItem
                transition="0.2s linear"
                p="0px"
                borderRadius="8px"
                color={textColor}
                _hover={textHover}
                _active={{
                  bg: 'transparent',
                }}
                _focus={{
                  bg: 'transparent',
                }}
                mb="10px"
              >
                <Flex align="center"> 
                  <Text fontSize="sm" fontWeight="400">
                    Panel 2
                  </Text>
                </Flex>
              </MenuItem>
              <MenuItem
                transition="0.2s linear"
                p="0px"
                borderRadius="8px"
                color={textColor}
                _hover={textHover}
                _active={{
                  bg: 'transparent',
                }}
                _focus={{
                  bg: 'transparent',
                }}
                mb="10px"
              >
                <Flex align="center"> 
                  <Text fontSize="sm" fontWeight="400">
                    Panel 3
                  </Text>
                </Flex>
              </MenuItem>
              <MenuItem
                transition="0.2s linear"
                color={textColor}
                _hover={textHover}
                p="0px"
                borderRadius="8px"
                _active={{
                  bg: 'transparent',
                }}
                _focus={{
                  bg: 'transparent',
                }}
              >
                <Flex align="center"> 
                  <Text fontSize="sm" fontWeight="400">
                    Panel 4
                  </Text>
                </Flex>
              </MenuItem>
            </MenuList>
          </Menu>
        </Flex>
      </Flex>
    </Flex>
  )
}

import ProjectCard from "components/card/ProjectCard"

<ProjectCard title="Untitled Project 5" time="Yesterday at 08:27 AM" />

Template/Prompt Card#

function TemplateCard() {
  const textColor = useColorModeValue('#1B2559', 'white');
  const gray = useColorModeValue('gray.500', 'white'); 
  const {
    isOpen: isOpen1,
    onOpen: onOpen1,
    onClose: onClose1,
  } = useDisclosure(); 
  const textHover = useColorModeValue(
    { color: 'navy.700', bg: 'unset' },
    { color: 'gray.500', bg: 'unset' },
  );
  const bgList = useColorModeValue('white', 'whiteAlpha.100');
  const bgShadow = useColorModeValue(
    '14px 17px 40px 4px rgba(112, 144, 176, 0.08)',
    'unset',
  );
  const cardBg = useColorModeValue(
    '14px 17px 40px 4px rgba(112, 144, 176, 0.08)',
    'unset',
  );
  const cardShd = useColorModeValue(
    '14px 17px 40px 4px rgba(112, 144, 176, 0.08)',
    'unset',
  );
  return (
    <Flex py="24px" px="24px"
      display= 'flex'
      flexDirection= 'column'
      width= '100%'
      position= 'relative'
      borderRadius= '14px'
      minWidth= '0px'
      wordWrap= 'break-word'
      bg={cardBg}
      boxShadow={cardBg} 
      > 
        <Flex
          my="auto"
          h="100%"
          direction={'column'}
          align={{ base: 'center', xl: 'start' }}
          justify={{ base: 'center', xl: 'center' }}
        >
          <Flex align="start" w="100%" mb="30px">
            <Text fontSize="34px" lineHeight={'120%'}>
              📝
            </Text> 
              <Flex ms="auto"> 
                <Button
                  p="0px"
                  w="24px"
                  h="24px"
                  _hover={{}}
                  _focus={{}}
                  _active={{}}
                  bg="none"
                >
                  <Icon h="24px" w="24px" color={gray} as={() => { return <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="currentColor" d="M772.957-600.37 601.761-769.804l54.565-54.805q23.957-23.956 58.652-24.195 34.696-.239 59.609 24.195l52.652 52.413q24.913 24.435 25.196 58.25.282 33.816-23.674 57.772l-55.804 55.804ZM163.826-116.174q-19.152 0-32.326-13.174t-13.174-32.326v-106.543q0-9.196 3.359-17.533 3.358-8.337 10.315-15.293l411.761-411.761 171.435 171.195-411.761 411.761q-6.957 6.957-15.413 10.315-8.457 3.359-17.652 3.359H163.826Z"/></svg>}} color={gray} />
                </Button> 
              </Flex>
          </Flex>
          <Box>
            <Text fontSize="lg" color={textColor} fontWeight="700" mb="8px">
             Write an Essay
            </Text>
            <Text fontSize="sm" color={gray} fontWeight="500">
             Generate a LinkedIn high-converting message based on a type or subject.
            </Text>
          </Box>
        </Flex> 
    </Flex>
  )
}

import TemplateCard from "components/card/TemplateCard"

<TemplateCard title="Untitled Project 5" time="Yesterday at 08:27 AM" />