Skip to content

Commit

Permalink
docs(card): remove url filters
Browse files Browse the repository at this point in the history
  • Loading branch information
bennypowers committed Sep 19, 2024
1 parent 0eb1184 commit 5b635a6
Showing 1 changed file with 14 additions and 13 deletions.
27 changes: 14 additions & 13 deletions elements/rh-card/docs/10-style.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<uxdot-example width-adjustment="600px">
<img src="{{ '../card-style.svg' | url }}" alt="A breakdown of the parts of a card">
<img src="../card-style.svg" alt="A breakdown of the parts of a card">
</uxdot-example>

## Theme
Expand All @@ -32,18 +32,21 @@ All card variants are available in light and dark theme.
### Light theme

<uxdot-example width-adjustment="784px">
<img src="{{ '../card-theme-light.svg' | url }}" alt="Card in light theme">
<img src="../card-theme-light.svg" alt="Card in light theme">
</uxdot-example>

### Dark theme

<uxdot-example color-palette="darkest" width-adjustment="784px">
<img src="{{ '../card-theme-dark.svg' | url }}" alt="Card in dark theme">
<img src="../card-theme-dark.svg" alt="Card in dark theme">
</uxdot-example>

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

<div class="grid">
<figure>
Expand Down Expand Up @@ -100,11 +103,11 @@ tall.

<div class="grid">
<uxdot-example width-adjustment="360px">
<img src="{{ '../card-layout-1.svg' | url }}" alt="Example of a card layout">
<img src="../card-layout-1.svg" alt="Example of a card layout">
</uxdot-example>

<uxdot-example width-adjustment="360px">
<img src="{{ '../card-layout-2.svg' | url }}" alt="Anatomy of a card layout">
<img src="../card-layout-2.svg" alt="Anatomy of a card layout">
</uxdot-example>

</div>
Expand All @@ -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
Expand All @@ -135,13 +137,13 @@ Cards will get thinner or move below each other on smaller screens.
### Large screens

<uxdot-example width-adjustment="784px" variant="full" no-border alignment="left">
<img src="{{ '../card-layout-desktop.svg' | url }}" alt="Card layout on desktop">
<img src="../card-layout-desktop.svg" alt="Card layout on desktop">
</uxdot-example>

### Small screens

<uxdot-example width-adjustment="360px" variant="full" no-border alignment="left">
<img src="{{ '../card-layout-mobile.svg' | url }}" alt="Card layout on mobile">
<img src="../card-layout-mobile.svg" alt="Card layout on mobile">
</uxdot-example>

## Spacing
Expand All @@ -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. <a
href="https://xd.adobe.com/view/a337ad48-4c5a-4e75-aec1-cc0cfe52098d-f664/">See more examples</a>.
become thinner, the container padding decreases.

### Desktop

<uxdot-example width-adjustment="360px">
<img src="{{ '../card-spacing-desktop.svg' | url }}" alt="Card spacing on desktop">
<img src="../card-spacing-desktop.svg" alt="Card spacing on desktop">
</uxdot-example>


### Mobile

<uxdot-example width-adjustment="360px">
<img src="{{ '../card-spacing-mobile.svg' | url }}" alt="Card spacing on mobile">
<img src="../card-spacing-mobile.svg" alt="Card spacing on mobile">
</uxdot-example>

0 comments on commit 5b635a6

Please sign in to comment.