Skip to content

Commit

Permalink
docs(card): link to patterns from guidelines
Browse files Browse the repository at this point in the history
  • Loading branch information
@bennypowers
bennypowers committed May 23, 2024
1 parent b8f5431 commit 3824798
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 114 deletions.
149 changes: 35 additions & 114 deletions docs/patterns/card/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,47 +6,46 @@ tags:
---

<script type="module">
import '@rhds/elements/rh-card/rh-card.js';
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
import '@rhds/elements/rh-cta/rh-cta.js';
</script>

<style>
rh-card {
display: grid;
max-width: 360px;
&.bar {
&::part(header) {
background-color: var(--_header-background-color);
text-transform: uppercase;
font-weight: var(--rh-font-weight-heading-regular, 300);
font-size: var(--rh-font-size-body-text-md, 1rem);
}
&.alt {
--rh-card-background-color: #f0f0f0;
&[color-palette^="light"] {
--rh-card-background-color: #f0f0f0;
}
&[color-palette^="dark"] {
--rh-card-background-color: #3c3f42;
}
}
&.full::part(header) {
padding-inline: 0;
padding-block: 0;
}
&.custom-light-theme {
--rh-color-border-subtle-on-light: #EF6461;
--rh-color-surface-lightest: #feeded;
--rh-color-text-primary-on-light: #30292F;
}
&.custom-dark-theme {
--rh-color-border-subtle-on-dark: #5e40be;
--rh-color-surface-darkest: #261a4c;
--rh-color-text-primary-on-dark: #e8e4f5;
}
&.bar::part(header) {
margin: 0;
text-transform: uppercase;
padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px);
background-color: var(--_header-bg, var(--rh-color-surface-light, #e0e0e0));
font-weight: var(--rh-font-weight-heading-regular, 300);
font-size: var(--rh-font-size-body-text-md, 1rem);
}
&.full::part(header) {
padding: 0;
}
&.alt {
--rh-color-surface-light: #f0f0f0;
--rh-color-surface-lighter: #f0f0f0;
--rh-color-surface-lightest: #f0f0f0;
--rh-color-surface-dark: #3c3f42;
--rh-color-surface-darker: #3c3f42;
--rh-color-surface-darkest: #3c3f42;
}
&.custom-light-theme {
--rh-color-border-subtle-on-light: #EF6461;
--rh-color-surface-lightest: #feeded;
--rh-color-text-primary-on-light: #30292F;
}
&.custom-dark-theme {
--rh-color-border-subtle-on-dark: #5e40be;
--rh-color-surface-darkest: #261a4c;
--rh-color-text-primary-on-dark: #e8e4f5;
}
}
</style>

## Overview

A card formats content in a small, contained space. It can be used to display a
Expand All @@ -59,34 +58,7 @@ it's near. Several cards can be used together to group related information.
information on how to use the card element.
{% endalert %}

## Sample pattern

<rh-card>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
elit sed est egestas, a sollicitudin mauris tincidunt. Pellentesque vel
dapibus risus. Nullam aliquam felis orci, eget cursus mi lacinia quis.
Vivamus at felis sem.</p>
<rh-cta variant="primary" slot="footer">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>

## Sample - Slotted Title

<rh-card>
<h2 slot="header">Headline, sm</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
elit sed est egestas, a sollicitudin mauris tincidunt. Pellentesque vel
dapibus risus. Nullam aliquam felis orci, eget cursus milacinia quis.
Vivamus at felis sem.
</p>
<rh-cta variant="primary" slot="footer">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>

## Sample - alternative color scheme
## Alternative color scheme

<rh-card class="alt">
<p>
Expand All @@ -101,22 +73,6 @@ it's near. Several cards can be used together to group related information.
</rh-cta>
</rh-card>

## Sample - title bar

<rh-card class="bar">
<h2 slot="header">Headline, sm</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
elit sed est egestas, a
sollicitudin mauris tincidunt. Pellentesque vel dapibus risus. Nullam
aliquam felis orci, eget cursus mi
lacinia quis. Vivamus at felis sem.
</p>
<rh-cta variant="primary" slot="footer">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>

## Title bar

<rh-card class="bar">
Expand All @@ -137,29 +93,7 @@ it's near. Several cards can be used together to group related information.
<rh-cta slot="footer"><a href="#">Footer</a></rh-cta>
</rh-card>

## Style

A card can be used in light and dark themes.

### Theme

<rh-card color-palette="light">
<h2 slot="header">Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
elit. Donec id elit non mi porta gravida at eget metus.</p>
<rh-cta slot="footer"><a href="#">Footer</a></rh-cta>
</rh-card>

<rh-card color-palette="dark">
<h2 slot="header">Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
elit. Donec id elit non mi porta gravida at eget metus.</p>
<rh-cta slot="footer"><a href="#">Footer</a></rh-cta>
</rh-card>

### Custom Theming
## Custom Theming

To customize a card the design tokens must be altered. These design tokens are different depending on the context for the card (light or dark theme).

Expand All @@ -171,8 +105,7 @@ Examples include:

For more information, please see the [card css custom properties](/elements/card/code/#css-custom-properties).


#### Custom Light Theme
### Custom Light Theme

<rh-card color-palette="light" class="custom-light-theme">
<h2 slot="header">Card title</h2>
Expand All @@ -182,7 +115,7 @@ For more information, please see the [card css custom properties](/elements/card
<rh-cta slot="footer"><a href="#">Footer</a></rh-cta>
</rh-card>

#### Custom Dark Theme
### Custom Dark Theme

<rh-card color-palette="dark" class="custom-dark-theme">
<h2 slot="header">Card title</h2>
Expand All @@ -195,17 +128,5 @@ For more information, please see the [card css custom properties](/elements/card
{% include 'feedback.html' %}


## Usage

### Character count
The recommended maximum character count for the elements of a card are listed below and include spaces.

| Element {style="width: 50%" } | Character count |
|-------------------------------|-----------------|
| Title | 20 |
| Headline | 50 |
| Body text | 165 |
| Footer | 55 |

[element]: /elements/card

5 changes: 5 additions & 0 deletions elements/rh-card/docs/20-guidelines.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
## Usage
### Variants

There are several card variants that can be used for a variety of use cases.

{% alert %}
For examples of how to implement these patterns, see the [card patterns page](/patterns/card).
{% endalert %}

- #### Basic
Use to display basic content or long paragraphs of text. Secondary and
Default calls to action may be used.
Expand Down

0 comments on commit 3824798

Please sign in to comment.