Skip to content

#Card

Isolate or draw focus to content with the Card.

Card is a generic container for text and image content with elevation to separate and draw attention to itself. Group related elements within the Card.

Sample card

This is a sample card.

#Related

#Usage

Import the Card component into a React component in your project

import {Card} from 'hello-next-js'
import React from 'react'
import {Card} from 'hello-next-js'
export const MyComponent: React.FC<any> = () => {
  return (
    <Card>
      <h1 className="f3 lh-title mb1 mt0">Sample card</h1>
      <p className="mv0">This is a sample card.</p>
    </Card>
  )
}

#Elevation

The Card's elevation can be modifed with the elevation property:

Sample card

This is a sample card.

#Accessibility

Card is a simple container, and has no accessibility concerns.

#Component API

#Props

NameTypeDefaultDescriptionRequired
elevationCardElevation 1The elevation of the card.

#Methods

No methods found