` here for accessibility concerns.
-{{< /callout >}}
-
-Add `.tag-sm` to the `.tag` for a small variant.
-
-{{< example class="d-flex flex-wrap gap-2 align-items-center" >}}
-Small tag variant
-Informative
-Filter
-Navigation
-
-
-
- Input
- Close
-{{< /example >}}
-
-## Disabled state
-
-{{< callout info >}}
-We add an extra `` around the `` here for accessibility concerns.
-{{< /callout >}}
-
-Add `.disabled` to the `.tag` for a disabled variant. Don't forget to add `aria-disabled` to `` and `disabled` attribute to ``.
-
-Disabled tags using the `` element behave a bit different:
-
-- ` `s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled.
-- Some future-friendly styles are included to disable all `pointer-events` on anchor tags.
-- Disabled tags using ` ` should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
-- Disabled tags using ` ` *should not* include the `href` attribute.
-
-{{< example class="d-flex flex-wrap gap-2 align-items-center" >}}
-Disabled tags for the different variants
-Informative
-Filter
- Navigation
-
-
-
- Input
- Close
-{{< /example >}}
-
-## CSS
-
-### Variables
-
-Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-{{< scss-docs name="tag-css-vars" file="scss/_tags.scss" >}}
-
-Customization through CSS variables can be seen on the `.tag-sm` class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="tag-sm-css-vars" file="scss/_tags.scss" >}}
-
-### Sass Variables
-
-Variables for all tags:
-
-{{< scss-docs name="tag-variables" file="scss/_variables.scss" >}}
-
-Variables for the [small tag](#sizes):
-
-{{< scss-docs name="tag-sm-variables" file="scss/_variables.scss" >}}
+{{< callout-soon >}}
diff --git a/site/content/docs/0.0/components/title-bars.md b/site/content/docs/0.0/components/title-bars.md
index fdc6d46f90..15607c49e4 100644
--- a/site/content/docs/0.0/components/title-bars.md
+++ b/site/content/docs/0.0/components/title-bars.md
@@ -8,115 +8,4 @@ aliases:
toc: true
---
-## How it works
-
-A title bar is designed to display the title of a page and shall be placed right below an [Orange navbar]({{}}).
-
-Being based on spacing and backgrounds utilities, title bars were designed to take `100vw` width.
-
-See them in action in our [examples page]({{}}).
-
-## Background color
-
-To change the appearance of a title bar, use our [background utilities]({{}}) such as `.bg-supporting-*`.
-
-When using title bars with the default background color, illustrations can be included as an option, but it's not mandatory.
-
-Supporting colors can also be used as the background color for title bars, but not the supporting light and dark tint colors. When using one of the supporting colors, illustrations must be used.
-
-The image should not overlap on title and the title shouldn't wrap. If this happens, please transform your title bar into a title bar with the default background color without any image.
-
-{{< example class="p-0">}}
-
-
-
-
-
-
-
Title
-
-
-
-
-
-
-
-
-
-
-
-
Title
-
-
-
-
-
-
-
-
-
-
` tag
-
-{{< example class="p-0">}}
-
-{{}}
-
-### HTML `}}).
-{{< /callout >}}
-
-## CSS
-
-### Variables
-
-Title bars use local CSS variables on `.title-bar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-{{< scss-docs name="title-bar-css-vars" file="scss/_title-bars.scss" >}}
-
-### Sass variables
-
-{{< scss-docs name="title-bars-variables" file="scss/_variables.scss" >}}
+{{< callout-soon >}}
diff --git a/site/content/docs/0.0/components/toasts.md b/site/content/docs/0.0/components/toasts.md
index d3a94558c8..6ed314381c 100644
--- a/site/content/docs/0.0/components/toasts.md
+++ b/site/content/docs/0.0/components/toasts.md
@@ -8,393 +8,4 @@ aliases:
toc: true
---
-Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They're built with flexbox, so they're easy to align and position.
-
-## Overview
-
-Things to know when using the toast plugin:
-
-- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
-- Toasts will automatically hide if you do not specify `autohide: false`.
-
-{{< callout info >}}
-{{< partial "callouts/info-prefersreducedmotion.md" >}}
-{{< /callout >}}
-
-## Examples
-
-### Basic
-
-To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use `display: flex`, allowing easy alignment of content thanks to our margin and flexbox utilities.
-
-Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
-
-{{< example stackblitz_add_js="true" >}}
-
-
-
- Hello, world! This is a toast message.
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
-
- Show live toast
-
-
-```html
-Show live toast
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
-
-
-
- See? Just like this.
-
-
-
-
-
-
- Heads up, toasts will stack automatically
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
Close
-
-
-
- Hello, world! This is a toast message.
-
- Take action
- Close
-
-
-
-See a dark color scheme example
-
-
-
- Hello, world! This is a toast message.
-
-
Close
-
-
-
-## Placement
-
-Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
-
-{{< example stackblitz_add_js="true" >}}
-
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- See? Just like this.
-
-
-
-
-
-
- Heads up, toasts will stack automatically
-
-
-
-
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
`s to avoid this behavior.
-- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
-- Tooltips can be triggered thanks to an element inside a shadow DOM.
-
-Got all that? Great, let's see how they work with some examples.
-
-{{< callout info >}}
-{{< partial "callouts/info-sanitizer.md" >}}
-{{< /callout >}}
-
-{{< callout info >}}
-{{< partial "callouts/info-prefersreducedmotion.md" >}}
-{{< /callout >}}
-
-## Accessibility
-
-For accessibility purpose, [content on hover or focus should be dismissible, hoverable and persistent](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html).
-With OUDS Web tooltips, no mechanism is available to dismiss the tooltip without moving pointer hover or keyboard focus (due to Popper library's limitations).
-Please pay attention that the tooltip never hides an important content.
-
-## Examples
-
-### Enable tooltips
-
-As mentioned above, you must initialize tooltips before they can be used. One way to initialize all tooltips on a page would be to select them by their `data-bs-toggle` attribute, like so:
-
-```js
-const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
-const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new boosted.Tooltip(tooltipTriggerEl))
-```
-
-### Tooltips on links
-
-Hover over the links below to see tooltips:
-
-{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
-Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text . And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.
-{{< /example >}}
-
-{{< callout warning >}}
-{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
-{{< /callout >}}
-
-### Custom tooltips
-
-{{< design-callout-alert >}}
-This **customized** variant should not be used because it does not respect the Orange Design System specifications. More generally, customizing tooltip CSS might lead to mismatch the Orange Design System.
-
-Please refer to the [Tooltip](https://system.design.orange.com/0c1af118d/p/932946-tooltip/b/417f3e) guidelines on the Orange Design System website.
-{{< /design-callout-alert >}}
-
-You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
-
-{{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}}
-
-{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
-
- Custom tooltip
-
-{{< /example >}}
-
-### Directions
-
-Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using OUDS Web in RTL.
-
-
-
-```html
-
- Tooltip on top
-
-
- Tooltip on right
-
-
- Tooltip on bottom
-
-
- Tooltip on left
-
-```
-
-And with custom HTML added:
-
-```html
-
- Tooltip with HTML
-
-```
-
-With an SVG:
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
- Helper
-
-```
-
-## CSS
-
-### Variables
-
-As part of OUDS Web's evolving CSS variables approach, tooltips now use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-{{< scss-docs name="tooltip-css-vars" file="scss/_tooltip.scss" >}}
-
-### Sass variables
-
-{{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}}
-
-## Usage
-
-The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:
-
-```js
-const exampleEl = document.getElementById('example')
-const tooltip = new boosted.Tooltip(exampleEl, options)
-```
-
-{{< callout warning >}}
-Tooltips automatically attempt to change positions when a parent container has `overflow: auto` or `overflow: scroll`, but still keeps the original placement's positioning. Set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
-
-```js
-const tooltip = new boosted.Tooltip('#example', {
- boundary: document.body // or document.querySelector('#boundary')
-})
-```
-{{< /callout >}}
-
-### Markup
-
-The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
-
-{{< callout warning >}}
-**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make them impossible to trigger for keyboard users.
-{{< /callout >}}
-
-```html
-
-Hover over me
-
-
-
-```
-
-### Disabled elements
-
-Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `` or `
`, ideally made keyboard-focusable using `tabindex="0"`.
-
-{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
-
- Disabled button
-
-{{< /example >}}
-
-### Options
-
-{{< markdown >}}
-{{< partial "js-data-attributes.md" >}}
-{{< /markdown >}}
-
-{{< callout warning >}}
-Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
-{{< /callout >}}
-
-{{< bs-table "table" >}}
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
-| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip. |
-| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
-| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
-| `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
-| `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
-| `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
-| `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
-| `offset` | array, string, function | `[0, 10]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
-| `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. |
-| `popperConfig` | null, object, function | `null` | To change OUDS Web's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the OUDS Web's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
-| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
-| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
-| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
-| `template` | string | `''` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. |
-| `title` | string, element, function | `''` | The tooltip title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
-| `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
-{{< /bs-table >}}
-
-{{< callout info >}}
-#### Data attributes for individual tooltips
-
-Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
-{{< /callout >}}
-
-#### Using function with `popperConfig`
-
-```js
-const tooltip = new boosted.Tooltip(element, {
- popperConfig(defaultBsPopperConfig) {
- // const newPopperConfig = {...}
- // use defaultBsPopperConfig if needed...
- // return newPopperConfig
- }
-})
-```
-
-### Methods
-
-{{< callout danger >}}
-{{< partial "callouts/danger-async-methods.md" >}}
-{{< /callout >}}
-
-{{< bs-table "table" >}}
-| Method | Description |
-| --- | --- |
-| `disable` | Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled. |
-| `dispose` | Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
-| `enable` | Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.** |
-| `getInstance` | _Static_ method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized. |
-| `getOrCreateInstance` | _Static_ method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized. |
-| `hide` | Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. |
-| `setContent` | Gives a way to change the tooltip's content after its initialization. |
-| `show` | Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. |
-| `toggle` | Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. |
-| `toggleEnabled` | Toggles the ability for an element's tooltip to be shown or hidden. |
-| `update` | Updates the position of an element's tooltip. |
-{{< /bs-table >}}
-
-```js
-const tooltip = boosted.Tooltip.getInstance('#example') // Returns a OUDS Web tooltip instance
-
-// setContent example
-tooltip.setContent({ '.tooltip-inner': 'another title' })
-
-```
-
-{{< callout info >}}
-The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the tooltip template, and each related property-value can be `string` | `element` | `function` | `null`
-{{< /callout >}}
-
-### Events
-
-{{< bs-table >}}
-| Event | Description |
-| --- | --- |
-| `hidden.bs.tooltip` | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
-| `hide.bs.tooltip` | This event is fired immediately when the `hide` instance method has been called. |
-| `inserted.bs.tooltip` | This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM. |
-| `show.bs.tooltip` | This event fires immediately when the `show` instance method is called. |
-| `shown.bs.tooltip` | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
-{{< /bs-table >}}
-
-```js
-const myTooltipEl = document.getElementById('myTooltip')
-const tooltip = boosted.Tooltip.getOrCreateInstance(myTooltipEl)
-
-myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
- // do something...
-})
-
-tooltip.hide()
-```
+{{< callout-soon >}}
diff --git a/site/content/docs/0.0/dark-mode.md b/site/content/docs/0.0/dark-mode.md
deleted file mode 100644
index 4156b9d2d5..0000000000
--- a/site/content/docs/0.0/dark-mode.md
+++ /dev/null
@@ -1,9477 +0,0 @@
----
-layout: docs
-title: Dark mode helper
-description: Dark mode page helping to debug dark mode
-aliases: "/dark-mode/"
-toc: true
-robots: noindex,follow
-sitemap:
- disable: true
----
-
-## Components
-
-### Accordions
-
-No theme
-
-
-
-
-
-
-
- This is the first item's accordion body. It is shown by default, until the collapse plugin
- adds the appropriate classes that we use to style each element. These classes control the overall
- appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
- CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
- .accordion-body, though the transition does limit overflow.
-
-
-
-
-
-
-
- This is the second item's accordion body. It is hidden by default, until the collapse
- plugin adds the appropriate classes that we use to style each element. These classes control the overall
- appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
- CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
- .accordion-body, though the transition does limit overflow.
-
-
-
-
-
Dark theme on container
-
-
-
-
-
-
-
- This is the first item's accordion body. It is shown by default, until the collapse plugin
- adds the appropriate classes that we use to style each element. These classes control the overall
- appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
- CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
- .accordion-body, though the transition does limit overflow.
-
-
-
-
-
-
-
- This is the second item's accordion body. It is hidden by default, until the collapse
- plugin adds the appropriate classes that we use to style each element. These classes control the overall
- appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
- CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
- .accordion-body, though the transition does limit overflow.
-
-
-
-
-
Light theme on container
-
-
-
-
-
-
-
- This is the first item's accordion body. It is shown by default, until the collapse plugin
- adds the appropriate classes that we use to style each element. These classes control the overall
- appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
- CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
- .accordion-body, though the transition does limit overflow.
-
-
-
-
-
-
-
- This is the second item's accordion body. It is hidden by default, until the collapse
- plugin adds the appropriate classes that we use to style each element. These classes control the overall
- appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
- CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
- .accordion-body, though the transition does limit overflow.
-
-
-
-
-
Dark theme on component
-
-
-
-
-
-
-
- This is the first item's accordion body. It is shown by default, until the collapse plugin
- adds the appropriate classes that we use to style each element. These classes control the overall
- appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
- CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
- .accordion-body, though the transition does limit overflow.
-
-
-
-
-
-
-
- This is the second item's accordion body. It is hidden by default, until the collapse
- plugin adds the appropriate classes that we use to style each element. These classes control the overall
- appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
- CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
- .accordion-body, though the transition does limit overflow.
-
-
-
-
-
Light theme on component
-
-
-
-
-
-
-
- This is the first item's accordion body. It is shown by default, until the collapse plugin
- adds the appropriate classes that we use to style each element. These classes control the overall
- appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
- CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
- .accordion-body, though the transition does limit overflow.
-
-
-
-
-
-
-
- This is the second item's accordion body. It is hidden by default, until the collapse
- plugin adds the appropriate classes that we use to style each element. These classes control the overall
- appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
- CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
- .accordion-body, though the transition does limit overflow.
-
-
-
-
-
No theme
-
-
-
-
Success
-
Success notification text goes here.
-
-
-
Info
-
Information notification text goes here.
-
-
-
Warning
-
Warning notification text goes here.
-
-
-
Error
-
Error notification text goes here.
-
-
Dark theme on container
-
-
-
-
Success
-
Success notification text goes here.
-
-
-
Info
-
Information notification text goes here.
-
-
-
Warning
-
Warning notification text goes here.
-
-
-
Error
-
Error notification text goes here.
-
-
Light theme on container
-
-
-
-
Success
-
Success notification text goes here.
-
-
-
Info
-
Information notification text goes here.
-
-
-
Warning
-
Warning notification text goes here.
-
-
-
Error
-
Error notification text goes here.
-
-
Dark theme on component
-
-
-
-
Success
-
Success notification text goes here.
-
-
-
Info
-
Information notification text goes here.
-
-
-
Warning
-
Warning notification text goes here.
-
-
-
Error
-
Error notification text goes here.
-
-
Light theme on component
-
-
-
-
Success
-
Success notification text goes here.
-
-
-
Info
-
Information notification text goes here.
-
-
-
Warning
-
Warning notification text goes here.
-
-
-
Error
-
Error notification text goes here.
-
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Badge
-
-No theme
-
-
-
- Notifications 4
-
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
-
Dark theme on container
-
-
-
- Notifications 4
-
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
-
Light theme on container
-
-
-
- Notifications 4
-
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
-
Dark theme on component
-
-
-
- Notifications 4
-
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
-
Light theme on component
-
-
-
- Notifications 4
-
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Buttons
-
-No theme
-
-
-
Primary
-
Primary
-
Secondary
-
Secondary
-
Success
-
Success
-
Danger
-
Danger
-
Warning
-
Warning
-
Info
-
Info
-
Light
-
Light
-
Dark
-
Dark
-
Link
-
Link
-
Outline primary
-
Outline primary
-
Outline secondary
-
Outline secondary
-
Outline success
-
Outline success
-
Outline danger
-
Outline danger
-
Outline warning
-
Outline warning
-
Outline info
-
Outline info
-
Outline light
-
Outline light
-
Outline dark
-
Outline dark
-
-
-
-
-
-
-
YouTube
-
YouTube
-
Large button
-
Large button
-
Large split button Toggle Dropdown
-
Large split button Toggle Dropdown
-
Dark theme on container
-
-
-
Primary
-
Primary
-
Secondary
-
Secondary
-
Success
-
Success
-
Danger
-
Danger
-
Warning
-
Warning
-
Info
-
Info
-
Light
-
Light
-
Dark
-
Dark
-
Link
-
Link
-
Outline primary
-
Outline primary
-
Outline secondary
-
Outline secondary
-
Outline success
-
Outline success
-
Outline danger
-
Outline danger
-
Outline warning
-
Outline warning
-
Outline info
-
Outline info
-
Outline light
-
Outline light
-
Outline dark
-
Outline dark
-
-
-
-
-
-
-
YouTube
-
YouTube
-
Large button
-
Large button
-
Large split button Toggle Dropdown
-
Large split button Toggle Dropdown
-
Light theme on container
-
-
-
Primary
-
Primary
-
Secondary
-
Secondary
-
Success
-
Success
-
Danger
-
Danger
-
Warning
-
Warning
-
Info
-
Info
-
Light
-
Light
-
Dark
-
Dark
-
Link
-
Link
-
Outline primary
-
Outline primary
-
Outline secondary
-
Outline secondary
-
Outline success
-
Outline success
-
Outline danger
-
Outline danger
-
Outline warning
-
Outline warning
-
Outline info
-
Outline info
-
Outline light
-
Outline light
-
Outline dark
-
Outline dark
-
-
-
-
-
-
-
YouTube
-
YouTube
-
Large button
-
Large button
-
Large split button Toggle Dropdown
-
Large split button Toggle Dropdown
-
Dark theme on component
-
-
-
Primary
-
Primary
-
Secondary
-
Secondary
-
Success
-
Success
-
Danger
-
Danger
-
Warning
-
Warning
-
Info
-
Info
-
Light
-
Light
-
Dark
-
Dark
-
Link
-
Link
-
Outline primary
-
Outline primary
-
Outline secondary
-
Outline secondary
-
Outline success
-
Outline success
-
Outline danger
-
Outline danger
-
Outline warning
-
Outline warning
-
Outline info
-
Outline info
-
Outline light
-
Outline light
-
Outline dark
-
Outline dark
-
-
-
-
-
-
-
YouTube
-
YouTube
-
Large button
-
Large button
-
Large split button Toggle Dropdown
-
Large split button Toggle Dropdown
-
Light theme on component
-
-
-
Primary
-
Primary
-
Secondary
-
Secondary
-
Success
-
Success
-
Danger
-
Danger
-
Warning
-
Warning
-
Info
-
Info
-
Light
-
Light
-
Dark
-
Dark
-
Link
-
Link
-
Outline primary
-
Outline primary
-
Outline secondary
-
Outline secondary
-
Outline success
-
Outline success
-
Outline danger
-
Outline danger
-
Outline warning
-
Outline warning
-
Outline info
-
Outline info
-
Outline light
-
Outline light
-
Outline dark
-
Outline dark
-
-
-
-
-
-
-
YouTube
-
YouTube
-
Large button
-
Large button
-
Large split button Toggle Dropdown
-
Large split button Toggle Dropdown
-
No theme
-
-
-
-
-
Placeholder
-
-
-
-
Card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
Go somewhere
-
-
-
-
-
-
-
-
-
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Last updated 3 mins ago
-
-
-
-
-
-
-
-
-
-
Card title
-
Card subtitle
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
-
- An item
- A second item
- A third item
-
-
-
-
-
-
Dark theme on container
-
-
-
-
-
Placeholder
-
-
-
-
Card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
Go somewhere
-
-
-
-
-
-
-
-
-
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Last updated 3 mins ago
-
-
-
-
-
-
-
-
-
-
Card title
-
Card subtitle
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
-
- An item
- A second item
- A third item
-
-
-
-
-
-
Light theme on container
-
-
-
-
-
Placeholder
-
-
-
-
Card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
Go somewhere
-
-
-
-
-
-
-
-
-
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Last updated 3 mins ago
-
-
-
-
-
-
-
-
-
-
Card title
-
Card subtitle
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
-
- An item
- A second item
- A third item
-
-
-
-
-
-
Dark theme on component
-
-
-
-
-
Placeholder
-
-
-
-
Card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
Go somewhere
-
-
-
-
-
-
-
-
-
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Last updated 3 mins ago
-
-
-
-
-
-
-
-
-
-
Card title
-
Card subtitle
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
-
- An item
- A second item
- A third item
-
-
-
-
-
-
Light theme on component
-
-
-
-
-
Placeholder
-
-
-
-
Card title
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
Go somewhere
-
-
-
-
-
-
-
-
-
-
Card title
-
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
Last updated 3 mins ago
-
-
-
-
-
-
-
-
-
-
Card title
-
Card subtitle
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
-
- An item
- A second item
- A third item
-
-
-
-
-
-
No theme
-
-
-
-
-
- Pause Carousel
-
-
-
-
-
-
-
Placeholder First slide
-
-
First slide label
-
Some representative placeholder content for the first slide.
-
-
-
-
Placeholder Second slide
-
-
Second slide label
-
Some representative placeholder content for the second slide.
-
-
-
-
Placeholder Third slide
-
-
Third slide label
-
Some representative placeholder content for the third slide.
-
-
-
-
- Previous
-
-
- Next
-
-
-
Dark theme on container
-
-
-
-
-
- Pause Carousel
-
-
-
-
-
-
-
Placeholder First slide
-
-
First slide label
-
Some representative placeholder content for the first slide.
-
-
-
-
Placeholder Second slide
-
-
Second slide label
-
Some representative placeholder content for the second slide.
-
-
-
-
Placeholder Third slide
-
-
Third slide label
-
Some representative placeholder content for the third slide.
-
-
-
-
- Previous
-
-
- Next
-
-
-
Light theme on container
-
-
-
-
-
- Pause Carousel
-
-
-
-
-
-
-
Placeholder First slide
-
-
First slide label
-
Some representative placeholder content for the first slide.
-
-
-
-
Placeholder Second slide
-
-
Second slide label
-
Some representative placeholder content for the second slide.
-
-
-
-
Placeholder Third slide
-
-
Third slide label
-
Some representative placeholder content for the third slide.
-
-
-
-
- Previous
-
-
- Next
-
-
-
Dark theme on component
-
-
-
-
-
- Pause Carousel
-
-
-
-
-
-
-
Placeholder First slide
-
-
First slide label
-
Some representative placeholder content for the first slide.
-
-
-
-
Placeholder Second slide
-
-
Second slide label
-
Some representative placeholder content for the second slide.
-
-
-
-
Placeholder Third slide
-
-
Third slide label
-
Some representative placeholder content for the third slide.
-
-
-
-
- Previous
-
-
- Next
-
-
-
Light theme on component
-
-
-
-
-
- Pause Carousel
-
-
-
-
-
-
-
Placeholder First slide
-
-
First slide label
-
Some representative placeholder content for the first slide.
-
-
-
-
Placeholder Second slide
-
-
Second slide label
-
Some representative placeholder content for the second slide.
-
-
-
-
Placeholder Third slide
-
-
Third slide label
-
Some representative placeholder content for the third slide.
-
-
-
-
- Previous
-
-
- Next
-
-
-
No theme
-
-
- Close Close
- Close
-
-
- Close
-
-
- Close
-
-
- Close
-
-
-
-Dark theme on container
-
-
- Close Close
- Close
-
-
- Close
-
-
- Close
-
-
- Close
-
-
-
-Light theme on container
-
-
- Close Close
- Close
-
-
- Close
-
-
- Close
-
-
- Close
-
-
-
-Dark theme on component
-
-
- Close Close
- Close
-
-
- Close
-
-
- Close
-
-
- Close
-
-
-
-Light theme on component
-
-
- Close Close
- Close
-
-
- Close
-
-
- Close
-
-
- Close
-
-
-
-### Dropdowns
-
-No theme
-
-
-
-
- Dropdown button
-
-
-
-
- Action
- Toggle Dropdown
-
- Toggle Dropdown Action
-
-
-
- Primary
-
-
- Secondary
-
-
- Success
-
-
- Info
-
-
- Warning
-
-
- Danger
-
-
- Primary
-
-
- Secondary
-
-
- Success
-
-
- Info
-
-
- Warning
-
-
- Danger
-
-
- Action
- Toggle Dropdown
-
- Primary
- Toggle Dropdown
-
- Success
- Toggle Dropdown
-
- Info
- Toggle Dropdown
-
- Warning
- Toggle Dropdown
-
- Danger
- Toggle Dropdown
-
- Primary
- Toggle Dropdown
-
- Success
- Toggle Dropdown
-
- Info
- Toggle Dropdown
-
- Warning
- Toggle Dropdown
-
- Danger
- Toggle Dropdown
-
Dark theme on container
-
-
-
-
- Dropdown button
-
-
-
-
- Action
- Toggle Dropdown
-
- Toggle Dropdown Action
-
-
-
- Primary
-
-
- Secondary
-
-
- Success
-
-
- Info
-
-
- Warning
-
-
- Danger
-
-
- Primary
-
-
- Secondary
-
-
- Success
-
-
- Info
-
-
- Warning
-
-
- Danger
-
-
- Action
- Toggle Dropdown
-
- Primary
- Toggle Dropdown
-
- Success
- Toggle Dropdown
-
- Info
- Toggle Dropdown
-
- Warning
- Toggle Dropdown
-
- Danger
- Toggle Dropdown
-
- Primary
- Toggle Dropdown
-
- Success
- Toggle Dropdown
-
- Info
- Toggle Dropdown
-
- Warning
- Toggle Dropdown
-
- Danger
- Toggle Dropdown
-
Light theme on container
-
-
-
-
- Dropdown button
-
-
-
-
- Action
- Toggle Dropdown
-
- Toggle Dropdown Action
-
-
-
- Primary
-
-
- Secondary
-
-
- Success
-
-
- Info
-
-
- Warning
-
-
- Danger
-
-
- Primary
-
-
- Secondary
-
-
- Success
-
-
- Info
-
-
- Warning
-
-
- Danger
-
-
- Action
- Toggle Dropdown
-
- Primary
- Toggle Dropdown
-
- Success
- Toggle Dropdown
-
- Info
- Toggle Dropdown
-
- Warning
- Toggle Dropdown
-
- Danger
- Toggle Dropdown
-
- Primary
- Toggle Dropdown
-
- Success
- Toggle Dropdown
-
- Info
- Toggle Dropdown
-
- Warning
- Toggle Dropdown
-
- Danger
- Toggle Dropdown
-
Dark theme on component
-
-
-
-
- Dropdown button
-
-
-
-
- Action
- Toggle Dropdown
-
- Toggle Dropdown Action
-
-
-
- Primary
-
-
- Secondary
-
-
- Success
-
-
- Info
-
-
- Warning
-
-
- Danger
-
-
- Primary
-
-
- Secondary
-
-
- Success
-
-
- Info
-
-
- Warning
-
-
- Danger
-
-
- Action
- Toggle Dropdown
-
- Primary
- Toggle Dropdown
-
- Success
- Toggle Dropdown
-
- Info
- Toggle Dropdown
-
- Warning
- Toggle Dropdown
-
- Danger
- Toggle Dropdown
-
- Primary
- Toggle Dropdown
-
- Success
- Toggle Dropdown
-
- Info
- Toggle Dropdown
-
- Warning
- Toggle Dropdown
-
- Danger
- Toggle Dropdown
-
Light theme on component
-
-
-
-
- Dropdown button
-
-
-
-
- Action
- Toggle Dropdown
-
- Toggle Dropdown Action
-
-
-
- Primary
-
-
- Secondary
-
-
- Success
-
-
- Info
-
-
- Warning
-
-
- Danger
-
-
- Primary
-
-
- Secondary
-
-
- Success
-
-
- Info
-
-
- Warning
-
-
- Danger
-
-
-
- Action
- Toggle Dropdown
-
- Primary
- Toggle Dropdown
-
- Success
- Toggle Dropdown
-
- Info
- Toggle Dropdown
-
- Warning
- Toggle Dropdown
-
- Danger
- Toggle Dropdown
-
- Primary
- Toggle Dropdown
-
- Success
- Toggle Dropdown
-
- Info
- Toggle Dropdown
-
- Warning
- Toggle Dropdown
-
- Danger
- Toggle Dropdown
-
Dark dropdown variant for retro-compatibility
-
-
-
-
- Dropdown button
-
-
-
-
-
- Action
-
- Toggle Dropdown
-
-
-
-
No theme
-
-
-
-
-
-Dark theme on container
-
-
-
-
-
-Light theme on container
-
-
-
-
-
-Dark theme on component
-
-
-
-
-
-Light theme on component
-
-
-
-
-
-### List group
-
-No theme
-
-
-
- A list item
- A list item
- A list item
- A simple success list group item
- A simple info list group item
- A simple warning list group item
- A simple danger list group item
- A simple disabled info list group item
-
-
- A second button item
- The current button
- A disabled button item
- A simple success list group item
- A simple info list group item
- A simple warning list group item
- A simple danger list group item
- A simple disabled info list group item
-
-
- An item
- A list item
- A list item
-
-
- A second button item
- The current button
- A disabled button item
-
-
Dark theme on container
-
-
-
- A list item
- A list item
- A list item
- A simple success list group item
- A simple info list group item
- A simple warning list group item
- A simple danger list group item
- A simple disabled info list group item
-
-
- A second button item
- The current button
- A disabled button item
- A simple success list group item
- A simple info list group item
- A simple warning list group item
- A simple danger list group item
- A simple disabled info list group item
-
-
- An item
- A list item
- A list item
-
-
- A second button item
- The current button
- A disabled button item
-
-
Light theme on container
-
-
-
- A list item
- A list item
- A list item
- A simple success list group item
- A simple info list group item
- A simple warning list group item
- A simple danger list group item
- A simple disabled info list group item
-
-
- A second button item
- The current button
- A disabled button item
- A simple success list group item
- A simple info list group item
- A simple warning list group item
- A simple danger list group item
- A simple disabled info list group item
-
-
- An item
- A list item
- A list item
-
-
- A second button item
- The current button
- A disabled button item
-
-
Dark theme on component
-
-
-
- A list item
- A list item
- A list item
- A simple success list group item
- A simple info list group item
- A simple warning list group item
- A simple danger list group item
- A simple disabled info list group item
-
-
- A second button item
- The current button
- A disabled button item
- A simple success list group item
- A simple info list group item
- A simple warning list group item
- A simple danger list group item
- A simple disabled info list group item
-
-
- An item
- A list item
- A list item
-
-
- A second button item
- The current button
- A disabled button item
-
-
Light theme on component
-
-
-
- A list item
- A list item
- A list item
- A simple success list group item
- A simple info list group item
- A simple warning list group item
- A simple danger list group item
- A simple disabled info list group item
-
-
- A second button item
- The current button
- A disabled button item
- A simple success list group item
- A simple info list group item
- A simple warning list group item
- A simple danger list group item
- A simple disabled info list group item
-
-
- An item
- A list item
- A list item
-
-
- A second button item
- The current button
- A disabled button item
-
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Modal
-
-No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Navbar
-
-No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Navs & tabs
-
-No theme
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Content of Link A
-
Content of Link B
-
Content of Link C
-
Content of Link D
-
-
-
Content of Tab 2
-
Content of Tab 3
-
Content of Tab 4
-
-
Dark theme on container
-
-
-
-
-
-
-
-
-
-
-
-
Content of Link A
-
Content of Link B
-
Content of Link C
-
Content of Link D
-
-
-
Content of Tab 2
-
Content of Tab 3
-
Content of Tab 4
-
-
Light theme on container
-
-
-
-
-
-
-
-
-
-
-
-
Content of Link A
-
Content of Link B
-
Content of Link C
-
Content of Link D
-
-
-
Content of Tab 2
-
Content of Tab 3
-
Content of Tab 4
-
-
Dark theme on component
-
-
-
-
-
-
-
-
-
-
-
-
Content of Link A
-
Content of Link B
-
Content of Link C
-
Content of Link D
-
-
-
Content of Tab 2
-
Content of Tab 3
-
Content of Tab 4
-
-
Light theme on component
-
-
-
-
-
-
-
-
-
-
-
-
Content of Link A
-
Content of Link B
-
Content of Link C
-
Content of Link D
-
-
-
Content of Tab 2
-
Content of Tab 3
-
Content of Tab 4
-
-
No theme
-
-
-
- Button with data-bs-target
-
-
-
-
-
- Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-
-
-
- Dropdown button
-
-
-
-
-
-
Dark theme on container
-
-
-
- Button with data-bs-target
-
-
-
-
-
- Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-
-
-
- Dropdown button
-
-
-
-
-
-
Light theme on container
-
-
-
- Button with data-bs-target
-
-
-
-
-
- Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-
-
-
- Dropdown button
-
-
-
-
-
-
Dark theme on component
-
-
-
- Button with data-bs-target
-
-
-
-
-
- Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-
-
-
- Dropdown button
-
-
-
-
-
-
Light theme on component
-
-
-
- Button with data-bs-target
-
-
-
-
-
- Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-
-
-
- Dropdown button
-
-
-
-
-
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Pagination
-
-No theme
-
-
-
-
-
-
-
-
-
-
-
-
-
-Dark theme on container
-
-
-
-
-
-
-
-
-
-
-
-
-
-Light theme on container
-
-
-
-
-
-
-
-
-
-
-
-
-
-Dark theme on component
-
-
-
-
-
-
-
-
-
-
-
-
-
-Light theme on component
-
-
-
-
-
-
-
-
-
-
-
-
-
-### Placeholders
-
-No theme
-
-
-
-
-Dark theme on container
-
-
-
-
-Light theme on container
-
-
-
-
-Dark theme on component
-
-
-
-
-Light theme on component
-
-
-
-
-### Popovers
-
-No theme
-
-
-
And here's some amazing content. It's very engaging. Right?
-
Click to toggle popover
-
Dark theme on container
-
-
-
And here's some amazing content. It's very engaging. Right?
-
Click to toggle popover
-
Light theme on container
-
-
-
And here's some amazing content. It's very engaging. Right?
-
Click to toggle popover
-
Dark theme on component
-
-
-
And here's some amazing content. It's very engaging. Right?
-
Click to toggle popover
-
Light theme on component
-
-
-
And here's some amazing content. It's very engaging. Right?
-
Click to toggle popover
-
No theme
-
-
-
-
-
-
-
-
-
-
30% (.text-bg-primary)
-
-
-
25% (.text-bg-success)
-
-
-
-
75% (.text-bg-warning)
-
-
-
100% (.text-bg-danger)
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
-
-
-
Dark theme on container
-
-
-
-
-
-
-
-
-
-
30% (.text-bg-primary)
-
-
-
25% (.text-bg-success)
-
-
-
-
75% (.text-bg-warning)
-
-
-
100% (.text-bg-danger)
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
-
-
-
Light theme on container
-
-
-
-
-
-
-
-
-
-
30% (.text-bg-primary)
-
-
-
25% (.text-bg-success)
-
-
-
-
75% (.text-bg-warning)
-
-
-
100% (.text-bg-danger)
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
-
-
-
Dark theme on component
-
-
-
-
-
-
-
-
-
-
30% (.text-bg-primary)
-
-
-
25% (.text-bg-success)
-
-
-
-
75% (.text-bg-warning)
-
-
-
100% (.text-bg-danger)
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
-
-
-
Light theme on component
-
-
-
-
-
-
-
-
-
-
30% (.text-bg-primary)
-
-
-
25% (.text-bg-success)
-
-
-
-
75% (.text-bg-warning)
-
-
-
100% (.text-bg-danger)
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
Long label text for the progress bar, set to a dark color
-
-
-
-
-
-
No theme
-
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
Dark theme on container
-
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
Light theme on container
-
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
Dark theme on component
-
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
Light theme on component
-
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
- Loading...
-
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Stickers
-
-No theme
-
-
-
-
- 69.99 €
- 39.99 €
- Per month
- 39.99 € per month instead of 69.99 €
-
-
-
-
-
-
- Free delivery
-
-
-
Dark theme on container
-
-
-
-
- 69.99 €
- 39.99 €
- Per month
- 39.99 € per month instead of 69.99 €
-
-
-
-
-
-
- Free delivery
-
-
-
Light theme on container
-
-
-
-
- 69.99 €
- 39.99 €
- Per month
- 39.99 € per month instead of 69.99 €
-
-
-
-
-
-
- Free delivery
-
-
-
Dark theme on component
-
-
-
-
- 69.99 €
- 39.99 €
- Per month
- 39.99 € per month instead of 69.99 €
-
-
-
-
-
-
- Free delivery
-
-
-
Light theme on component
-
-
-
-
- 69.99 €
- 39.99 €
- Per month
- 39.99 € per month instead of 69.99 €
-
-
-
-
-
-
- Free delivery
-
-
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Title bars
-
-No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Toasts
-
-No theme
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
-
Dark theme on container
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
-
Light theme on container
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
-
Dark theme on component
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
-
Light theme on component
-
-
-
-
-
- Hello, world! This is a toast message.
-
-
-
No theme
-
-
-
-
Click to toggle tooltip
-
Dark theme on container
-
-
-
-
Click to toggle tooltip
-
Light theme on container
-
-
-
-
Click to toggle tooltip
-
Dark theme on component
-
-
-
-
Click to toggle tooltip
-
Light theme on component
-
-
-
-
Click to toggle tooltip
-
No theme
-
-
-
H1
-
H2
-
H3
-
H4
-
Paragraph
-
Link
-
-
-
- First layer
-
- Second layer
-
- Third layer
-
-
-
-
-
-
- Description lists
- First description
- Second title
- Second description
-
-
Code example
-
Preformatted text
-
Variable text
-
Keyboard input
-
Sample output
-
- Address P: (123) 456-7890
-
-
- Blockquote
-
-
-
- Styles Blockquote
-
-
-
-
Abbr
-
- Summary
- Details
-
-
highlight
-
This line of text is meant to be treated as deleted text.
-
This line of text is meant to be treated as no longer accurate.
-
This line of text is meant to be treated as an addition to the document.
-
This line of text will render as underlined.
-
This line of text is meant to be treated as fine print.
-
This line rendered as bold text.
-
This line rendered as bold text too.
-
A generic square placeholder image with a gray border around it 200x200
-
Dark theme on container
-
-
-
H1
-
H2
-
H3
-
H4
-
Paragraph
-
Link
-
-
-
- First layer
-
- Second layer
-
- Third layer
-
-
-
-
-
-
- Description lists
- First description
- Second title
- Second description
-
-
Code example
-
Preformatted text
-
Variable text
-
Keyboard input
-
Sample output
-
- Address P: (123) 456-7890
-
-
- Blockquote
-
-
-
- Styles Blockquote
-
-
-
-
Abbr
-
- Summary
- Details
-
-
highlight
-
This line of text is meant to be treated as deleted text.
-
This line of text is meant to be treated as no longer accurate.
-
This line of text is meant to be treated as an addition to the document.
-
This line of text will render as underlined.
-
This line of text is meant to be treated as fine print.
-
This line rendered as bold text.
-
This line rendered as bold text too.
-
A generic square placeholder image with a gray border around it 200x200
-
Light theme on container
-
-
-
H1
-
H2
-
H3
-
H4
-
Paragraph
-
Link
-
-
-
- First layer
-
- Second layer
-
- Third layer
-
-
-
-
-
-
- Description lists
- First description
- Second title
- Second description
-
-
Code example
-
Preformatted text
-
Variable text
-
Keyboard input
-
Sample output
-
- Address P: (123) 456-7890
-
-
- Blockquote
-
-
-
- Styles Blockquote
-
-
-
-
Abbr
-
- Summary
- Details
-
-
highlight
-
This line of text is meant to be treated as deleted text.
-
This line of text is meant to be treated as no longer accurate.
-
This line of text is meant to be treated as an addition to the document.
-
This line of text will render as underlined.
-
This line of text is meant to be treated as fine print.
-
This line rendered as bold text.
-
This line rendered as bold text too.
-
A generic square placeholder image with a gray border around it 200x200
-
Dark theme on component
-
-
-
H1
-
H2
-
H3
-
H4
-
Paragraph
-
Link
-
-
-
- First layer
-
- Second layer
-
- Third layer
-
-
-
-
-
-
- Description lists
- First description
- Second title
- Second description
-
-
Code example
-
Preformatted text
-
Variable text
-
Keyboard input
-
Sample output
-
- Address P: (123) 456-7890
-
-
- Blockquote
-
-
-
- Styles Blockquote
-
-
-
-
Abbr
-
- Summary
- Details
-
-
highlight
-
This line of text is meant to be treated as deleted text.
-
This line of text is meant to be treated as no longer accurate.
-
This line of text is meant to be treated as an addition to the document.
-
This line of text will render as underlined.
-
This line of text is meant to be treated as fine print.
-
This line rendered as bold text.
-
This line rendered as bold text too.
-
A generic square placeholder image with a gray border around it 200x200
-
Light theme on component
-
-
-
H1
-
H2
-
H3
-
H4
-
Paragraph
-
Link
-
-
-
- First layer
-
- Second layer
-
- Third layer
-
-
-
-
-
-
- Description lists
- First description
- Second title
- Second description
-
-
Code example
-
Preformatted text
-
Variable text
-
Keyboard input
-
Sample output
-
- Address P: (123) 456-7890
-
-
- Blockquote
-
-
-
- Styles Blockquote
-
-
-
-
Abbr
-
- Summary
- Details
-
-
highlight
-
This line of text is meant to be treated as deleted text.
-
This line of text is meant to be treated as no longer accurate.
-
This line of text is meant to be treated as an addition to the document.
-
This line of text will render as underlined.
-
This line of text is meant to be treated as fine print.
-
This line rendered as bold text.
-
This line rendered as bold text too.
-
A generic square placeholder image with a gray border around it 200x200
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Tables
-
-No theme
-
-
-
- OUDS Web tables basic and hover look
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
-
-
- OUDS Web tables striped and hover look
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
-
-
- OUDS Web tables when nested
-
- # First Last Handle
-
-
-
- OUDS Web nested table in active row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
- OUDS Web nested table in striped row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
- OUDS Web nested table in striped row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
-
Dark theme on container
-
-
-
- OUDS Web tables basic and hover look
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
-
-
- OUDS Web tables striped and hover look
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
-
-
- OUDS Web tables when nested
-
- # First Last Handle
-
-
-
- OUDS Web nested table in active row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
- OUDS Web nested table in striped row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
- OUDS Web nested table in striped row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
-
Light theme on container
-
-
-
- OUDS Web tables basic and hover look
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
-
-
- OUDS Web tables striped and hover look
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
-
-
- OUDS Web tables when nested
-
- # First Last Handle
-
-
-
- OUDS Web nested table in active row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
- OUDS Web nested table in striped row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
- OUDS Web nested table in striped row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
-
Dark theme on component
-
-
-
- OUDS Web tables basic and hover look
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
-
-
- OUDS Web tables striped and hover look
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
-
-
- OUDS Web tables when nested
-
- # First Last Handle
-
-
-
- OUDS Web nested table in active row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
- OUDS Web nested table in striped row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
- OUDS Web nested table in striped row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
-
Light theme on component
-
-
-
- OUDS Web tables basic and hover look
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
-
-
- OUDS Web tables striped and hover look
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
-
-
- OUDS Web tables when nested
-
- # First Last Handle
-
-
-
- OUDS Web nested table in active row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
- OUDS Web nested table in striped row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
- OUDS Web nested table in striped row
-
- # First Last Handle
-
- 1 Active Row @activeRow 2 Skye Island @scotland
-
-
-
-
No theme
-
-
-
-
-Dark theme on container
-
-
-
-
-Light theme on container
-
-
-
-
-Dark theme on component
-
-
-
-
-Light theme on component
-
-
-
-
-### Checkboxes & Radios
-
-No theme
-
-
-
-
-Dark theme on container
-
-
-
-
-Light theme on container
-
-
-
-
-Dark theme on component
-
-
-
-
-Light theme on component
-
-
-
-
-### Controls
-
-No theme
-
-
-
-
-Dark theme on container
-
-
-
-
-Light theme on container
-
-
-
-
-Dark theme on component
-
-
-
-
-Light theme on component
-
-
-
-
-### File input
-
-No theme
-
-
-
-
-Dark theme on container
-
-
-
-
-Light theme on container
-
-
-
-
-Dark theme on component
-
-
-
-
-Light theme on component
-
-
-
-
-### Helper
-
-No theme
-
-
-
Helper for input
-
- Input label
- Helper for input
-
Dark theme on container
-
-
-
Helper for input
-
- Input label
- Helper for input
-
Light theme on container
-
-
-
Helper for input
-
- Input label
- Helper for input
-
Dark theme on component
-
-
-
Helper for input
-
- Input label
- Helper for input
-
Light theme on component
-
-
-
Helper for input
-
- Input label
- Helper for input
-
No theme
-
-
-
-
- Input group text
-
-
-
- Button
-
- Choose...
- One
- Two
- Three
-
- Options
-
-
Dark theme on container
-
-
-
-
- Input group text
-
-
-
- Button
-
- Choose...
- One
- Two
- Three
-
- Options
-
-
Light theme on container
-
-
-
-
- Input group text
-
-
-
- Button
-
- Choose...
- One
- Two
- Three
-
- Options
-
-
Dark theme on component
-
-
-
-
- Input group text
-
-
-
- Button
-
- Choose...
- One
- Two
- Three
-
- Options
-
-
Light theme on component
-
-
-
-
- Input group text
-
-
-
- Button
-
- Choose...
- One
- Two
- Three
-
- Options
-
-
No theme
-
-
-
Form label
-
Form label
-
Form label
-
Form label
-
Form text helper
-
Dark theme on container
-
-
-
Form label
-
Form label
-
Form label
-
Form label
-
Form text helper
-
Light theme on container
-
-
-
Form label
-
Form label
-
Form label
-
Form label
-
Form text helper
-
Dark theme on component
-
-
-
Form label
-
Form label
-
Form label
-
Form label
-
Form text helper
-
Light theme on component
-
-
-
Form label
-
Form label
-
Form label
-
Form label
-
Form text helper
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Range
-
-No theme
-
-
-
-
-Dark theme on container
-
-
-
-
-Light theme on container
-
-
-
-
-Dark theme on component
-
-
-
-
-Light theme on component
-
-
-
-
-### Select
-
-No theme
-
-
-
- Open this select menu
- One
- Two
- Three
-
-
- Open this select menu
- One
- Two
- Three
-
-
-
-Dark theme on container
-
-
-
- Open this select menu
- One
- Two
- Three
-
-
- Open this select menu
- One
- Two
- Three
-
-
-
-Light theme on container
-
-
-
- Open this select menu
- One
- Two
- Three
-
-
- Open this select menu
- One
- Two
- Three
-
-
-
-Dark theme on component
-
-
-
- Open this select menu
- One
- Two
- Three
-
-
- Open this select menu
- One
- Two
- Three
-
-
-
-Light theme on component
-
-
-
- Open this select menu
- One
- Two
- Three
-
-
- Open this select menu
- One
- Two
- Three
-
-
-
-### Star rating
-
-No theme
-
-
-
-
-
Star rating: rated 3 out of 5
-
-
-
-
-
Dark theme on container
-
-
-
-
-
Star rating: rated 3 out of 5
-
-
-
-
-
Light theme on container
-
-
-
-
-
Star rating: rated 3 out of 5
-
-
-
-
-
Dark theme on component
-
-
-
-
-
Star rating: rated 3 out of 5
-
-
-
-
-
Light theme on component
-
-
-
-
-
Star rating: rated 3 out of 5
-
-
-
-
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Toggle buttons
-
-No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Validation
-
-No theme
-
-
-
-
Choose... ...
-
-
-
-
-
-
-
Step down Step up
-
-
Choose... ... Invalid feedback
-
-
-
-
-
-
-
-
Dark theme on container
-
-
-
-
Choose... ...
-
-
-
-
-
-
-
Step down Step up
-
-
Choose... ... Invalid feedback
-
-
-
-
-
-
-
-
Light theme on container
-
-
-
-
Choose... ...
-
-
-
-
-
-
-
Step down Step up
-
-
Choose... ... Invalid feedback
-
-
-
-
-
-
-
-
Dark theme on component
-
-
-
-
Choose... ...
-
-
-
-
-
-
-
Step down Step up
-
-
Choose... ... Invalid feedback
-
-
-
-
-
-
-
-
Light theme on component
-
-
-
-
Choose... ...
-
-
-
-
-
-
-
Step down Step up
-
-
Choose... ... Invalid feedback
-
-
-
-
-
-
-
-
No theme
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Dark theme on container
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Light theme on container
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Dark theme on component
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Light theme on component
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Colors
-
-No theme
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Dark theme on container
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Light theme on container
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Dark theme on component
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Light theme on component
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-## Helper
-
-### Color & Background (text-bg)
-
-No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Focus ring
-
-No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
-
-### Icon link
-
-No theme
-
-
-
-Dark theme on container
-
-
-
-Light theme on container
-
-
-
-Dark theme on component
-
-
-
-Light theme on component
-
-
diff --git a/site/content/docs/0.0/examples/cards-rtl/index.html b/site/content/docs/0.0/examples/cards-rtl/index.html
deleted file mode 100644
index 3383f5f981..0000000000
--- a/site/content/docs/0.0/examples/cards-rtl/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-layout: examples
-title: بطاقات من اليمين إلى اليسار
-direction: rtl
-aliases:
- - "/examples/cards-rtl"
- - "/docs/examples/cards-rtl"
----
-
-
- أمثلة على البطاقة
-
-
-
-
-
-
-
-
-
-
-
- {{< card rtl=true borders=true >}}
-
-
-
- {{< card rtl=true borders=true metadata=true >}}
-
-
-
- {{< card rtl=true borders=true caption=true >}}
-
-
-
- {{< card rtl=true borders=true caption=true metadata=true >}}
-
-
-
- {{< card rtl=true borders=true caption=true buttons=true >}}
-
-
-
- {{< card rtl=true borders=true caption=true action=true >}}
-
-
-
-
-
- {{< card rtl=true open=true >}}
-
-
-
- {{< card rtl=true open=true metadata=true >}}
-
-
-
- {{< card rtl=true open=true caption=true >}}
-
-
-
- {{< card rtl=true open=true caption=true metadata=true >}}
-
-
-
- {{< card rtl=true open=true caption=true buttons=true >}}
-
-
-
- {{< card rtl=true open=true caption=true action=true >}}
-
-
-
diff --git a/site/content/docs/0.0/examples/cards/index.html b/site/content/docs/0.0/examples/cards/index.html
deleted file mode 100644
index 833282ea6c..0000000000
--- a/site/content/docs/0.0/examples/cards/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: examples
-title: Cards
-aliases:
- - "/examples/cards"
- - "/docs/examples/cards"
----
-
-
- Card examples
-
-
-
-
-
-
-
-
-
-
-
- {{< card borders=true >}}
-
-
-
- {{< card borders=true metadata=true >}}
-
-
-
- {{< card borders=true caption=true >}}
-
-
-
- {{< card borders=true caption=true metadata=true >}}
-
-
-
- {{< card borders=true caption=true buttons=true >}}
-
-
-
- {{< card borders=true caption=true action=true >}}
-
-
-
-
-
- {{< card open=true >}}
-
-
-
- {{< card open=true metadata=true >}}
-
-
-
- {{< card open=true caption=true >}}
-
-
-
- {{< card open=true caption=true metadata=true >}}
-
-
-
- {{< card open=true caption=true buttons=true >}}
-
-
-
- {{< card open=true caption=true action=true >}}
-
-
-
diff --git a/site/content/docs/0.0/examples/download-app/download-app.css b/site/content/docs/0.0/examples/download-app/download-app.css
deleted file mode 100644
index 3e857ece7c..0000000000
--- a/site/content/docs/0.0/examples/download-app/download-app.css
+++ /dev/null
@@ -1,253 +0,0 @@
-.border-subtle {
- --bs-border-color: var(--bs-border-color-subtle);
-}
-
-.custom-vr {
- height: 75px;
- background-color: var(--bs-border-color-subtle);
-}
-
-@media (max-width: 479.98px) {
- .h3 {
- font-size: 1.125rem;
- line-height: 1.111111;
- letter-spacing: -.0125rem;
- }
-}
-
-.icons-sm {
- width: 2.5rem;
- height: 2.5rem;
-}
-
-.icons-md {
- width: 3.125rem;
- height: 3.125rem;
-}
-
-.icons-lg {
- width: 4.375rem;
- height: 4.375rem;
-}
-
-@media (min-width: 768px) {
- .icons-sm {
- width: 3.125rem;
- height: 3.125rem;
- }
-
- .icons-md {
- width: 3.75rem;
- height: 3.75rem;
- }
-
- .icons-lg {
- width: 6.25rem;
- height: 6.25rem;
- }
-}
-
-.out-of-grid {
- position: static;
-}
-
-.out-of-grid img {
- width: 100%;
- min-width: 100%;
- min-height: 165px;
-}
-
-@media (min-width: 1024px) {
- .out-of-grid {
- position: absolute;
- }
-
- .out-of-grid img {
- width: auto;
- }
-}
-
-[data-bs-theme="light"] .dark-show {
- display: none;
-}
-
-[data-bs-theme="dark"] .dark-show + * {
- display: none;
-}
-
-iframe {
- min-height: 10.625rem;
-}
-
-.carousel-inner.showcase-images {
- min-height: calc(216vw - 208px);
-}
-
-.showcase-images img {
- border-radius: 12% / 5%;
- box-shadow: 10px 15px 50px -5px rgba(var(--bs-secondary-rgb), .2);
- transition: transform .3s ease-in-out;
- transform-origin: center;
-}
-
-@media (min-width: 768px) {
- .showcase-images.active > :hover img {
- transform: scale(1.2);
- }
-}
-
-@media (prefers-reduced-motion) {
- .showcase-images.active > :hover img {
- transform: none;
- }
-}
-
-@media (min-width: 768px) {
- .showcase-images > .col {
- transform: translateY(-50px);
- }
-
- .showcase-images.active > .col {
- animation: enter .75s 4 alternate, enter-smooth 1.25s 1 forwards ease-in-out;
- }
-}
-
-@media (prefers-reduced-motion) {
- .showcase-images > .col {
- transform: none;
- }
-
- .showcase-images.active > .col {
- animation: none;
- }
-}
-
-@keyframes enter {
- 0% {
- transform: translateY(-50px);
- animation-timing-function: cubic-bezier(.5, 0, 1, .5);
- }
- 100% {
- transform: translateY(0);
- animation-timing-function: cubic-bezier(0, .5, .5, 1);
- }
-}
-
-@keyframes enter-smooth {
- 0% {
- transform: translateY(-50px);
- }
- 100% {
- transform: translateY(0);
- }
-}
-
-.showcase-images.active > :nth-child(1) {
- animation-delay: 0ms, 3000ms;
-}
-
-.showcase-images.active > :nth-child(2) {
- animation-delay: 100ms, 3100ms;
-}
-
-.showcase-images.active > :nth-child(3) {
- animation-delay: 200ms, 3200ms;
-}
-
-.showcase-images.active > :nth-child(4) {
- animation-delay: 300ms, 3300ms;
-}
-
-.showcase-images.active > :nth-child(5) {
- animation-delay: 400ms, 3400ms;
-}
-
-.showcase-images.active > :nth-child(6) {
- animation-delay: 500ms, 3500ms;
-}
-
-.ticks-list > li {
- opacity: 0;
-}
-
-.ticks-list.active > li {
- animation: enter-start-smooth .75s 1 forwards ease-in-out;
-}
-
-@media (prefers-reduced-motion) {
- .ticks-list > li {
- opacity: 1;
- }
-
- .ticks-list.active > li {
- animation: none;
- }
-}
-
-@keyframes enter-start-smooth {
- 0% {
- opacity: 0;
- transform: translateX(-100px);
- }
- 100% {
- opacity: 1;
- transform: translateX(0);
- }
-}
-
-.ticks-list.active > :nth-child(2) {
- animation-delay: 250ms;
-}
-
-.ticks-list.active > :nth-child(3) {
- animation-delay: 500ms;
-}
-
-.ticks-list.active > :nth-child(4) {
- animation-delay: 750ms;
-}
-
-.ticks-list.active > :nth-child(5) {
- animation-delay: 1000ms;
-}
-
-.ticks-list.active > :nth-child(6) {
- animation-delay: 1250ms;
-}
-
-.mobile-steps > * {
- opacity: 0;
-}
-
-.mobile-steps.active > * {
- animation: enter-bottom-smooth .75s 1 forwards ease-in-out;
-}
-
-@media (prefers-reduced-motion) {
- .mobile-steps > * {
- opacity: 1;
- }
-
- .mobile-steps.active > * {
- animation: none;
- }
-}
-
-@keyframes enter-bottom-smooth {
- 0% {
- opacity: 0;
- transform: translateY(75px);
- }
- 100% {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-.mobile-steps.active > :nth-child(2) {
- animation-delay: .75s;
-}
-
-.mobile-steps.active > :nth-child(3) {
- animation-delay: 2s;
-}
diff --git a/site/content/docs/0.0/examples/download-app/download-app.js b/site/content/docs/0.0/examples/download-app/download-app.js
deleted file mode 100644
index 73f2ad3760..0000000000
--- a/site/content/docs/0.0/examples/download-app/download-app.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* global boosted: false */
-
-(() => {
- 'use strict'
-
- // For a proper redirection on the different stores, please copy paste the code below and adapt the links.
- // Please visit https://developer.android.com/distribute/marketing-tools/linking-to-google-play?hl=fr#UriSummary for more Android information.
- // Please visit https://stackoverflow.com/a/2337601 for more iOS information.
-
- // if (!(/windows phone/i.test(navigator.userAgent)) && /android/i.test(navigator.userAgent)) {
- // window.location.href = 'https://play.google.com/apps/testing/com.orange.ods.app/'
- // }
-
- if (/ipad|iphone|ipod/i.test(navigator.userAgent)) {
- window.location.href = 'itms-apps://apps.apple.com/fr/app/id6446178285'
- }
-
- // End of copy paste
- // We use `itms-apps` instead of `https` for phones. (https://stackoverflow.com/a/2337601)
-
- const observer = new IntersectionObserver(entries => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- entry.target.classList.add('active')
- }
- })
- })
-
- observer.observe(document.querySelector('.showcase-images.row'))
- observer.observe(document.querySelector('.ticks-list'))
- observer.observe(document.querySelector('.mobile-steps#ios-steps'))
- observer.observe(document.querySelector('.mobile-steps#android-steps'))
-
- // Instantiate the carousel
- document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
- .forEach(carousel => {
- boosted.Carousel.getOrCreateInstance(carousel)
- })
-})()
diff --git a/site/content/docs/0.0/examples/download-app/img/Banner_image.png b/site/content/docs/0.0/examples/download-app/img/Banner_image.png
deleted file mode 100644
index 022bc84ffc..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Banner_image.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/Buttons.png b/site/content/docs/0.0/examples/download-app/img/Buttons.png
deleted file mode 100644
index 251aa16831..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Buttons.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/Buttons_dark.png b/site/content/docs/0.0/examples/download-app/img/Buttons_dark.png
deleted file mode 100644
index 16b9b024ab..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Buttons_dark.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/Card.png b/site/content/docs/0.0/examples/download-app/img/Card.png
deleted file mode 100644
index 7c8522b237..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Card.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/Card_dark.png b/site/content/docs/0.0/examples/download-app/img/Card_dark.png
deleted file mode 100644
index cf34c906d9..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Card_dark.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/Components.png b/site/content/docs/0.0/examples/download-app/img/Components.png
deleted file mode 100644
index 575946cd07..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Components.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/Components_dark.png b/site/content/docs/0.0/examples/download-app/img/Components_dark.png
deleted file mode 100644
index c494c906ae..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Components_dark.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/Emphasis.png b/site/content/docs/0.0/examples/download-app/img/Emphasis.png
deleted file mode 100644
index 6f12ba4836..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Emphasis.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/Emphasis_dark.png b/site/content/docs/0.0/examples/download-app/img/Emphasis_dark.png
deleted file mode 100644
index bc02c1f435..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Emphasis_dark.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/Input.png b/site/content/docs/0.0/examples/download-app/img/Input.png
deleted file mode 100644
index 059d097104..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Input.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/Input_dark.png b/site/content/docs/0.0/examples/download-app/img/Input_dark.png
deleted file mode 100644
index 78769d40fa..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/Input_dark.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/List.png b/site/content/docs/0.0/examples/download-app/img/List.png
deleted file mode 100644
index 2612b4cdaf..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/List.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/img/List_dark.png b/site/content/docs/0.0/examples/download-app/img/List_dark.png
deleted file mode 100644
index 01e51bc95d..0000000000
Binary files a/site/content/docs/0.0/examples/download-app/img/List_dark.png and /dev/null differ
diff --git a/site/content/docs/0.0/examples/download-app/index.html b/site/content/docs/0.0/examples/download-app/index.html
deleted file mode 100644
index ae182c54ed..0000000000
--- a/site/content/docs/0.0/examples/download-app/index.html
+++ /dev/null
@@ -1,402 +0,0 @@
----
-layout: examples
-title: Download app
-theme_selector: false
-extra_css:
- - "download-app.css"
-extra_js:
- - src: "download-app.js"
- defer: true
-aliases:
- - "/download-app"
- - "/examples/download-app"
- - "/docs/examples/download-app"
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Orange Design System
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Implementing mobile designs into code
-
A trusted source for developers
-
From documentation, though repositories, to a showcase mobile application, the Orange Design System provides the elements for developers to implement experiences on mobile iOS and Android operating systems, by integrating brand foundations, design standards, societal and environmental commitments.
-
-
-
-
-
-
-
A showcase mobile application
-
-
-
-
-
-
-
The place for mobile designers and developers to experiment the elements of the Orange Design System
-
-
-
-
-
-
-
-
Designers can use the application to experiment, for each mobile operating system, all the available assets and variants, to adjust possible customization.
-
-
-
-
-
Developers access a ready built code base that shows how to best use the assets, conforming to the expected accessibility standards, for faster and more qualitative integration.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Previous
-
-
- Next
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Do you want to start building your app? Get access to the SDK now
-
-
-
-
-
-
What you get from the showcase app
-
-
-
-
-
-
- In situ visibility of all the elements available in the mobile code library for each mobile operating system
-
-
-
-
- Live experience of the available interactions for each component, and ability to select the right customisation
-
-
-
-
- Time saving by finding the code to use, by selecting the right component variant and it's possible customisation
-
-
-
-
- Confidence in the fact that the available components are following the Orange brand standard
-
-
-
-
- Assurance that the components have been tested amongst the accessibility standard from the industry
-
-
-
-
- Coverage of iOS and Android with app and SDK being available in open-source
-
-
-
-
-
-
-
-
-
-
-
How to download the showcase app
-
-
-
-
-
-
-
For iOS, simply hit the button below to download the app on your device.
-
-
-
-
-
-
-
-
For Android, please make sure to follow the two steps process below.
-
-
- 1
- Register with your Google store account to our Beta program list
- Register
-
-
- 2
- Download the app on your device from the Google Play store
-
-
-
-
-
-
-
-
-
Access this website on your mobile device with the QR code below
-
-
- Flash this QR code to access this page with your mobile
-
-
-
-
-
-
-
-
-
Your feedback is valued
-
Let us know if you spot anything to correct or improve
-
-
-
-
-
-
diff --git a/site/content/docs/0.0/examples/footers/index.html b/site/content/docs/0.0/examples/footers/index.html
deleted file mode 100644
index e6a2b3d0f7..0000000000
--- a/site/content/docs/0.0/examples/footers/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: examples
-title: Footers
-body_class: ""
-aliases:
- - "/examples/footers"
- - "/docs/examples/footers"
----
-
-
-
- Footers OUDS Web example
-
-
-
- {{< orange-footer mandatory=true id="1" >}}
- {{< /orange-footer >}}
-
-
-
- {{< orange-footer nav=true mandatory=true id="2" >}}
- {{< /orange-footer >}}
-
-
-
- {{< orange-footer follow=true nav=true mandatory=true extra_social=true id="3" >}}
- {{< /orange-footer >}}
-
-
-
- {{< orange-footer title_content=true follow=true nav=true mandatory=true extra_social=true id="4" >}}
- {{< /orange-footer >}}
-
-
-
- {{< orange-footer title_content=true follow=true nav=true service=true mandatory=true extra_social=true id="5" >}}
- {{< /orange-footer >}}
-
diff --git a/site/content/docs/0.0/examples/form/form.js b/site/content/docs/0.0/examples/form/form.js
deleted file mode 100644
index 77c03e4563..0000000000
--- a/site/content/docs/0.0/examples/form/form.js
+++ /dev/null
@@ -1,25 +0,0 @@
-(() => {
- 'use strict'
-
- // Tooltip
- const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
- const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new boosted.Tooltip(tooltipTriggerEl)) // eslint-disable-line no-unused-vars, no-undef
-
- // Fetch all the forms we want to apply custom Bootstrap validation styles to
- const forms = document.querySelectorAll('.needs-validation')
- // Loop over them and prevent submission
- Array.from(forms).forEach(form => {
- form.addEventListener('submit', event => {
- if (!form.checkValidity()) {
- event.preventDefault()
- event.stopPropagation()
- // Focus on first error
- const invalidItems = form.querySelectorAll(':invalid')
- invalidItems[0].focus()
- invalidItems[0].setAttribute('data-focus-visible-added', '')
- }
-
- form.classList.add('was-validated')
- }, false)
- })
-})()
diff --git a/site/content/docs/0.0/examples/form/index.html b/site/content/docs/0.0/examples/form/index.html
deleted file mode 100644
index 17672544cd..0000000000
--- a/site/content/docs/0.0/examples/form/index.html
+++ /dev/null
@@ -1,263 +0,0 @@
----
-layout: examples
-title: Form example
-theme_selector: false
-extra_js:
- - src: "form.js"
- defer: true
-aliases:
- - "/examples/form"
- - "/docs/examples/form"
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Travel
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Become a reseller
-
-
-
-
-
-
-
- You are a professional and wish to resell Orange products to your customers? Please fill the form and we will get back to you shortly.
-
-
-
-
-
-
diff --git a/site/content/docs/0.0/examples/grid/grid.css b/site/content/docs/0.0/examples/grid/grid.css
deleted file mode 100644
index 2bbfc1937c..0000000000
--- a/site/content/docs/0.0/examples/grid/grid.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.themed-grid-col {
- padding-top: .75rem;
- padding-bottom: .75rem;
- background-color: var(--bs-secondary-bg); /* OUDS mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
- /* OUDS mod: no `border` */
- outline: 1px solid var(--bs-border-color-subtle); /* OUDS mod */
-}
-
-.themed-container {
- /* OUDS mod: no `padding` */
- padding-top: .75rem; /* OUDS mod */
- padding-bottom: .75rem; /* OUDS mod */
- margin-bottom: 1.5rem;
- background-color: var(--bs-secondary-bg); /* OUDS mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
- /* OUDS mod: no `border` */
- outline: 1px solid var(--bs-border-color-subtle); /* OUDS mod */
-}
diff --git a/site/content/docs/0.0/examples/grid/index.html b/site/content/docs/0.0/examples/grid/index.html
deleted file mode 100644
index 649d6c728d..0000000000
--- a/site/content/docs/0.0/examples/grid/index.html
+++ /dev/null
@@ -1,191 +0,0 @@
----
-layout: examples
-title: Grid Template
-extra_css:
- - "grid.css"
-body_class: "py-4"
-aliases:
- - "/examples/grid"
- - "/docs/examples/grid"
----
-
-
-
-
OUDS Web grid examples
-
Basic grid layouts to get you familiar with building within the OUDS Web grid system.
-
In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in OUDS Web by default.
-
-
Five grid tiers
-
There are five tiers to the OUDS Web grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
-
-
-
.col-4
-
.col-4
-
.col-4
-
-
-
-
.col-sm-4
-
.col-sm-4
-
.col-sm-4
-
-
-
-
.col-md-4
-
.col-md-4
-
.col-md-4
-
-
-
-
.col-lg-4
-
.col-lg-4
-
.col-lg-4
-
-
-
-
.col-xl-4
-
.col-xl-4
-
.col-xl-4
-
-
-
-
.col-xxl-4
-
.col-xxl-4
-
.col-xxl-4
-
-
-
Three equal columns
-
Get three equal-width columns starting at desktops and scaling to large desktops . On mobile devices, tablets and below, the columns will automatically stack.
-
-
.col-md-4
-
.col-md-4
-
.col-md-4
-
-
-
Three equal columns alternative
-
By using the .row-cols-* classes, you can easily create a grid with equal columns.
-
-
.col child of .row-cols-md-3
-
.col child of .row-cols-md-3
-
.col child of .row-cols-md-3
-
-
-
Three unequal columns
-
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
-
-
.col-md-3
-
.col-md-6
-
.col-md-3
-
-
-
Two columns
-
Get two columns starting at desktops and scaling to large desktops .
-
-
.col-md-8
-
.col-md-4
-
-
-
Full width, single column
-
-
Warning
-
No grid classes are necessary for full-width elements.
-
-
-
-
-
Two columns with two nested columns
-
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops , with another two (equal widths) within the larger column.
-
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
-
-
-
- .col-md-8
-
-
-
.col-md-6
-
.col-md-6
-
-
-
.col-md-4
-
-
-
-
-
Mixed: mobile and desktop
-
The OUDS Web grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
-
Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.
-
-
.col-md-8
-
.col-6 .col-md-4
-
-
-
.col-6 .col-md-4
-
.col-6 .col-md-4
-
.col-6 .col-md-4
-
-
-
-
-
-
Mixed: mobile, tablet, and desktop
-
-
.col-sm-6 .col-lg-8
-
.col-6 .col-lg-4
-
-
-
.col-6 .col-sm-4
-
.col-6 .col-sm-4
-
.col-6 .col-sm-4
-
-
-
-
-
Gutters
-
With .gx-* classes, the horizontal gutters can be adjusted.
-
-
.col with .gx-4 gutters
-
.col with .gx-4 gutters
-
.col with .gx-4 gutters
-
.col with .gx-4 gutters
-
.col with .gx-4 gutters
-
.col with .gx-4 gutters
-
-
Use the .gy-* classes to control the vertical gutters.
-
-
.col with .gy-4 gutters
-
.col with .gy-4 gutters
-
.col with .gy-4 gutters
-
.col with .gy-4 gutters
-
.col with .gy-4 gutters
-
.col with .gy-4 gutters
-
-
With .g-* classes, the gutters in both directions can be adjusted.
-
-
.col with .g-3 gutters
-
.col with .g-3 gutters
-
.col with .g-3 gutters
-
.col with .g-3 gutters
-
.col with .g-3 gutters
-
.col with .g-3 gutters
-
-
-
-
-
Containers
-
Additional classes added in OUDS Web v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.
-
.container
- .container-sm
- .container-md
- .container-lg
- .container-xl
- .container-xxl
- .container-fluid
-
diff --git a/site/content/docs/0.0/examples/masonry/index.html b/site/content/docs/0.0/examples/masonry/index.html
deleted file mode 100644
index a5d72179e3..0000000000
--- a/site/content/docs/0.0/examples/masonry/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-layout: examples
-title: Masonry example
-extra_js:
- - src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
- integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
- async: true
-aliases:
- - "/examples/masonry"
- - "/docs/examples/masonry"
----
-
-
- OUDS Web and Masonry
- Integrate Masonry with the OUDS Web grid system and cards component.
-
- Masonry is not included in OUDS Web. Add it by including the JavaScript plugin manually, or using a CDN like so:
-
-
-<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
- By adding data-masonry='{"percentPosition": true }' to the .row wrapper, we can combine the powers of OUDS Web's responsive grid and Masonry's positioning.
-
-
-
-
- {{< placeholder width="100%" height="200" class="card-img-top" text="icon" >}}
-
-
Card title that wraps to a new line
-
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-
-
-
-
-
-
-
- A well-known quote, contained in a blockquote element.
-
-
-
-
-
-
-
- {{< placeholder width="100%" height="200" class="card-img-top" text="icon" >}}
-
-
Card title
-
This card has supporting text below as a natural lead-in to additional content.
-
Last updated 3 mins ago
-
-
-
-
-
-
-
- A well-known quote, contained in a blockquote element.
-
-
- Someone famous in Source Title
-
-
-
-
-
-
-
-
Card title
-
This card has a regular title and short paragraph of text below it.
-
Last updated 3 mins ago
-
-
-
-
-
- {{< placeholder width="100%" height="260" class="card-img" text="Card image" color="#999" >}}
-
-
-
-
-
-
- A well-known quote, contained in a blockquote element.
-
-
-
-
-
-
-
-
-
Card title
-
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
-
Last updated 3 mins ago
-
-
-
-
diff --git a/site/content/docs/0.0/examples/navbar-mode-selector/index.html b/site/content/docs/0.0/examples/navbar-mode-selector/index.html
deleted file mode 100644
index c2e55b7f29..0000000000
--- a/site/content/docs/0.0/examples/navbar-mode-selector/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
----
-layout: examples
-title: Navbar with mode selector
-theme_selector: false
-aliases:
- - "/examples/navbar-mode-selector"
- - "/docs/examples/navbar-mode-selector"
----
-
-
-
- {{< orange-supra mode="languages" aria_label="Supra navigation - Mode selector example" >}}
- {{< /orange-supra >}}
-
- {{< orange-global-headers id="global-header-1" mode="theme" supra=true aria_label="Global navigation - Mode selector example">}}
- {{< /orange-global-headers >}}
-
-
-
Title
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia provident fuga animi voluptatem consequatur perspiciatis cum quos maiores, nesciunt dicta et dolor repellat eum odio id nihil, eos nostrum?
-
Primary
-
Secondary
-
diff --git a/site/content/docs/0.0/examples/navbar-sticky/index.html b/site/content/docs/0.0/examples/navbar-sticky/index.html
deleted file mode 100644
index 40df5c1088..0000000000
--- a/site/content/docs/0.0/examples/navbar-sticky/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: examples
-title: Sticky navbar example
-extra_css:
- - "navbar-sticky.css"
-extra_js:
- - src: "navbar-sticky.js"
- defer: true
-aliases:
- - "/examples/navbar-sticky"
- - "/docs/examples/navbar-sticky"
----
-
-
- Difference between sticky and fixed navbar
-
- {{< orange-supra mode="languages" aria_label="Supra navigation - Sticky example" >}}
- {{< /orange-supra >}}
-
- {{< orange-global-headers id="global-header-1" mode="actions" supra=true aria_label="Global navigation - Sticky example" >}}
- {{< /orange-global-headers >}}
-
-
-
- Toggle sticky/fixed header
-
-
diff --git a/site/content/docs/0.0/examples/navbar-sticky/navbar-sticky.css b/site/content/docs/0.0/examples/navbar-sticky/navbar-sticky.css
deleted file mode 100644
index f14be949e5..0000000000
--- a/site/content/docs/0.0/examples/navbar-sticky/navbar-sticky.css
+++ /dev/null
@@ -1,19 +0,0 @@
-main {
- min-height: 150vh;
-}
-
-.fixed-top + * {
- margin-top: 3.125rem;
-}
-
-@media (min-width: 768px) {
- .fixed-top + * {
- margin-top: 6.25rem;
- }
-}
-
-@media (min-width: 1024px) {
- .fixed-top + * {
- margin-top: 8.75rem;
- }
-}
diff --git a/site/content/docs/0.0/examples/navbar-sticky/navbar-sticky.js b/site/content/docs/0.0/examples/navbar-sticky/navbar-sticky.js
deleted file mode 100644
index 9d03d3ea09..0000000000
--- a/site/content/docs/0.0/examples/navbar-sticky/navbar-sticky.js
+++ /dev/null
@@ -1,14 +0,0 @@
-(function () {
- 'use strict'
-
- function switchHeader() {
- const element = document.getElementsByTagName('header')[0]
- const switchEl = document.getElementById('stickySwitch')
- element.classList = switchEl.checked ? 'fixed-top' : 'sticky-top'
- }
-
- switchHeader()
- const switchEl = document.getElementById('stickySwitch')
- switchEl.addEventListener('change', switchHeader)
- window.addEventListener('resize', switchHeader)
-})()
diff --git a/site/content/docs/0.0/examples/navbars/index.html b/site/content/docs/0.0/examples/navbars/index.html
deleted file mode 100644
index 9a0c1c9b8b..0000000000
--- a/site/content/docs/0.0/examples/navbars/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-layout: examples
-title: Navbars
-aliases:
- - "/examples/navbars"
- - "/docs/examples/navbars"
----
-
-
- Navbars OUDS Web example
-
- {{< orange-supra aria_label="Supra navigation - Left navbar only example" >}}
- {{< /orange-supra >}}
-
-
-
-
-
- {{< orange-supra mode="languages" aria_label="Supra navigation - Both navbars with languages example" >}}
- {{< /orange-supra >}}
-
-
-
-
- {{< orange-supra mode="actions" aria_label="Supra navigation - Both navbars with actions example" >}}
- {{< /orange-supra >}}
-
-
-
-
-
-
-
- {{< orange-global-headers id="global-header-1" mode="actions" aria_label="Global navigation - No title example" >}}
- {{< /orange-global-headers >}}
-
-
-
-
- {{< orange-global-headers id="global-header-2" mode="search" aria_label="Global navigation - No title with nav-under example" >}}
- {{< /orange-global-headers >}}
-
-
-
-
- {{< orange-global-headers id="global-header-3" mode="actions" title=true aria_label="Global navigation - With title example" >}}
- {{< /orange-global-headers >}}
-
-
-
-
- {{< orange-global-headers id="global-header-3-1" mode="actions" title=true labels=true navigation=true aria_label="Global navigation - With title and nav-under example" >}}
- {{< /orange-global-headers >}}
-
-
-
-
- {{< orange-global-headers id="global-header-4" mode="actions" title=true title_2=true labels=true aria_label="Global navigation - With two lined title example" >}}
- {{< /orange-global-headers >}}
-
-
-
-
- {{< orange-global-headers id="global-header-4-1" mode="actions" title=true title_2=true labels=true navigation=true aria_label="Global navigation - With two lined title and nav-under example" >}}
- {{< /orange-global-headers >}}
-
-
-
-
-
- {{< orange-global-headers id="global-header-5" mode="actions" responsive_logo=true labels_end=true aria_label="Global navigation - With custom logo example" >}}
- {{< /orange-global-headers >}}
-
-
-
-
-
- {{< orange-global-headers id="global-header-5-1" mode="actions" responsive_logo=true navigation=true aria_label="Global navigation - With custom logo and nav-under example" >}}
- {{< /orange-global-headers >}}
-
-
-
-
diff --git a/site/content/docs/0.0/examples/stickers/index.html b/site/content/docs/0.0/examples/stickers/index.html
deleted file mode 100644
index ab6b55e8bf..0000000000
--- a/site/content/docs/0.0/examples/stickers/index.html
+++ /dev/null
@@ -1,260 +0,0 @@
----
-layout: examples
-title: Stickers
-extra_css:
- - "stickers.css"
-aliases:
- - "/examples/stickers"
- - "/docs/examples/stickers"
----
-
-
-
-
-
-
-
-
-
- Stickers OUDS Web example
-
-
-
-
-
-
-
-
-
-
-
-
- Free delivery
-
-
-
-
-
- 39.99 €
- Per month
-
-
-
-
-
- 69.99 €
- 39.99 €
- Per month
- 39.99 € per month instead of 69.99 €
-
-
-
-
-
- Bonus
- 90 min
- Per month
-
-
-
-
-
- Bonus
- 250 %
- With Orange Money
-
-
-
-
-
- +
- 90 min
- Per month
-
-
-
-
-
- +
- 250 %
- With Orange Money
-
-
-
-
-
-
-
-
-
-
-
-
-
- Free delivery
-
-
-
-
-
- 39.99 €
- Per month
-
-
-
-
-
- 69.99 €
- 39.99 €
- Per month
- 39.99 € per month instead of 69.99 €
-
-
-
-
-
- Bonus
- 90 min
- Per month
-
-
-
-
-
- Bonus
- 250 %
- With Orange Money
-
-
-
-
-
- +
- 90 min
- Per month
-
-
-
-
-
- +
- 250 %
- With Orange Money
-
-
-
-
-
-
-
-
-
-
-
-
-
- Free delivery
-
-
-
-
-
- 39.99 €
- Per month
-
-
-
-
-
- 69.99 €
- 39.99 €
- Per month
- 39.99 € per month instead of 69.99 €
-
-
-
-
-
- Bonus
- 90 min
- Per month
-
-
-
-
-
- Bonus
- 250 %
- With Orange Money
-
-
-
-
-
- +
- 90 min
- Per month
-
-
-
-
-
- +
- 250 %
- With Orange Money
-
-
-
diff --git a/site/content/docs/0.0/examples/stickers/stickers.css b/site/content/docs/0.0/examples/stickers/stickers.css
deleted file mode 100644
index 461c57c764..0000000000
--- a/site/content/docs/0.0/examples/stickers/stickers.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/* Values need to be adapted to your needs */
-
-.sticker-fs-4xl {
- font-size: 3.75rem;
- line-height: 1;
- letter-spacing: -.125rem;
-}
-
-.sticker-fs-3xl {
- font-size: 2.5rem;
- line-height: 1;
- letter-spacing: -.0625rem;
-}
-
-.sticker-fs-2xl {
- font-size: 2.125rem;
- line-height: 1;
- letter-spacing: -.0625rem;
-}
-
-.sticker-fs-xl {
- font-size: 1.875rem;
- line-height: calc(32 / 30);
- letter-spacing: -.05rem;
-}
-
-.sticker-fs-l {
- font-size: 1.5rem;
- line-height: calc(26 / 24);
- letter-spacing: -.03125rem;
-}
-
-.sticker-fs-m {
- font-size: 1.25rem;
- line-height: calc(22 / 20);
- letter-spacing: -.025rem;
-}
-
-.sticker-fs-s {
- font-size: 1.125rem;
- line-height: calc(20 / 18);
- letter-spacing: -.0125rem;
-}
diff --git a/site/content/docs/0.0/examples/tags/index.html b/site/content/docs/0.0/examples/tags/index.html
deleted file mode 100644
index af8655d326..0000000000
--- a/site/content/docs/0.0/examples/tags/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-layout: examples
-title: Tags
-html_class: "h-100"
-body_class: "d-flex flex-column h-100"
-aliases:
- - "/examples/tags"
- - "/docs/examples/tags"
----
-
-
- Present some ways the tags could be used
-
-
- Use informative tags in a table context
-
-
- Id
- Name
- Associated tags
-
-
-
-
- 1
- Larry
-
-
-
-
-
- 2
- Bootstrap
-
-
-
-
-
-
-
-
-
-
Example of anchor links
-
Links to anchor in an imaginary page
-
-
-
-
-
-
-
-
-
-
-
diff --git a/site/content/docs/0.0/examples/title-bars/index.html b/site/content/docs/0.0/examples/title-bars/index.html
deleted file mode 100644
index 4069ca68c9..0000000000
--- a/site/content/docs/0.0/examples/title-bars/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-layout: examples
-title: Title Bars Template
-extra_css:
- - "title-bars.css"
-html_class: "h-100"
-body_class: "d-flex flex-column"
-aliases:
- - "/examples/title-bars"
- - "/docs/examples/title-bars"
----
-
-
-
-
-
-
-
-
-
Title
-
-
-
-
-
-
-
-
-
-
-
-
-
Information
-
-
Background image
-
In order to have a correct background image in the following title bar, the .example-title-bar-custom-background extra class and the corresponding CSS can be found in title-bars.css .
-
-
-
-
-
-
diff --git a/site/content/docs/0.0/examples/title-bars/title-bars.css b/site/content/docs/0.0/examples/title-bars/title-bars.css
deleted file mode 100644
index e03af29e80..0000000000
--- a/site/content/docs/0.0/examples/title-bars/title-bars.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/* Display the right background-image */
-.example-title-bar-custom-background {
- height: 1.8em;
- background: url("/docs/0.0/assets/img/title-bars-illustrations/illustration-320.png") right bottom/4em no-repeat; /* 4em = `image_width/font_size`em */
-}
-@media (min-width: 480px) {
- .example-title-bar-custom-background {
- background: url("/docs/0.0/assets/img/title-bars-illustrations/illustration-480.png") right bottom/7.47em no-repeat;
- }
-}
-@media (min-width: 768px) {
- .example-title-bar-custom-background {
- background: url("/docs/0.0/assets/img/title-bars-illustrations/illustration-768.png") right bottom/7.12em no-repeat;
- }
-}
-@media (min-width: 1024px) {
- .example-title-bar-custom-background {
- background: url("/docs/0.0/assets/img/title-bars-illustrations/illustration-1024.png") right bottom/8.08em no-repeat;
- }
-}
-@media (min-width: 1280px) {
- .example-title-bar-custom-background {
- background: url("/docs/0.0/assets/img/title-bars-illustrations/illustration-1280.png") right bottom/7.85em no-repeat;
- }
-}
-@media (min-width: 1440px) {
- .example-title-bar-custom-background {
- background: url("/docs/0.0/assets/img/title-bars-illustrations/illustration-1440.png") right bottom/8.67em no-repeat;
- }
-}
diff --git a/site/content/docs/0.0/guidelines/_index.md b/site/content/docs/0.0/guidelines/_index.md
deleted file mode 100644
index 38b0631fff..0000000000
--- a/site/content/docs/0.0/guidelines/_index.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-layout: single
-title: Orange Design System for web
-description: Streamline your workflow and improve experience consistency with this cross-platform, scalable and inspiring design system. Designers, developers, marketers and partners, start your digital creations from the ready-to-use resources here!
-aliases:
- - "/guidelines/"
- - "/docs/guidelines/"
----
-
-
-
-
Other platforms in the Orange Design System
-
- {{< design-guidelines-cards.inline >}}
- {{ range (index $.Site.Data "design-guidelines") -}}
-
-
-
-
-
-
- {{ end -}}
- {{< /design-guidelines-cards.inline >}}
-
-
-
diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md
index 405c2f63f1..d73cc342aa 100644
--- a/site/content/docs/0.0/layout/containers.md
+++ b/site/content/docs/0.0/layout/containers.md
@@ -21,8 +21,6 @@ OUDS Web comes with three different containers:
The table below illustrates how each container's `max-width` compares to the original `.container` and `.container-fluid` across each breakpoint.
-See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}).
-
Please note that we apply an extra-padding on our containers (see [our mixins](#mixins))
{{< bs-table "table" >}}
diff --git a/site/data/core-team.yml b/site/data/core-team.yml
index 7ced2fcb9c..fb27ee4927 100644
--- a/site/data/core-team.yml
+++ b/site/data/core-team.yml
@@ -1,11 +1,11 @@
-- name: Loïc Laussel
- user: Lausselloic
-
- name: Julien Déramond
user: julien-deramond
+- name: Hannah Issermann
+ user: hannahiss
+
- name: Louis-Maxime Piton
user: louismaximepiton
-- name: Hannah Issermann
- user: hannahiss
+- name: Vincent Prothais
+ user: vprothais
diff --git a/site/data/design-guidelines.yml b/site/data/design-guidelines.yml
deleted file mode 100644
index 30064d51c0..0000000000
--- a/site/data/design-guidelines.yml
+++ /dev/null
@@ -1,19 +0,0 @@
-- name: "Android"
- description: "Design system for Android"
- link: "https://oran.ge/dsandroid"
- image: "assets/img/platforms/android.png"
-
-- name: "iOS"
- description: "Design system for iOS"
- link: "https://oran.ge/dsios"
- image: "assets/img/platforms/iOS.png"
-
-- name: "Extended Reality"
- description: "Design system for Extended Reality"
- link: "https://system.design.orange.com/0c1af118d/n/051ce9"
- image: "assets/img/platforms/extended-reality.png"
-
-- name: "Conversational"
- description: "Design system for Conversational"
- link: "https://system.design.orange.com/0c1af118d/n/3844b3"
- image: "assets/img/platforms/conversational.png"
diff --git a/site/data/examples.yml b/site/data/examples.yml
index 02526abb6f..ad126bdef9 100644
--- a/site/data/examples.yml
+++ b/site/data/examples.yml
@@ -36,57 +36,3 @@
description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack."
url: /examples/tree/main/webpack
indexPath: src/index.html
-
-- category: Snippets
- description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more."
- examples:
- - name: Footers
- description: "Finish every page strong with an awesome footer, big or small."
-
-- category: Custom Components
- description: "Brand-new components and templates to help folks quickly get started with OUDS Web and demonstrate best practices for adding onto the framework."
- examples:
- - name: Cards
- description: "List of all card variants (content and design)."
- - name: Stickers
- description: "List of all sticker variants."
- - name: Tags
- description: "Some tags use cases from links to filter."
- - name: Title bars
- description: "Orange branded title bars to introduce titles."
-
-- category: Framework
- description: "Examples that focus on implementing uses of built-in components provided by OUDS Web."
- examples:
- - name: Grid
- description: "Multiple examples of grid layouts with all four tiers, nesting, and more."
-
-- category: Navbars
- description: "Taking the default navbar component and showing how it can be moved, placed, and extended."
- examples:
- - name: Navbars
- description: "Demonstration of all responsive and container options for the navbar."
- - name: Navbar sticky
- description: "Single navbar example of a sticky-top navbar along with some additional content."
- - name: Navbar mode selector
- description: "Single navbar example with a mode selector to switch between light and dark mode."
-
-- category: Pages
- description: "Complete reusable pages that can be found in the Design Guidelines."
- examples:
- - name: Download app
- description: "How to build a download app page (redirect on iOS and Android)."
- - name: Form
- description: "How to build a form with OUDS Web."
-
-- category: RTL
- description: "See OUDS Web's RTL version in action with these modified Custom Components examples."
- examples:
- - name: "Cards RTL"
- description: "List of all card variants (content and design)."
-
-- category: Integrations
- description: "Integrations with external libraries."
- examples:
- - name: "Masonry"
- description: "Combine the powers of the OUDS Web grid and the Masonry layout."
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 81b6e596c3..f90513d008 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -6,162 +6,273 @@
icon_color: body-color
pages:
- title: Introduction
+ draft: true
- title: Download
+ draft: true
- title: Contents
+ draft: true
- title: Browsers & devices
+ draft: true
- title: JavaScript
+ draft: true
- title: Webpack
+ draft: true
- title: Parcel
+ draft: true
- title: Vite
+ draft: true
- title: Accessibility
+ draft: true
- title: RFS
+ draft: true
- title: RTL
+ draft: true
- title: Contribute
+ draft: true
- title: Customize
icon: palette2
icon_color: body-color
pages:
- title: Overview
+ draft: true
- title: Sass
+ draft: true
- title: Options
+ draft: true
- title: Color palette
+ draft: true
- title: Color theme
+ draft: true
- title: Color modes
+ draft: true
- title: Components
+ draft: true
- title: CSS variables
+ draft: true
- title: Optimize
+ draft: true
- title: Layout
icon: grid-fill
icon_color: body-color
pages:
- title: Breakpoints
+ draft: true
- title: Containers
+ draft: true
- title: Grid
+ draft: true
- title: Columns
+ draft: true
- title: Gutters
+ draft: true
- title: Utilities
+ draft: true
- title: Z-index
+ draft: true
- title: CSS Grid
+ draft: true
- title: Content
icon: file-earmark-richtext
icon_color: body-color
pages:
- title: Reboot
+ draft: true
- title: Typography
+ draft: true
- title: Images
+ draft: true
- title: Tables
+ draft: true
- title: Figures
+ draft: true
- title: Forms
icon: ui-radios
icon_color: body-color
pages:
- title: Overview
+ draft: true
- title: Form control
+ draft: true
- title: Select
+ draft: true
- title: Checks & radios
+ draft: true
- title: Range
+ draft: true
- title: Input group
+ draft: true
- title: Quantity selector
+ draft: true
- title: Layout
+ draft: true
- title: Validation
+ draft: true
- title: Components
icon: menu-button-wide-fill
icon_color: body-color
pages:
- title: Accordion
+ draft: true
- title: Alerts
+ draft: true
- title: Back to top
+ draft: true
- title: Badge
+ draft: true
- title: Breadcrumb
+ draft: true
- title: Buttons
+ draft: true
- title: Button group
+ draft: true
- title: Card
+ draft: true
- title: Carousel
+ draft: true
- title: Close button
+ draft: true
- title: Collapse
+ draft: true
- title: Dropdowns
+ draft: true
- title: Footer
+ draft: true
- title: List group
+ draft: true
- title: Local navigation
+ draft: true
- title: Modal
+ draft: true
- title: Navbar
+ draft: true
- title: Navs & tabs
+ draft: true
- title: Offcanvas
+ draft: true
- title: Orange navbar
+ draft: true
- title: Pagination
+ draft: true
- title: Placeholders
+ draft: true
- title: Popovers
+ draft: true
- title: Progress
+ draft: true
- title: Scrollspy
+ draft: true
- title: Spinners
+ draft: true
- title: Stepped process
+ draft: true
- title: Sticker
+ draft: true
- title: Tags
+ draft: true
- title: Title bars
+ draft: true
- title: Toasts
+ draft: true
- title: Tooltips
+ draft: true
- title: Helpers
icon: magic
icon_color: body-color
pages:
- title: Clearfix
+ draft: true
- title: Color & background
+ draft: true
- title: Colored links
+ draft: true
- title: Focus ring
+ draft: true
- title: Icon link
+ draft: true
- title: Position
+ draft: true
- title: Ratio
+ draft: true
- title: Stacks
+ draft: true
- title: Stretched link
+ draft: true
- title: Text truncation
+ draft: true
- title: Vertical rule
+ draft: true
- title: Visually hidden
+ draft: true
- title: Utilities
icon: braces-asterisk
icon_color: body-color
pages:
- title: API
+ draft: true
- title: Background
+ draft: true
- title: Borders
+ draft: true
- title: Colors
+ draft: true
- title: Display
+ draft: true
- title: Flex
+ draft: true
- title: Float
+ draft: true
- title: Interactions
+ draft: true
- title: Link
+ draft: true
- title: Object fit
+ draft: true
- title: Opacity
+ draft: true
- title: Overflow
+ draft: true
- title: Position
+ draft: true
- title: Shadows
+ draft: true
- title: Sizing
+ draft: true
- title: Spacing
+ draft: true
- title: Text
+ draft: true
- title: Vertical align
+ draft: true
- title: Visibility
+ draft: true
- title: Z-index
+ draft: true
- title: Extend
icon: tools
icon_color: body-color
pages:
- title: Approach
+ draft: true
- title: Icons
+ draft: true
- title: About
icon: globe2
icon_color: body-color
pages:
- title: Overview
+ draft: true
- title: Team
- title: Brand
+ draft: true
- title: License
- title: Translations
- title: Cookies
diff --git a/site/layouts/_default/home.html b/site/layouts/_default/home.html
index 1c882a76f5..b5192b8f5c 100644
--- a/site/layouts/_default/home.html
+++ b/site/layouts/_default/home.html
@@ -5,8 +5,6 @@
{{ partial "home/get-started" . }}
{{ partial "home/customize" . }}
{{ partial "home/css-variables" . }}
- {{ partial "home/components-utilities" . }}
- {{ partial "home/plugins" . }}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 8f478100bb..36707125aa 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -33,12 +33,6 @@
Examples
-
- Design guidelines
-
-
- Solaris icons
-
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 5bb69e0b7a..e35cdce2b2 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -26,6 +26,7 @@
{{- range $doc := $group.pages -}}
{{- $doc_slug := $doc.title | urlize -}}
+ {{- $is_draft := $doc.draft -}}
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
{{ if eq $group_slug "migrations" }}
{{- $is_active = eq $page_slug $doc_slug -}}
@@ -34,7 +35,7 @@
{{ if eq $group_slug "migrations" }}
{{- $href = urls.JoinPath "/docs" $.Site.Params.docs_version $doc_slug "/" }}
{{ end }}
- {{ $doc.title }} {{ $doc.title }}
diff --git a/site/layouts/partials/examples/main.html b/site/layouts/partials/examples/main.html
index 912db194a6..31f4a6e330 100644
--- a/site/layouts/partials/examples/main.html
+++ b/site/layouts/partials/examples/main.html
@@ -13,11 +13,10 @@
{{ $entry.category }}
{{ if eq $entry.category "Starters" -}}
- To get working OUDS Web examples based on the Bootstrap ones , you need to replace all bootstrap occurrences with boosted in some files.
+ To get working OUDS Web examples based on the Bootstrap ones , you need to replace all bootstrap occurrences with ouds-web in some files.
You may need to tweak a bit Sass files.
- "Import OUDS Web" sections in our Parcel , Vite or Webpack guides could help you.
{{ end -}}
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 2b1e9cb394..a5f56e12c6 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -19,8 +19,6 @@
Home Docs Examples
-
Design guidelines
-
Solaris icons
- 
-