From 470b1931e50daf0c716a618a32637382bd5415b7 Mon Sep 17 00:00:00 2001 From: marionnegp Date: Tue, 25 Jun 2024 16:53:55 -0400 Subject: [PATCH 01/12] docs(card): update Color section --- elements/rh-card/docs/10-style.md | 40 +++++++++++++++++-------------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index 38b1deb1fa..ac31ab5878 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -43,39 +43,43 @@ the background it's placed on.
- - 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 light gray card without a border can also be used as an alternate option.
- - 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.
+
From 54a52805f8b8777c334ff2fefd96e7148e5e374d Mon Sep 17 00:00:00 2001 From: marionnegp Date: Wed, 26 Jun 2024 15:16:53 -0400 Subject: [PATCH 02/12] docs: add margin between rh-card in a figure and the caption --- docs/styles/styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/styles/styles.css b/docs/styles/styles.css index 6469f77564..16c52d51fb 100644 --- a/docs/styles/styles.css +++ b/docs/styles/styles.css @@ -223,6 +223,10 @@ figcaption + uxdot-example { margin-block: var(--rh-space-xl); } + + figure rh-card + figcaption { + margin-block-start: var(--rh-space-xl, 24px); + } } @layer patterns { From 8a4dca79e46121fb00309788693a627431f38a5d Mon Sep 17 00:00:00 2001 From: marionnegp Date: Wed, 26 Jun 2024 16:13:39 -0400 Subject: [PATCH 03/12] docs(card): update copy for Theme sections and update Theme images --- elements/rh-card/docs/10-style.md | 12 +-- elements/rh-card/docs/card-theme-dark.svg | 91 ++++++++-------------- elements/rh-card/docs/card-theme-light.svg | 89 ++++++++------------- 3 files changed, 74 insertions(+), 118 deletions(-) diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index ac31ab5878..bac46128e2 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -23,23 +23,23 @@ elements and styles can be placed inside. ## Theme +All card variants are available in light and dark theme. + +### Light theme Card in light theme +### 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.
diff --git a/elements/rh-card/docs/card-theme-dark.svg b/elements/rh-card/docs/card-theme-dark.svg index 33ca20c1e5..4b095c0bc7 100644 --- a/elements/rh-card/docs/card-theme-dark.svg +++ b/elements/rh-card/docs/card-theme-dark.svg @@ -1,58 +1,35 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-card/docs/card-theme-light.svg b/elements/rh-card/docs/card-theme-light.svg index 9f4164b1c4..2252a7b353 100644 --- a/elements/rh-card/docs/card-theme-light.svg +++ b/elements/rh-card/docs/card-theme-light.svg @@ -1,56 +1,35 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From ee679c9efd18af023877a574546004d7ee81b778 Mon Sep 17 00:00:00 2001 From: marionnegp Date: Wed, 26 Jun 2024 16:19:37 -0400 Subject: [PATCH 04/12] docs(card): update dark theme card image --- elements/rh-card/docs/card-theme-dark.svg | 1 + 1 file changed, 1 insertion(+) diff --git a/elements/rh-card/docs/card-theme-dark.svg b/elements/rh-card/docs/card-theme-dark.svg index 4b095c0bc7..0965e54134 100644 --- a/elements/rh-card/docs/card-theme-dark.svg +++ b/elements/rh-card/docs/card-theme-dark.svg @@ -2,6 +2,7 @@ + From 1dfea43697ddcfaa29929f2dd09ac9af254cc34e Mon Sep 17 00:00:00 2001 From: marionnegp Date: Thu, 27 Jun 2024 10:17:07 -0400 Subject: [PATCH 05/12] docs(card): fix incorrect black color in dark theme image --- elements/rh-card/docs/card-theme-dark.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/rh-card/docs/card-theme-dark.svg b/elements/rh-card/docs/card-theme-dark.svg index 0965e54134..0c8f6ccd18 100644 --- a/elements/rh-card/docs/card-theme-dark.svg +++ b/elements/rh-card/docs/card-theme-dark.svg @@ -1,8 +1,8 @@ - - + + From 6e6d42f5cc6e20cdbd772747f8c88d0c51d390c5 Mon Sep 17 00:00:00 2001 From: marionnegp Date: Thu, 27 Jun 2024 10:23:58 -0400 Subject: [PATCH 06/12] docs(card): fix thumbnail bg color in light theme card image --- elements/rh-card/docs/card-theme-light.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-card/docs/card-theme-light.svg b/elements/rh-card/docs/card-theme-light.svg index 2252a7b353..f230b608fa 100644 --- a/elements/rh-card/docs/card-theme-light.svg +++ b/elements/rh-card/docs/card-theme-light.svg @@ -1,7 +1,7 @@ - + From f4db6edfb30700ff7b47cfc199024a08786fb9fe Mon Sep 17 00:00:00 2001 From: marionnegp Date: Thu, 27 Jun 2024 21:28:42 -0400 Subject: [PATCH 07/12] docs(card): add color-palette attribute to parent element for card examples --- elements/rh-card/docs/10-style.md | 43 +++++++++++++++++-------------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index bac46128e2..477e03d103 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -43,46 +43,51 @@ Cards are secondary layouts that shouldn’t command too much attention and blen
- -

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

- Call to action - + + +

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.
- -

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

- Call to action - + + +

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 with a light gray border can also be used as an alternate option.
- -

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

- Call to action - + + +

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.
-
- -

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

- Call to action - + + +

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 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 From 9cb590dacdee1d557070519ae58a35772b3788fe Mon Sep 17 00:00:00 2001 From: marionnegp Date: Thu, 27 Jun 2024 21:39:00 -0400 Subject: [PATCH 08/12] docs(card): change one dark color palette to use dark alt surface color --- elements/rh-card/docs/10-style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index 477e03d103..f97b353451 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -77,7 +77,7 @@ Cards are secondary layouts that shouldn’t command too much attention and blen
- +

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

Call to action From cac6cf5be068d574bf584f18ece3d5421056b65c Mon Sep 17 00:00:00 2001 From: marionnegp Date: Thu, 27 Jun 2024 21:45:09 -0400 Subject: [PATCH 09/12] Revert "docs(card): change one dark color palette to use dark alt surface color" This reverts commit 0e3654c0914c4d56c6cf0cd5e6715c768ce05c28. --- elements/rh-card/docs/10-style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index f97b353451..477e03d103 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -77,7 +77,7 @@ Cards are secondary layouts that shouldn’t command too much attention and blen
- +

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

Call to action From 11fa66951ea0db5984bf96bc3f5a09a393ecf674 Mon Sep 17 00:00:00 2001 From: marionnegp Date: Fri, 28 Jun 2024 10:59:21 -0400 Subject: [PATCH 10/12] docs(card): Fix copy under white card example --- elements/rh-card/docs/10-style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index 477e03d103..6e388ac759 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -50,7 +50,7 @@ Cards are secondary layouts that shouldn’t command too much attention and blen
- A light gray card without a border can also be used as an alternate option. + A white card with a light gray border is the most common use case in the light theme.
From 0eb118495d6bc6bf6493bd223ed055abbd3e2d5b Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 19 Sep 2024 14:33:27 +0300 Subject: [PATCH 11/12] docs(card): move styles to card page --- docs/styles/styles.css | 4 ---- elements/rh-card/docs/10-style.md | 6 +++++- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/styles/styles.css b/docs/styles/styles.css index 16c52d51fb..6469f77564 100644 --- a/docs/styles/styles.css +++ b/docs/styles/styles.css @@ -223,10 +223,6 @@ figcaption + uxdot-example { margin-block: var(--rh-space-xl); } - - figure rh-card + figcaption { - margin-block-start: var(--rh-space-xl, 24px); - } } @layer patterns { diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index 6e388ac759..867455b61e 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -1,4 +1,4 @@ - From 5b635a67fa8cc15de632f1968e98fae8631859a9 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 19 Sep 2024 14:33:33 +0300 Subject: [PATCH 12/12] docs(card): remove url filters --- elements/rh-card/docs/10-style.md | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/elements/rh-card/docs/10-style.md b/elements/rh-card/docs/10-style.md index 867455b61e..36529d3c06 100644 --- a/elements/rh-card/docs/10-style.md +++ b/elements/rh-card/docs/10-style.md @@ -23,7 +23,7 @@ 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 @@ -32,18 +32,21 @@ 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, rounded corners, and a thin border. +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.
@@ -100,11 +103,11 @@ tall.
- Example of a card layout + Example of a card layout - Anatomy of a card layout + Anatomy of a card layout
@@ -125,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 @@ -135,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 @@ -158,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