diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index 1a8594ed7b..6b611431b2 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. @@ -183,6 +195,15 @@ 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. +{{< /design-callout-alert >}} + + {{< example >}}
@@ -198,6 +219,7 @@ Card headers can be styled by adding `.card-header` to `` elements.
{{< /example >}} +
## Sizing @@ -270,6 +292,25 @@ 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. + +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 >}}
@@ -295,11 +336,21 @@ You can quickly change the text alignment of any card—in its entirety or speci
{{< /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. + +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 >}}
@@ -345,6 +396,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components
{{< /example >}} +
## Images @@ -377,6 +429,15 @@ 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. + +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" >}} @@ -391,6 +452,7 @@ Turn an image into a card background and overlay your card's text. Depending on {{< 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 @@ -423,6 +485,15 @@ 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. + +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") }} @@ -440,38 +511,63 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg {{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} +
### Border 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 >}} + +
+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. + +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 >}} +
### 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. + +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
@@ -482,6 +578,7 @@ You can also change the borders on the card header and footer as needed, and eve
Footer
{{< /example >}} +
## Card layout @@ -491,6 +588,15 @@ 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. + +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 >}}
@@ -556,6 +662,7 @@ When using card groups with footers, their content will automatically line up.
{{< /example >}} +
### Grid cards