refactor: divider documentation #2978
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,99 @@ | ||||||||
| --- | ||||||||
| layout: docs | ||||||||
| title: Divider | ||||||||
| description: Use the horizontal or vertical rule helpers to create dividers. A divider can be used to visually structure an interface by clearly separating content sections. | ||||||||
| group: helpers | ||||||||
| aliases: | ||||||||
| - "/docs/helpers/divider/" | ||||||||
|
Member
There was a problem hiding this comment. Should we add ? for links compatibility
Suggested change
Member
Author
There was a problem hiding this comment. /docs/helpers/dividers only exist since 0.4, I don't think anyone has bookmarked it yet. ;-)
Collaborator
There was a problem hiding this comment. If a page has already been published, the file exists in the gh-pages branch. If we don't keep this alias for new versions, Hugo will not generate a new page with a redirection, and when we'll update the doc we will not overwrite the existing file. Therefore we will have the old page available on
Member
Author
There was a problem hiding this comment. Ok noted. I add the link for compatibility |
||||||||
| - "/docs/helpers/dividers/" | ||||||||
| - "/docs/helpers/vertical-rule/" | ||||||||
| toc: true | ||||||||
| --- | ||||||||
|
|
||||||||
| ## Horizontal rules | ||||||||
|
|
||||||||
| Horizontal rules should use the `<hr>` tag, when the separator has semantic meaning (i.e., when it represents a topic change or a significant transition in the content). If the divider is purely decorative, prefer using a border CSS property on an HTML element or our [border utilities]({{< docsref "/utilities/borders" >}}), or even ensure to hide it from assistive technologies (e.g., `aria-hidden="true"`). | ||||||||
|
|
||||||||
| {{< example >}} | ||||||||
| <hr> | ||||||||
| <div class="border-top border-default my-medium"></div> | ||||||||
| {{< /example >}} | ||||||||
|
|
||||||||
| ## Vertical rules | ||||||||
|
|
||||||||
| Vertical rules are inspired by the `<hr>` element. The `vr` class allows you to create vertical dividers in common layouts. They're styled just like `<hr>` elements. They have `min-height` of `1em`. | ||||||||
|
|
||||||||
| {{< example >}} | ||||||||
| <div class="vr"></div> | ||||||||
| {{< /example >}} | ||||||||
|
|
||||||||
| Vertical rules scale their height in flex layouts: | ||||||||
|
|
||||||||
| {{< example class="d-flex" >}} | ||||||||
| <div class="d-flex" style="height: 50px;"> | ||||||||
| <div class="vr"></div> | ||||||||
| </div> | ||||||||
| <div class="d-flex" style="height: 80px;"> | ||||||||
| <div class="vr"></div> | ||||||||
| </div> | ||||||||
| <div class="d-flex" style="height: 100px;"> | ||||||||
| <div class="vr"></div> | ||||||||
| </div> | ||||||||
| {{< /example >}} | ||||||||
|
|
||||||||
| ## Color | ||||||||
|
|
||||||||
| Change the divider color using the [border color utilities]({{< docsref "/utilities/borders/#color" >}}). | ||||||||
|
|
||||||||
| {{< example class="d-flex flex-column gap-1" >}} | ||||||||
| <hr class="border-muted"> | ||||||||
| <hr class="border-emphasized"> | ||||||||
| <hr class="border-brand-primary"> | ||||||||
| <div data-bs-theme="light" class="bg-brand-primary py-shortest"><hr class="border-on-brand-primary"></div> | ||||||||
| <div data-bs-theme="light" class="bg-always-white py-shortest"><hr class="border-always-black"></div> | ||||||||
| <div data-bs-theme="dark" class="bg-always-black py-shortest"><hr class="border-always-white"></div> | ||||||||
| <div data-bs-theme="dark" class="bg-always-black py-shortest"><hr class="border-always-on-black"></div> | ||||||||
| <div data-bs-theme="light" class="bg-always-white py-shortest"><hr class="border-always-on-white"></div> | ||||||||
| {{< /example >}} | ||||||||
|
louismaximepiton marked this conversation as resolved.
|
||||||||
|
|
||||||||
| {{< example class="d-flex gap-1" >}} | ||||||||
| <div class="vr border-muted"></div> | ||||||||
| <div class="vr border-emphasized"></div> | ||||||||
| <div class="vr border-brand-primary"></div> | ||||||||
| <div data-bs-theme="light" class="d-flex bg-brand-primary"><div class="vr border-on-brand-primary"></div></div> | ||||||||
| <div data-bs-theme="light" class="d-flex bg-always-white px-shortest"><div class="vr border-always-black"></div></div> | ||||||||
| <div data-bs-theme="dark" class="d-flex bg-always-black px-shortest"><div class="vr border-always-white"></div></div> | ||||||||
| <div data-bs-theme="dark" class="d-flex bg-always-black px-shortest"><div class="vr border-always-on-black"></div></div> | ||||||||
| <div data-bs-theme="light" class="d-flex bg-always-white px-shortest"><div class="vr border-always-on-white"></div></div> | ||||||||
| {{< /example >}} | ||||||||
|
|
||||||||
| {{< bootstrap-compatibility >}} | ||||||||
| The `<hr>` and `vr` color can be set using [colors utilities]({{< docsref "/utilities/colors" >}}) | ||||||||
| {{< example >}} | ||||||||
| <hr class="text-muted"> | ||||||||
| <div class="vr text-brand-primary"></div> | ||||||||
| {{< /example >}} | ||||||||
| {{< /bootstrap-compatibility >}} | ||||||||
|
|
||||||||
| ## Size | ||||||||
|
|
||||||||
| Change the divider thickness using the [border width utilities]({{< docsref "/utilities/borders/#width" >}}). | ||||||||
|
|
||||||||
| {{< example>}} | ||||||||
| <div> | ||||||||
| <hr class="border-thin"> | ||||||||
| <hr class="border-medium"> | ||||||||
| <hr class="border-thick"> | ||||||||
| <hr class="border-thicker"> | ||||||||
| </div> | ||||||||
| {{< /example >}} | ||||||||
|
|
||||||||
| {{< example>}} | ||||||||
| <div class="d-flex" style="height: 50px;"> | ||||||||
| <div class="vr border-thin"></div> | ||||||||
| <div class="vr border-medium"></div> | ||||||||
| <div class="vr border-thick"></div> | ||||||||
| <div class="vr border-thicker"></div> | ||||||||
| </div> | ||||||||
| {{< /example >}} | ||||||||
|
louismaximepiton marked this conversation as resolved.
|
||||||||
|
|
||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We've lost the colored bg part, I can't remember if it was asked or not 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You have some examples in the color section, isn't it enough?