Chakra Cards Section
Discover 2 Chakra Cards Section available in Loopple
Stats Cards
Component from
Chakra UI Dashboard
Builder
<Grid data-type='Grid' templateColumns='repeat(4, 1fr)' gap={6} mb="6">
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel'>Visits</StatLabel>
<StatNumber data-type='StatNumber'>345,670</StatNumber>
<StatHelpText data-type='StatHelpText'>
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
23.36%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel'>Users</StatLabel>
<StatNumber data-type='StatNumber'>16,890</StatNumber>
<StatHelpText data-type='StatHelpText'>
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
14.85%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel'>Revenue</StatLabel>
<StatNumber data-type='StatNumber'>$1,230,670</StatNumber>
<StatHelpText data-type='StatHelpText'>
<StatArrow data-type='StatArrow' type='decrease'></StatArrow>
1.12%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel'>Expenses</StatLabel>
<StatNumber data-type='StatNumber'>$480,783</StatNumber>
<StatHelpText data-type='StatHelpText'>
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
5.12%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
</Grid>Stats Card Dark
Component from
Chakra UI Dashboard
Builder
<Grid data-type='Grid' templateColumns='repeat(4, 1fr)' gap={6} mb="6">
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
bg="blackAlpha.900"
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel' color="white">Visits</StatLabel>
<StatNumber data-type='StatNumber' color="white">345,670</StatNumber>
<StatHelpText data-type='StatHelpText' color="white">
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
23.36%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
bg="blackAlpha.900"
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel' color="white">Users</StatLabel>
<StatNumber data-type='StatNumber' color="white">16,890</StatNumber>
<StatHelpText data-type='StatHelpText' color="white">
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
14.85%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
bg="blackAlpha.900"
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel' color="white">Revenue</StatLabel>
<StatNumber data-type='StatNumber' color="white">$1,230,670</StatNumber>
<StatHelpText data-type='StatHelpText' color="white">
<StatArrow data-type='StatArrow' type='decrease'></StatArrow>
1.12%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
bg="blackAlpha.900"
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel' color="white">Expenses</StatLabel>
<StatNumber data-type='StatNumber' color="white">$480,783</StatNumber>
<StatHelpText data-type='StatHelpText' color="white">
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
5.12%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
</Grid>