Skip to content

Commit

Permalink
Apply mainly #2001 changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Jul 17, 2024
1 parent 8be5992 commit 9d0469d
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 16 deletions.
122 changes: 113 additions & 9 deletions site/content/docs/5.3/components/card.md
View file
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 >}}
**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.
<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.

- **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.
Expand Down Expand Up @@ -183,6 +195,14 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
</div>
{{< /example >}}

<details>
<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
<br>
{{< 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 >}}
<div class="card text-center">
<div class="card-header">
Expand All @@ -198,6 +218,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
</div>
</div>
{{< /example >}}
</details>

## Sizing

Expand Down Expand Up @@ -270,6 +291,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 >}}
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{{< /example >}}

<details>
<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
<br>
{{< 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 All @@ -295,11 +335,21 @@ You can quickly change the text alignment of any card—in its entirety or speci
</div>
</div>
{{< /example >}}
</details>

## Navigation

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

<details>
<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
<br>
{{< 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 text-body bg-body">
Expand Down Expand Up @@ -345,6 +395,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components
</div>
</div>
{{< /example >}}
</details>

## Images

Expand Down Expand Up @@ -377,6 +428,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.

<details>
<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
<br>
{{< 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 All @@ -391,6 +451,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 >}}
</details>

## Horizontal

Expand Down Expand Up @@ -423,6 +484,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.

<details>
<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
<br>
{{< 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") }}
Expand All @@ -440,38 +510,61 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
{{< callout info >}}
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
{{< /callout >}}
</details>

### 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") }}
<div class="card border-{{ .name }} mb-3" style="max-width: 18rem;">
<!-- Boosted mod -->
<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 -->
{{< /example >}}

<details>
<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
<br>
{{< 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 >}}
</details>

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

<details>
<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
<br>
{{< 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 @@ -482,6 +575,7 @@ You can also change the borders on the card header and footer as needed, and eve
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
{{< /example >}}
</details>

## Card layout

Expand All @@ -491,6 +585,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.

<details>
<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
<br>
{{< 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 Expand Up @@ -556,6 +659,7 @@ When using card groups with footers, their content will automatically line up.
</div>
</div>
{{< /example >}}
</details>

### Grid cards

Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/dropdowns.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -655,7 +655,7 @@ You can use `<a>` or `<button>` elements as dropdown items.
</div>
{{< /example >}}

You can also create non-interactive dropdown items with `.dropdown-item-text`.
You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities.

{{< example >}}
<ul class="dropdown-menu">
Expand Down
14 changes: 8 additions & 6 deletions site/content/docs/5.3/forms/input-group.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,6 +400,13 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-

### Custom file input

{{< example >}}
<div class="input-group">
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
{{< /example >}}

<details>
<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
<br>
Expand All @@ -420,15 +427,10 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
<label class="input-group-text" for="inputGroupFile02">Upload</label>
</div>

<div class="input-group mb-3">
<div class="input-group">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
<input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
</div>

<div class="input-group">
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
{{< /example >}}
</details>

Expand Down

0 comments on commit 9d0469d

Please sign in to comment.