Small changes in card readme
Javi Velasco
parent
ca48169305
commit
f2738a0e11
|
|
@ -1,6 +1,8 @@
|
|||
# Card
|
||||
|
||||
A [card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
|
||||
A [Card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
|
||||
|
||||
Cards are composed of multiple subcomponents in React Toolbox. You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
|
||||
|
||||
<!-- example -->
|
||||
```jsx
|
||||
|
|
@ -36,7 +38,8 @@ return <TestCards />;
|
|||
|
||||
<!--component-docgen-start-->
|
||||
|
||||
## Card `<Card/>`
|
||||
## Card
|
||||
|
||||
The base card component. This acts as the main card container
|
||||
that all subcomponents are placed within.
|
||||
|
||||
|
|
@ -47,52 +50,7 @@ that all subcomponents are placed within.
|
|||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
| `raised` | `bool` | | Increases the shadow depth to appear elevated. |
|
||||
|
||||
------------------------------------------------------------------
|
||||
|
||||
## CardActions `<CardActions/>`
|
||||
This component is used as a container for supplemental
|
||||
card actions. Supplemental actions within the card are
|
||||
explicitly called out using icons, text, and UI controls,
|
||||
typically placed at the bottom of the card.
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `children` | `any` | | Children to pass through the component. |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
------------------------------------------------------------------
|
||||
|
||||
## CardMedia `<CardMedia/>`
|
||||
Used for displaying media such as images or videos
|
||||
on a card. Can also be used with a solid background
|
||||
color instead of an image.
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `aspectRatio` | `enum`(`'wide'`,`'square'`) | | Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height. |
|
||||
| `children` | `any` | | Usually an image/video element or a `<CardTitle>` component. |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
| `color` | `string` | | Sets the background color |
|
||||
| `contentOverlay` | `bool` | | Creates a dark overlay underneath the child components. |
|
||||
| `image` | `union`(`string`,`element`) | | Can be used instead of children. Accepts an element or a URL string. |
|
||||
|
||||
------------------------------------------------------------------
|
||||
|
||||
## CardText `<CardText/>`
|
||||
Basic card content container. Good for
|
||||
small descriptions or other supplementary text.
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `children` | `any` | | Children to pass through the component. |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
------------------------------------------------------------------
|
||||
|
||||
## CardTitle `<CardTitle/>`
|
||||
## CardTitle
|
||||
A versatile title block that can be used in
|
||||
various places on the card, including the media
|
||||
area. This component can also display an avatar next
|
||||
|
|
@ -107,5 +65,41 @@ to the title content.
|
|||
| `subtitle` | `string` | | |
|
||||
| `title` | `string` | | |
|
||||
|
||||
------------------------------------------------------------------
|
||||
## CardMedia
|
||||
|
||||
Used for displaying media such as images or videos
|
||||
on a card. Can also be used with a solid background
|
||||
color instead of an image.
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `aspectRatio` | `enum`(`'wide'`,`'square'`) | | Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height. |
|
||||
| `children` | `any` | | Usually an image/video element or a `<CardTitle>` component. |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
| `color` | `string` | | Sets the background color |
|
||||
| `contentOverlay` | `bool` | | Creates a dark overlay underneath the child components. |
|
||||
| `image` | `union`(`string`,`element`) | | Can be used instead of children. Accepts an element or a URL string. |
|
||||
|
||||
## CardText
|
||||
Basic card content container. Good for
|
||||
small descriptions or other supplementary text.
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `children` | `any` | | Children to pass through the component. |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
## CardActions
|
||||
|
||||
This component is used as a container for supplemental
|
||||
card actions. Supplemental actions within the card are
|
||||
explicitly called out using icons, text, and UI controls,
|
||||
typically placed at the bottom of the card.
|
||||
|
||||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `children` | `any` | | Children to pass through the component. |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
|
|
|||
Loading…
Reference in New Issue