Skip to main content
react-md
react-md - Card - SassDoc

Variables

rmd-card-elevation

Number

The elevation to use for cards that are not raisable.

$rmd-card-elevation: 2 !default;

rmd-card-light-background-color

Since v2.7.0

Color

The background color for a card in light themes.

$rmd-card-light-background-color: rmd-theme-var(surface) !default;

rmd-card-dark-elevation-background-color

Since v2.7.0

Color

The background color for a card in dark themes when the $rmd-theme-dark-elevation feature flag is also enabled.

$rmd-card-dark-elevation-background-color: map-get(
  $rmd-theme-dark-elevation-colors,
  $rmd-card-elevation
);
See also

rmd-card-dark-background-color

Since v2.7.0

Color

The background color for a card in dark themes.

$rmd-card-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-card-dark-elevation-background-color,
  $rmd-card-dark-elevation-background-color,
  rmd-theme-var(surface)
) !default;

rmd-card-background-color

Color

The base background color to apply to cards.

$rmd-card-background-color: if(
  $rmd-theme-light,
  $rmd-card-light-background-color,
  $rmd-card-dark-background-color
) !default;

rmd-card-color

Color

The base primary text color to apply to cards.

$rmd-card-color: rmd-theme-var(on-surface) !default;

rmd-card-secondary-color

Color

The base secondary text color to apply to cards. The CardSubtitle and CardContent components will use this color by default unless the disableSecondaryColor prop is enabled.

$rmd-card-secondary-color: if(
  rmd-theme-tone($rmd-theme-surface) == light,
  rmd-theme-var(text-primary-on-light),
  rmd-theme-var(text-primary-on-dark)
) !default;

rmd-card-base-elevation

Number

The starting elevation for a raisable card.

$rmd-card-base-elevation: 1 !default;

rmd-card-raised-elevation

Number

The ending elevation for a raisable card.

$rmd-card-raised-elevation: 8 !default;

rmd-card-border-radius

Number

The border radius to apply to cards.

$rmd-card-border-radius: 0.25rem !default;

rmd-card-header-padding

Number

The amount of padding to apply to the CardHeader component.

$rmd-card-header-padding: 1rem !default;

rmd-card-header-padding-top

Number

Any extra amount of padding to apply to the top of the CardHeader component. This is really just added since it looks a bit nicer to have extra padding top.

$rmd-card-header-padding-top: 1.5rem !default;

rmd-card-header-spacing

Number

The amount of spacing to use between the main content in the header and the beforeChildren and afterChildren props. This really gets used with the TextIconSpacing component from the @react-md/icon package

$rmd-card-header-spacing: 1rem !default;

rmd-card-content-padding

Number

The amount of padding to apply to the CardContent component.

$rmd-card-content-padding: 1rem !default;

rmd-card-content-padding-extra

Number

When the CardContent component is the last child in the Card, it normally looks a bit nicer to apply a bit more padding to it. So this is the extra padding-bottom that will be applied in that case.

$rmd-card-content-padding-extra: 1.5rem !default;

rmd-card-actions-padding

Number

The amount of padding to apply to the CardActions component.

$rmd-card-actions-padding: 0.5rem !default;

rmd-card-border-color

Color|String

The border color for a bordered card.

$rmd-card-border-color: rmd-divider-theme-var(background-color) !default;

rmd-card-border-width

Number

The width for a bordered card.

$rmd-card-border-width: $rmd-divider-size !default;

rmd-card-theme-values

Map

A Map of all the "themeable" parts of the card package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.

$rmd-card-theme-values: (
  background-color: $rmd-card-background-color,
  color: $rmd-card-color,
  secondary-color: $rmd-card-secondary-color,
) !default;

Mixins

rmd-card-theme

mixin

Creates the styles for one of the card's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-card-theme-values value to.

String
$theme-style

One of the keys of rmd-card-theme-values to extract a value from.

String
$fallback

A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the rmd-card-theme-values map when null.

Color|String|Numbernull

rmd-card-theme-update-var

mixin

Updates one of the card's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The card theme style type to update. This should be one of the $rmd-card-theme-values keys.

String
$value

The new value to use.

Color|String|Number

rmd-card

mixin

Creates all the styles for the Card component only. You'll need to use this within a selector.

rmd-card-header

mixin

Creates all the styles for the CardHeader component. You'll need to use this within a selector.

rmd-card-title

mixin

Creates all the styles for the CardTitle component. You'll need to use this within a selector.

rmd-card-subtitle

mixin

Creates all the styles for the CardSubtitle component. You'll need to use this within a selector.

rmd-card-content

mixin

Creates all the styles for the CardContent component. You'll need to use this within a selector.

rmd-card-actions

mixin

Creates all the styles for the CardActions component. You'll need to use this within a selector.

react-md-card

mixin

Creates all the styles for the @react-md/card package.

Functions

rmd-card-theme

function

This function is used to quickly get one of the card's theme values. This is really just for the rmd-card-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — Color|String|Number

one of the card's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-card-theme-values map keys to get a value for.

String

rmd-card-theme-var

function

This function is used to get one of the card's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-card-theme-values

This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.

Returns — String

one of the card's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-card-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull