Skip Navigation
React Magma

Card

The Card component is a relatively simple container. It does not have any margin or padding. The CardBody component can be placed inside, and will give the content padding.

Basic Usage

import React from 'react';


import { Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Card>
      <CardBody>Some content</CardBody>
    </Card>
  );
}

Heading

Any content can be included in a card. To maintain a consistent heading style, the CardHeading component may be used. By default, the heading will render as an h4, however you may use the headingLevel prop to change that to a different level heading. The heading will always render with the same style, no matter what heading level is used.

import React from 'react';


import { Card, CardBody, CardHeading } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Card>
        <CardBody>
          <CardHeading>Card Heading Level 4 (default)</CardHeading>
          Some content
        </CardBody>
      </Card>
      <br />
      <Card>
        <CardBody>
          <CardHeading headingLevel={5}>Card Heading Level 5</CardHeading>
          Some content
        </CardBody>
      </Card>
    </>
  );
}

Drop Shadow

Passing in the hasDropShadow prop will cause the Card component to render with a box-shadow.

import React from 'react';


import { Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Card hasDropShadow>
      <CardBody>Some content</CardBody>
    </Card>
  );
}

Alignment

By default, content aligns to the left. However, the align prop can be specified, and it takes values center, left, and right.

import React from 'react';


import { Card, CardAlignment, CardBody, CardHeading } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Card align={CardAlignment.right}>
        <CardBody>
          <CardHeading>Card Heading</CardHeading>
          Some content
        </CardBody>
      </Card>
      <br />
      <Card align={CardAlignment.center}>
        <CardBody>
          <CardHeading>Card Heading</CardHeading>
          Some content
        </CardBody>
      </Card>
    </>
  );
}

Callout Type

The cardCalloutType prop takes values danger, info, primary, success and warning. If this prop is specified, the card will be styled with a left border of the appropriate color.

import React from 'react';


import { Card, CardBody, CardCalloutType, CardHeading } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Card calloutType={CardCalloutType.danger}>
        <CardBody>
          <CardHeading>Card Heading</CardHeading>
          Some content
        </CardBody>
      </Card>
      <br />
      <Card calloutType={CardCalloutType.info}>
        <CardBody>
          <CardHeading>Card Heading</CardHeading>
          Some content
        </CardBody>
      </Card>
      <br />
      <Card calloutType={CardCalloutType.primary}>
        <CardBody>
          <CardHeading>Card Heading</CardHeading>
          Some content
        </CardBody>
      </Card>
      <br />
      <Card calloutType={CardCalloutType.success}>
        <CardBody>
          <CardHeading>Card Heading</CardHeading>
          Some content
        </CardBody>
      </Card>
      <br />
      <Card calloutType={CardCalloutType.warning}>
        <CardBody>
          <CardHeading>Card Heading</CardHeading>
          Some content
        </CardBody>
      </Card>
    </>
  );
}

Width

By default, the card width is set to auto, but you can pass in another value to be set in the CSS. The width prop can either be a string or a number. If a number is provided, then pixels will be used for the unit.

import React from 'react';


import { Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Card width={200}>
        <CardBody>Some content 200px wide</CardBody>
      </Card>
      <br />
      <Card width="50%">
        <CardBody>Some content 50% wide</CardBody>
      </Card>
    </>
  );
}

Image in Card

To get an image to take up the full width of a card, without padding, place it outside of the CardBody component.

import React from 'react';


import { Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Card width="250px">
      <img
        height="125"
        width="250"
        src="https://placekitten.com/250/125"
        alt="cat"
      />
      <CardBody>Some content</CardBody>
    </Card>
  );
}

Background and Inverse

A string for a background color may be passed in using the background prop.

The default background color is magma.colors.neutral100 (white) or magma.colors.primary600 (dark blue) for inverse cards.

The isInverse boolean prop can also be used with other dark backgrounds to render content in a light color.

import React from 'react';


import { Card, CardBody, CardHeading, magma } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Card isInverse>
        <CardBody>
          <CardHeading>Card Heading</CardHeading>
          Some content
        </CardBody>
      </Card>


      <br />


      <Card background={magma.colors.neutral200} isInverse={false}>
        <CardBody>
          <CardHeading>Card Heading</CardHeading>
          Some content
        </CardBody>
      </Card>


      <br />


      <Card background={magma.colors.success} isInverse>
        <CardBody>
          <CardHeading>Card Heading</CardHeading>
          Some content
        </CardBody>
      </Card>
    </>
  );
}

Card Props

This component uses forwardRef. The ref is applied to the Card div element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping div element that gets rendered.

align

Description

Sets the alignment of the card content

Type

enum, one of:
CardAlignment.center
CardAlignment.left
CardAlignment.right

Default

CardAlignment.left

background

Description

Color for the background and border-color, set by CSS.

Type

string

Default

-

calloutType

Description

If a value is passed, the card will be styled as a callout for the specified type.

Type

enum, one of:
CardCalloutType.danger
CardCalloutType.info
CardCalloutType.primary
CardCalloutType.success
CardCalloutType.warning

Default

none

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

hasDropShadow

Description

If true, card will render with a box-shadow

Type

boolean

Default

false

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

width

Description

Width of the component, set by CSS.

Type

string | number

Default

-

Card Heading Props

Any other props supplied will be provided to the heading element.

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

headingLevel

Description

Number to indicate which level heading will render (e.g. h1, h2 etc.)

Type

1 | 2 | 3 | 4 | 5 | 6

Default

4

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

Card Body Props

Any other props supplied will be provided to the wrapping div element.

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

On this page

Deploys by Netlify