diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index 38b1deb1fa..36529d3c06 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -1,4 +1,4 @@ - @@ -19,66 +23,78 @@ Cards can be used in light and dark themes. They act as a blank canvas where elements and styles can be placed inside. - A breakdown of the parts of a card + A breakdown of the parts of a card ## Theme +All card variants are available in light and dark theme. + +### Light theme - Card in light theme + Card in light theme +### Dark theme + - Card in dark theme + Card in dark theme ### Color -Cards are secondary layouts that shouldn’t command too much attention and -blend in with whatever background they’re placed on. The card container is the -only required element and it consists of a background color and rounded -corners. A thin border is required if the card background is the same color as -the background it's placed on. - +Cards are secondary layouts that shouldn’t command too much attention and blend +in with whatever background they’re placed on. The card container is the only +required element and it consists of a background color, rounded corners, and a +thin border.
- - White card colors + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

+ Call to action +
- A white card with a light gray border is the most common use case in the - light theme + A white card with a light gray border is the most common use case in the light theme.
- - Gray card colors + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

+ Call to action +
- A light gray card without a border can also be used as an alternate option + A light gray card with a light gray border can also be used as an alternate option.
- - Black card colors + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

+ Call to action +
- A black card with a dark gray border is the most common use case in the - dark theme + A black card with a dark gray border is the most common use case in the dark theme.
- - Dark theme gray card colors + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

+ Call to action +
- A dark gray card without a border can also be used as an alternate option + A dark gray card with a dark gray border can also be used as an alternate option.
- ### Layout A card features header, body, and footer sections. Those sections should @@ -87,11 +103,11 @@ tall.
- Example of a card layout + Example of a card layout - Anatomy of a card layout + Anatomy of a card layout
@@ -112,7 +128,6 @@ The footer section can include normal links or a call to action. It can be hidden if necessary if there’s content included where a user can take an action. - ## Responsive design ### Breakpoints @@ -122,13 +137,13 @@ Cards will get thinner or move below each other on smaller screens. ### Large screens - Card layout on desktop + Card layout on desktop ### Small screens - Card layout on mobile + Card layout on mobile ## Spacing @@ -145,18 +160,17 @@ Cards will get thinner or move below each other on smaller screens. Container padding defines how far away content is from the edges of the component. When cards become wider, the container padding increases. When they -become thinner, the container padding decreases. See more examples. +become thinner, the container padding decreases. ### Desktop - Card spacing on desktop + Card spacing on desktop ### Mobile - Card spacing on mobile + Card spacing on mobile diff --git a/elements/rh-card/docs/card-theme-dark.svg b/elements/rh-card/docs/card-theme-dark.svg index 33ca20c1e5..0c8f6ccd18 100644 --- a/elements/rh-card/docs/card-theme-dark.svg +++ b/elements/rh-card/docs/card-theme-dark.svg @@ -1,58 +1,36 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-card/docs/card-theme-light.svg b/elements/rh-card/docs/card-theme-light.svg index 9f4164b1c4..f230b608fa 100644 --- a/elements/rh-card/docs/card-theme-light.svg +++ b/elements/rh-card/docs/card-theme-light.svg @@ -1,56 +1,35 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +