Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cards : fix design + add design callout messages #2001

Closed
wants to merge 6 commits into from
Closed

Cards : fix design + add design callout messages #2001

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
524e9a1
Add all design callout messages.
isabellechanclou Apr 18, 2023
efcf2ea
Add informational design callout message in the About section.
isabellechanclou Apr 18, 2023
fbd2d48
Fixes after code review
isabellechanclou May 9, 2023
f2cd85c
Merge branch 'main' into main-ic-fix-card-component-design
isabellechanclou May 12, 2023
585532a
Merge branch 'main' into main-ic-fix-card-component-design
louismaximepiton Jan 4, 2024
9e033e9
Proposal
louismaximepiton Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 73 additions & 8 deletions site/content/docs/5.3/components/card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,18 @@ toc: true

A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you're familiar with Boosted 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

{{< design-callout-alert info >}}
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
**On the Orange Design System website**, you'll find the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) component guidelines describing how Orange designers want cards to be represented and used.
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
<br><br>
**In this Boosted cards component description page**, you'll find card variants that can be used as cards as well as some variants that are meant to be used as containers.
<br><br>
Regarding the available card sizes, please note that:

- **In the Orange Design System**, a card component is available in **3 sizes** that **can not be modified**. Depending on the size of your screen, you can adjust the cards layout by changing the cards size (choosing among the 3 existing sizes) and/or the number of cards to display on a single line.
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved

- **In Boosted**, as some card variants can be used as containers, more sizing possibilities are offered to adjust their sizes.
{{< /design-callout-alert >}}
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved

## Example

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Boosted components. They have no `margin` by default, so use [spacing utilities]({{< docsref "/utilities/spacing" >}}) as needed.
Expand Down Expand Up @@ -183,6 +195,12 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
</div>
{{< /example >}}

{{< design-callout-alert >}}
This variant with its **centered layout** should not be used because it does not respect the Orange Design System specifications.
Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) guidelines on the Orange Design System website.
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
{{< /design-callout-alert >}}


louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
{{< example >}}
<div class="card text-center">
<div class="card-header">
Expand Down Expand Up @@ -270,6 +288,12 @@ Use custom CSS in your stylesheets or as inline styles to set a width.

You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{< docsref "/utilities/text#text-alignment" >}}).

{{< design-callout-alert >}}
These second and third variants, **with centered and right-aligned layout**, should not be used because they do not respect the Orange Design System specifications.

Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) guidelines on the Orange Design System website.
{{< /design-callout-alert >}}

{{< example >}}
<div class="card mb-3" style="width: 18rem;">
<div class="card-body">
Expand Down Expand Up @@ -300,6 +324,12 @@ You can quickly change the text alignment of any card—in its entirety or speci

Add some navigation to a card's header (or block) with Boosted's [nav components]({{< docsref "/components/navs-tabs" >}}).

{{< design-callout-alert >}}
These variants should not be used because they do not respect the Orange Design System specifications.

Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) guidelines on the Orange Design System website.
{{< /design-callout-alert >}}

{{< example >}}
<div class="card text-center">
<div class="card-header bg-white">
Expand Down Expand Up @@ -377,6 +407,12 @@ Similar to headers and footers, cards can include top and bottom "image caps"—

Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.

{{< design-callout-alert >}}
This variant should not be used because it does not respect the Orange Design System specifications. Moreover, it might lead to accessibility issues. Instead, prefer using a card that includes a top image.

Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) guidelines on the Orange Design System website.
{{< /design-callout-alert >}}

{{< example >}}
<div class="card text-bg-dark">
{{< placeholder width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" background="#000" >}}
Expand Down Expand Up @@ -423,6 +459,12 @@ Cards include various options for customizing their backgrounds, borders, and co

Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.

{{< design-callout-alert >}}
These variants **with a colored background** should not be used because they do not respect the Orange Design System specifications.
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved

Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) guidelines on the Orange Design System website.
{{< /design-callout-alert >}}

{{< example >}}
{{< card.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
Expand All @@ -445,33 +487,50 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg

Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.

<!-- Boosted mod -->
{{< example >}}
{{< card.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="card border-{{ .name }} mb-3" style="max-width: 18rem;">
<div class="card border-0 mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">{{ .name | title }} card title</h5>
<h5 class="card-title">Borderless card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
{{- end }}
<!-- Boosted mod -->
<div class="card border-0 mb-3" style="max-width: 18rem;">
<!-- End mod -->
{{< /card.inline >}}
{{< /example >}}

{{< design-callout-alert >}}
These variants, **with a colored border** should not be used because they do not respect the Orange Design System specifications.

Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) guidelines on the Orange Design System website.
{{< /design-callout-alert >}}

{{< example >}}
{{< card.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="card border-{{ .name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Borderless card title</h5>
<h5 class="card-title">{{ .name | title }} card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<!-- End mod -->
{{- end }}
{{< /card.inline >}}
{{< /example >}}

### Mixins utilities

You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`.

{{< design-callout-alert >}}
This variant should not be used because it does not respect the Orange Design System specifications.

Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) guidelines on the Orange Design System website.
{{< /design-callout-alert >}}

{{< example >}}
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success text-body">Header</div>
Expand All @@ -491,6 +550,12 @@ In addition to styling the content within cards, Boosted includes a few options

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.

{{< design-callout-alert >}}
These variants **with no spacing between cards** should not be used because they do not respect the Orange Design System specifications. Instead, prefer having a gap of at least 20px between cards.

Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) guidelines on the Orange Design System website.
{{< /design-callout-alert >}}

{{< example >}}
<div class="card-group">
<div class="card">
Expand Down