Card

Used to display content related to a single subject.

Dolor Sit

card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.

import { Avatar, Button, Card } from '@fidely-ui/react'

export const CardDemo = () => {
  return (
    <Card.Root width={{ base: 'full', md: '340px' }}>
      <Card.Body gap="2">
        <Avatar.Root size="2xl" shape="rounded">
          <Avatar.Image src="https://picsum.photos/200/300" />
          <Avatar.Fallback name="Dolor Sit" />
        </Avatar.Root>
        <Card.Title mt="2">Dolor Sit</Card.Title>
        <Card.Description>
          card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel
          dui euismod fermentum.
        </Card.Description>
      </Card.Body>
      <Card.Footer justifyContent="flex-end">
        <Button variant="outline">View</Button>
        <Button>Join</Button>
      </Card.Footer>
    </Card.Root>
  )
}

Usage

import { Card } from '@fidely-ui/react'

<Card.Root>
  <Card.Header />
  <Card.Body />
  <Card.Footer />
</Card.Root>

Within Form

Use the Card component within a form to group related fields together.

First Name

Last Name

import { Button, Card, Field, Input, Stack } from '@fidely-ui/react'

export const CardForm = () => (
  <Card.Root width={{ base: 'full', md: '340px' }}>
    <Card.Header>
      <Card.Title>Sign up</Card.Title>
      <Card.Description>
        Fill in the form below to create an account
      </Card.Description>
    </Card.Header>
    <Card.Body>
      <Stack gap="4" w="full">
        <Field.Root>
          <Field.Label>First Name</Field.Label>
          <Input />
        </Field.Root>
        <Field.Root>
          <Field.Label>Last Name</Field.Label>
          <Input />
        </Field.Root>
      </Stack>
    </Card.Body>
    <Card.Footer justifyContent="flex-end">
      <Button variant="outline">Cancel</Button>
      <Button variant="solid">Sign in</Button>
    </Card.Footer>
  </Card.Root>
)

Use the Card component to display an avatar.

Fidely UI completely changed how I build apps. Everything is composable and the design system is consistent out of the box

import {
  Avatar,
  Button,
  Card,
  Flex,
  HStack,
  Stack,
  Text,
} from '@fidely-ui/react'
import { LuCheck, LuX } from 'react-icons/lu'

export const CardWithAvatar = () => {
  return (
    <Card.Root width={{ base: 'full', md: '340px' }}>
      <Card.Body gap="2">
        <Card.Header>
          <Flex justifyContent={'space-between'} alignItems={'flex-start'}>
            <HStack mb="6" gap="3">
              <Avatar.Root>
                <Avatar.Fallback name="Nelson Chinedu" />
                <Avatar.Image src="/nelson.jpeg" />
              </Avatar.Root>

              <Stack gap="0">
                <Card.Title mt="2">Nelson Chinedu</Card.Title>
                <Text textStyle={'sm'}>Frontend Engineer</Text>
              </Stack>
            </HStack>
          </Flex>
        </Card.Header>
        <Card.Description>
          Fidely UI completely changed how I build apps. Everything is
          composable and the design system is consistent out of the box
        </Card.Description>
        <Card.Footer>
          <Button variant="subtle" ripple colorPalette={'orange'} flex="1">
            <LuX />
            Decline
          </Button>
          <Button ripple colorPalette={'orange'} flex="1">
            <LuCheck />
            Follow
          </Button>
        </Card.Footer>
      </Card.Body>
    </Card.Root>
  )
}