From 524e9a1cd5d2d778df95b427ec57950c36910c69 Mon Sep 17 00:00:00 2001 From: Isabelle Chanclou Date: Tue, 18 Apr 2023 15:37:15 +0200 Subject: [PATCH 1/4] Add all design callout messages. Signed-off-by: Isabelle Chanclou --- site/content/docs/5.3/components/card.md | 70 +++++++++++++++++++++--- 1 file changed, 62 insertions(+), 8 deletions(-) diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index 3d7ba255ee..7a776e9e8a 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -183,6 +183,12 @@ Card headers can be styled by adding `.card-header` to `` elements. {{< /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. +{{< /design-callout-alert >}} + + {{< example >}}
@@ -270,6 +276,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 >}}
@@ -300,6 +312,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 >}} +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 >}}
@@ -377,6 +395,13 @@ 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. It does not respect accessibility requirements neither. + +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 >}}
{{< placeholder width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" background="#000" >}} @@ -423,6 +448,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. + +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") }} @@ -445,26 +476,37 @@ 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. + {{< example >}} {{< card.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -
+
Header
-
{{ .name | title }} card title
+
Borderless card title

Some quick example text to build on the card title and make up the bulk of the card's content.

-{{- end }} - -
+ +{{< /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") }} +
Header
-
Borderless card title
+
{{ .name | title }} card title

Some quick example text to build on the card title and make up the bulk of the card's content.

- +{{- end }} {{< /card.inline >}} {{< /example >}} @@ -472,6 +514,12 @@ Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the 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 >}}
Header
@@ -491,6 +539,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. + +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 >}}
From efcf2ea09673f78b0003df495d443709590c10e8 Mon Sep 17 00:00:00 2001 From: Isabelle Chanclou Date: Tue, 18 Apr 2023 18:26:56 +0200 Subject: [PATCH 2/4] Add informational design callout message in the About section. Signed-off-by: Isabelle Chanclou --- site/content/docs/5.3/components/card.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index 7a776e9e8a..09315a1a43 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -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 >}} +**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. +

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

+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. + +- **In Boosted**, as some card variants can be used as containers, more sizing possibilities are offered to adjust their sizes. +{{< /design-callout-alert >}} + ## 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. From fbd2d48508d63a6503b251ea1533a99a38b68a60 Mon Sep 17 00:00:00 2001 From: Isabelle Chanclou Date: Tue, 9 May 2023 17:41:39 +0200 Subject: [PATCH 3/4] Fixes after code review Signed-off-by: Isabelle Chanclou --- site/content/docs/5.3/components/card.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index 09315a1a43..a94aa0a05e 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -325,7 +325,7 @@ Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1- Add some navigation to a card's header (or block) with Boosted's [nav components]({{< docsref "/components/navs-tabs" >}}). {{< design-callout-alert >}} -This variant should not be used because it does not respect the Orange Design System specifications. +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 >}} @@ -408,12 +408,11 @@ 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. It does not respect accessibility requirements neither. +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 >}}
{{< placeholder width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" background="#000" >}} @@ -552,7 +551,7 @@ 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. +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 >}} From 9e033e964619ff92eaaefd0b92f40822fa2a6331 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 8 Jan 2024 11:46:27 +0100 Subject: [PATCH 4/4] Proposal --- site/content/docs/5.3/components/card.md | 42 ++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index 42a3977723..6b611431b2 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -195,6 +195,9 @@ Card headers can be styled by adding `.card-header` to `` elements.
{{< /example >}} +
+Other variants from Bootstrap +
{{< 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. @@ -216,6 +219,7 @@ Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-
{{< /example >}} + ## Sizing @@ -288,6 +292,19 @@ 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" >}}). +{{< example >}} +
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+{{< /example >}} + +
+Other variants from Bootstrap +
{{< 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. @@ -319,11 +336,15 @@ Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-
{{< /example >}} + ## Navigation Add some navigation to a card's header (or block) with Boosted's [nav components]({{< docsref "/components/navs-tabs" >}}). +
+See Bootstrap's variants +
{{< design-callout-alert >}} These variants should not be used because they do not respect the Orange Design System specifications. @@ -375,6 +396,7 @@ Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-
{{< /example >}} + ## Images @@ -407,6 +429,9 @@ 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. +
+See Bootstrap's variants +
{{< 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. @@ -427,6 +452,7 @@ Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1- {{< callout info >}} Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image. {{< /callout >}} +
## Horizontal @@ -459,6 +485,9 @@ 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. +
+See Bootstrap's variants +
{{< design-callout-alert >}} These variants **with a colored background** should not be used because they do not respect the Orange Design System specifications. @@ -482,6 +511,7 @@ Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1- {{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} +
### Border @@ -501,6 +531,9 @@ Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the {{< /card.inline >}} {{< /example >}} +
+Other variants from Bootstrap +
{{< design-callout-alert >}} These variants, **with a colored border** should not be used because they do not respect the Orange Design System specifications. @@ -520,11 +553,15 @@ Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1- {{- 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`. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -541,6 +578,7 @@ Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-
Footer
{{< /example >}} + ## Card layout @@ -550,6 +588,9 @@ 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. +
+See Bootstrap's variants +
{{< 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. @@ -621,6 +662,7 @@ When using card groups with footers, their content will automatically line up.
{{< /example >}} + ### Grid cards