Skip to content

Commit

Permalink
docs(card): elaborate on patterns
Browse files Browse the repository at this point in the history
  • Loading branch information
@bennypowers
bennypowers committed May 29, 2024
1 parent 3824798 commit 761a991
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 129 deletions.
257 changes: 188 additions & 69 deletions docs/patterns/card/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,39 +11,9 @@ tags:
</script>

<style>
rh-card {
display: grid;
max-width: 360px;
&.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;
}
}
.element-docs .card-patterns copy-permalink.h3 {
margin-block-start: 0;
}
</style>

## Overview
Expand All @@ -58,40 +28,164 @@ it's near. Several cards can be used together to group related information.
information on how to use the card element.
{% endalert %}

## Alternative color scheme

<rh-card class="alt">
<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">
<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 variant="primary" slot="footer"><a href="#">Footer</a></rh-cta>
</rh-card>

## Image title bar

<rh-card class="bar full">
<img src="./kitten-900x300.jpeg" slot="header">
<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>
## Patterns

<section class="multi-column--min-400-wide card-patterns">

<div>

### Alternative color scheme

<style>
rh-card.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;
}
</style>

<rh-card class="alt">

Card's color scheme can be modified using the `--rh-color-surface-*`
Tokens. However, before modifying design tokens, first determine if one of
card's [existing color palettes](/elements/card/code/#attributes) should be used instead.

{#
Read more about color palettes and themes in the
[getting started](/get-started/color/) section.
#}

<rh-cta variant="primary" slot="footer">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>

</div><div>

### Image title bar

<style>
rh-card.image::part(header) {
padding: 0;
margin: 0;
}
</style>

<rh-card class="image">
<img src="./kitten-900x300.jpeg" slot="header">
<p>Use to add an image to the basic style above the text.
Secondary and Default calls to action may be used.</p>
<rh-cta slot="footer" variant="secondary">
<a href="#">Footer</a>
</rh-cta>
</rh-card>

</div><div>

### List
Use to display a short amount of content using various list styles.
Secondary and Default calls to action may be used.

</div><div>

### Data
Use to display quick facts or short data points under a label. A Secondary
call to action may be used or not.

</div><div>

### Logo
Use to display a customer logo in a variety of arrangements. A call to
action is required, otherwise use a logo wall.

</div><div>

### Bar

<style>
rh-card.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);
flex-direction: row;
gap: var(--rh-space-lg);
}
</style>

<rh-card class="bar">
{# <rh-icon slot="header" set="ui" icon="information"></rh-icon> #}
<svg slot="header" width="var(--rh-size-icon-02)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M16 0C7.178 0 0 7.178 0 16s7.178 16 16 16 16-7.178 16-16S24.822 0 16 0Zm1.25 23a1.25 1.25 0 1 1-2.5 0v-8a1.25 1.25 0 1 1 2.5 0v8ZM16 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z"></path>
</svg>
<h2 slot="header">Card title</h2>

Use to add a small icon and a label group to the header section. A larger
icon or a logo may be used.

Alternative title bar styles can be achieved by selecting [card's `header` CSS
Shadow Part](/elements/card/code/#parts).

<rh-cta variant="primary" slot="footer">
<a href="#">Footer</a>
</rh-cta>
</rh-card>

</div><div>

### Icon
Use to add an icon to the basic style above the text. Secondary and Default
calls to action may be used.

</div><div>

### Asset
Use to display that an asset can be downloaded. An icon and label group or
text may be used to describe the asset.

</div><div>

### Quote
Use to display a short quote with attribution text. Logos, images, and a
Secondary call to action may be used or not.

</div><div>

### Avatars
Use to highlight a group of people who engage in an event. A label should be
included, but including text is optional.

</div><div>

### Video
Use to trigger a video that will play in a [Modal dialog](/elements/dialog).
Different layout configurations may be used.

</div><div>

### Pricing
Use to outline the pricing and benefits of something. Elements may be
removed or rearranged depending on content needs.

</div><div>

### Logo slider
Use to display more content about a company when expanded on hover or tap. A
title and text should be included.

</div><div>

### Name slider
Use to display more content about a person when the tray expands. A title
and text should be included.

</div>
</section>

## Custom Theming

Expand All @@ -105,7 +199,19 @@ Examples include:

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

### Custom Light Theme
<section class="multi-column--min-400-wide card-patterns">

<div>

### Custom Light Theme

<style>
rh-card.custom-light-theme {
--rh-color-border-subtle-on-light: #EF6461;
--rh-color-surface-lightest: #feeded;
--rh-color-text-primary-on-light: #30292F;
}
</style>

<rh-card color-palette="light" class="custom-light-theme">
<h2 slot="header">Card title</h2>
Expand All @@ -115,7 +221,17 @@ 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
</div><div>

### Custom Dark Theme

<style>
rh-card.custom-dark-theme {
--rh-color-border-subtle-on-dark: #5e40be;
--rh-color-surface-darkest: #261a4c;
--rh-color-text-primary-on-dark: #e8e4f5;
}
</style>

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

</div>
</section>

{% include 'feedback.html' %}


Expand Down
64 changes: 4 additions & 60 deletions elements/rh-card/docs/20-guidelines.md
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,13 @@
## Usage
### Variants

There are several card variants that can be used for a variety of use cases.
Cards are used to display basic content or long paragraphs of text. Secondary and
Default calls to action may be used.

{% alert %}
For examples of how to implement these patterns, see the [card patterns page](/patterns/card).
For examples of patterns which use or modify Card,
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.

- #### List
Use to display a short amount of content using various list styles.
Secondary and Default calls to action may be used.

- #### Data
Use to display quick facts or short data points under a label. A Secondary
call to action may be used or not.

- #### Logo
Use to display a customer logo in a variety of arrangements. A call to
action is required, otherwise use a logo wall.

- #### Bar
Use to add a small icon and a label group to the header section. A larger
icon or a logo may be used.

- #### Icon
Use to add an icon to the basic style above the text. Secondary and Default
calls to action may be used.

- #### Image
Use to add an image to the basic style above the text. Secondary and Default
calls to action may be used.

- #### Asset
Use to display that an asset can be downloaded. An icon and label group or
text may be used to describe the asset.

- #### Quote
Use to display a short quote with attribution text. Logos, images, and a
Secondary call to action may be used or not.

- #### Avatars
Use to highlight a group of people who engage in an event. A label should be
included, but including text is optional.

- #### Video
Use to trigger a video that will play in a [Modal dialog]({{
'/elements/dialog' }}). Different layout configurations may be used.

- #### Pricing
Use to outline the pricing and benefits of something. Elements may be
removed or rearranged depending on content needs.

- #### Logo slider
Use to display more content about a company when expanded on hover or tap. A
title and text should be included.

- #### Name slider
Use to display more content about a person when the tray expands. A title
and text should be included.
{.multi-column--min-400-wide style="padding:0;list-style-type:none;margin-block:var(--rh-space-2xl) var(--rh-space-4xl);"}

### Content
Cards have the potential to contain lots of content, like a combination of
text, links, images, multimedia, etc. Ensure content serves the use case, but
Expand Down

0 comments on commit 761a991

Please sign in to comment.