@materialr/card NPM

MaterialR Card

Material card implementation for React

$ npm install --save @materialr/card

A full demo is available on the MaterialR website showcasing all variants.

import { ActionButton } from '@materialr/card';

Props

Prop	Type	Required	Default	Description
`children`	node	Yes	N/A	The child elements to render inside the action button
`className`	string	No	undefined	Additional classNames to add
`disabled`	bool	No	false	Whether the action button is disabled
`onClick`	func	No	undefined	The `click` handler method
`ripple`	bool	No	false	Whether the action button has a ripple enabled

import { ActionButtons } from '@materialr/card';

Props

Prop	Type	Required	Default	Description
`children`	node	Yes	N/A	The child elements to render inside the action buttons
`className`	string	No	undefined	Additional classNames to add

import { ActionIcon } from '@materialr/card';

Props

Prop	Type	Required	Default	Description
`className`	string	No	undefined	Additional classNames to add
`icon`	string	Yes	N/A	The material icon to render
`title`	string	No	undefined	The title attribute for the icon

import { ActionIcons } from '@materialr/card';

Props

Prop	Type	Required	Default	Description
`children`	node	Yes	N/A	The child elements to render inside the action icons
`className`	string	No	undefined	Additional classNames to add

import { ActionIconToggle } from '@materialr/icon-toggle';

Props

Prop	Type	Required	Default	Description
`className`	string	No	undefined	Additional classNames to add
`disabled`	bool	No	false	Whether the icon-toggle is disabled
`iconOff`	string	Yes	N/A	The material icon to render for the off state
`iconOn`	string	Yes	N/A	The material icon to render for the on state
`labelOff`	string	Yes	N/A	The title to add to the icon-toggle in the off state
`labelOn`	string	Yes	N/A	The title to add to the icon-toggle in the on state
`onChange`	func	Yes	N/A	The change handler method

import { Actions } from '@materialr/card';

Props

Prop	Type	Required	Default	Description
`children`	node	Yes	N/A	The child elements to render inside the action icons
`className`	string	No	undefined	Additional classNames to add
`fullBleed`	bool	No	false	Whether to render a full width action

import { Card } from '@materialr/card';

Props

Prop	Type	Required	Default	Description
`children`	node	Yes	N/A	The child elements to render inside the action icons
`className`	string	No	undefined	Additional classNames to add
`outlined`	bool	No	false	Whether to render an outlined card

import { MediaContent } from '@materialr/card';

Props

Prop	Type	Required	Default	Description
`children`	node	Yes	N/A	The child elements to render inside the media content
`className`	string	No	undefined	Additional classNames to add

import { Media, MEDIA_ASPECT_RATIO_1_1, MEDIA_ASPECT_RATIO_16_9 } from '@materialr/card';

Props

Prop	Type	Required	Default	Description
`aspectRatio`	enum (`MEDIA_ASPECT_RATIO_1_1`/`MEDIA_ASPECT_RATIO_16_9`)	No	`MEDIA_ASPECT_RATIO_16_9`	The aspect ratio of the media
`children`	node	Yes	N/A	The child elements to render
`className`	string	No	undefined	Additional classNames to add