Cards: Basic

import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Basic card without image */}
<Card>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Alternative card style: no border + shadow */}
<Card border='0' className='shadow'>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

{/* Alternative card style: gray background */}
<Card bg='secondary'>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Static light card */}
<Card className='card-light'>
  <Card.Body>
    <Card.Title as='h5'>Static card</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

{/* Light card with hover effect */}
<Card className='card-light card-hover'>
  <Card.Body>
    <Card.Title as='h5'>Hover effect</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Hover effect on default card */}
<Card className='card-hover'>
  <Card.Body>
    <Card.Title as='h5'>Hover over me!</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

{/* Hover effect on card with shadow */}
<Card border='0' className='shadow-sm card-hover'>
  <Card.Body>
    <Card.Title as='h5'>Hover over me!</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

{/* Hover effect on card with gray background */}
<Card bg='secondary' className='card-hover'>
  <Card.Body>
    <Card.Title as='h5'>Hover over me!</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

import Link from 'next/link'
import ImageLoader from '../components/ImageLoader'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Image on top */}
<Card style={{maxWidth: '308px'}}>
  <ImageLoader
    src='/images/real-estate/catalog/04.jpg'
    width={306}
    height={200}
    layout='responsive'
    alt='Card image'
    className='card-img-top'
  />
  <Card.Body>
    <Card.Title as='h5'>Card title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

import Link from 'next/link'
import ImageLoader from '../components/ImageLoader'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Image on bottom */}
<Card style={{maxWidth: '308px'}}>
  <Card.Body>
    <Card.Title as='h5'>Card title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
  <ImageLoader
    src='/images/real-estate/catalog/01.jpg'
    width={306}
    height={200}
    layout='responsive'
    alt='Card image'
    className='card-img-bottom'
  />
</Card>

import Link from 'next/link'
import ImageLoader from '../components/ImageLoader'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Horizontal card layout */}
<Card className='card-horizontal'>
  <div className='card-img-top'>
    <ImageLoader
      src='/images/real-estate/catalog/03.jpg'
      layout='fill'
      objectFit='cover'
      quality={100}
      alt='Card image'
    />
  </div>
  <Card.Body>
    <Card.Title as='h5'>Card title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Card with header and footer */}
<Card className='text-center'>
  <Card.Header>Featured</Card.Header>
  <Card.Body>
    <Card.Title as='h4'>Special title treatment</Card.Title>
    <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
  <Card.Footer className='fs-sm text-muted'>3 days ago</Card.Footer>
</Card>

import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Left aligned (default) */}
<Card>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

{/* Center aligned */}
<Card className='text-center'>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

{/* Right aligned */}
<Card className='text-end'>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import Nav from 'react-bootstrap/Nav'

{/* Tabs inside card header */}
<Card className='text-center'>
  <Card.Header>
    <Nav variant='tabs' defaultActiveKey='1'>
      <Nav.Item>
        <Nav.Link eventKey='1'>Active</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey='2'>Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey='3' disabled>Disabled</Nav.Link>
      </Nav.Item>
    </Nav>
  </Card.Header>
  <Card.Body>
    <Card.Title as='h4'>Special title treatment</Card.Title>
    <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import Nav from 'react-bootstrap/Nav'

{/* Pills inside card header */}
<Card className='text-center'>
  <Card.Header>
    <Nav variant='pills' defaultActiveKey='1'>
      <Nav.Item>
        <Nav.Link eventKey='1'>Active</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey='2'>Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey='3' disabled>Disabled</Nav.Link>
      </Nav.Item>
    </Nav>
  </Card.Header>
  <Card.Body>
    <Card.Title as='h4'>Special title treatment</Card.Title>
    <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import ListGroup from 'react-bootstrap/ListGroup'

{/* Simple list group inside card */}
<Card>
  <Card.Body>
    <Card.Title as='h4'>Card title</Card.Title>
    <Card.Text className='fs-sm text-muted'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content.
    </Card.Text>
  </Card.Body>
  <ListGroup as='ul' variant='flush'>
    <ListGroup.Item as='li'>Cras justo odio</ListGroup.Item>
    <ListGroup.Item as='li'>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item as='li'>Vestibulum at eros</ListGroup.Item>
  </ListGroup>
  <Card.Body>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

{/* Actionable list group inside card */}
<Card>
  <Card.Body>
    <Card.Title as='h4'>Card title</Card.Title>
    <Card.Text className='fs-sm text-muted'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content.
    </Card.Text>
  </Card.Body>
  <ListGroup variant='flush'>
    <ListGroup.Item action href='#link1'>Cras justo odio</ListGroup.Item>
    <ListGroup.Item action href='#link2'>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item action href='#link3'>Vestibulum at eros</ListGroup.Item>
  </ListGroup>
  <Card.Body>
    <Button as={Link} href='#' size='sm'>Go somewhere</Button>
  </Card.Body>
</Card>

import Card from 'react-bootstrap/Card'

{/* Primary card */}
<Card bg='primary' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Primary card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Accent card */}
<Card bg='accent' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Accent card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Secondary card */}
<Card bg='secondary'>
  <Card.Header>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5'>Secondary card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Success card */}
<Card bg='success' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Success card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Danger card */}
<Card bg='danger' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Danger card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Warning card */}
<Card bg='warning' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Warning card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Info card */}
<Card bg='info' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Info card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Dark card */}
<Card bg='dark' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Dark card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Gradient card */}
<Card bg='gradient' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Gradient card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

import Card from 'react-bootstrap/Card'

{/* Primary card */}
<Card border='primary' text='primary'>
  <Card.Header className='border-primary'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-primary'>Primary card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Accent card */}
<Card border='accent' text='accent'>
  <Card.Header className='border-accent'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-accent'>Accent card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Success card */}
<Card border='success' text='success'>
  <Card.Header className='border-success'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-success'>Success card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Danger card */}
<Card border='danger' text='danger'>
  <Card.Header className='border-danger'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-danger'>Danger card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Warning card */}
<Card border='warning' text='warning'>
  <Card.Header className='border-warning'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-warning'>Warning card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Info card */}
<Card border='info' text='info'>
  <Card.Header className='border-info'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-info'>Info card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Dark card */}
<Card border='dark' text='dark'>
  <Card.Header className='border-dark'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-dark'>Dark card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

import ImageLoader from '../components/ImageLoader'
import Card from 'react-bootstrap/Card'
import CardGroup from 'react-bootstrap/CardGroup'

{/* Card group */}
<CardGroup>

  {/* Card */}
  <Card>
    <ImageLoader
      src='/images/real-estate/catalog/01.jpg'
      width={360}
      height={236}
      layout='responsive'
      alt='Card image'
      className='card-img-top'
    />
    <Card.Body>
      <Card.Title as='h5'>Dark card title</Card.Title>
      <Card.Text className='fs-sm'>
        This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
      </Card.Text>
    </Card.Body>
    <Card.Footer className='fs-xs text-muted'>Last updated 3 mins ago</Card.Footer>
  </Card>

  {/* Card */}
  <Card>
    <ImageLoader
      src='/images/real-estate/catalog/04.jpg'
      width={360}
      height={236}
      layout='responsive'
      alt='Card image'
      className='card-img-top'
    />
    <Card.Body>
      <Card.Title as='h5'>Dark card title</Card.Title>
      <Card.Text className='fs-sm'>
        This card has supporting text below as a natural lead-in to additional content.
      </Card.Text>
    </Card.Body>
    <Card.Footer className='fs-xs text-muted'>Last updated 3 mins ago</Card.Footer>
  </Card>
  
  {/* Card */}
  <Card>
    <ImageLoader
      src='/images/real-estate/catalog/03.jpg'
      width={360}
      height={236}
      layout='responsive'
      alt='Card image'
      className='card-img-top'
    />
    <Card.Body>
      <Card.Title as='h5'>Dark card title</Card.Title>
      <Card.Text className='fs-sm'>
        This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
      </Card.Text>
    </Card.Body>
    <Card.Footer className='fs-xs text-muted'>Last updated 3 mins ago</Card.Footer>
  </Card>
</CardGroup>