Skip to content

Commit

Permalink
Change docs page information organisation + delete some examples in E…
Browse files Browse the repository at this point in the history 
…xample page

Signed-off-by: Isabelle Chanclou <[email protected]>
  • Loading branch information
@isabellechanclou
isabellechanclou committed Dec 17, 2021
1 parent 78054e1 commit 7a468c9
Show file tree
Hide file tree
Showing 2 changed files with 178 additions and 147 deletions.
263 changes: 177 additions & 86 deletions site/content/docs/5.1/components/orange-local-headers.md
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,80 @@
---
layout: docs
title: Orange local headers
description: Documentation and examples for Boosted's exclusive Brand responsive navbars.
description: Documentation and examples for Boosted's exclusive Brand responsive title bars, breadcrumbs and local navigation bars.
group: components
toc: true
---

## Overview
## Examples
Below some examples. For more, refer to [Examples]({{<docsref "/examples/title-bars">}}).
### Title bars
#### On black

{{< example class="p-0" >}}
<div class="bg-dark title-bar">
<div class="px-1 px-md-2 px-lg-4 px-xxl-0">
<div class="px-xl-3 px-xxl-2 container-xxl d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0">Title</h1>
</div>
</div>
</div>
</div>
{{</ example >}}

Some examples are available in the [examples' section]({{<docsref "/examples/title-bars">}}). You can also see the [design specifications](https://system.design.orange.com/0c1af118d/p/774477-local-headers/b/743cd0).
#### With image

{{< example class="p-0">}}
<div class="bg-supporting-pink title-bar">
<div class="px-1 px-md-2 px-lg-4 px-xxl-0">
<div class="px-xl-3 px-xxl-2 container-xxl d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0">Title</h1>
</div>
<div class="pt-1 pt-md-2 ms-auto mt-auto text-end m-0">
<picture>
<source media="(min-width:1440px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1440.png">
<source media="(min-width:1280px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1280.png">
<source media="(min-width:1024px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1024.png">
<source media="(min-width:768px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-768.png">
<source media="(min-width:480px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-480.png">
<source media="(min-width:320px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png">
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png" alt=""/>
</picture>
</div>
</div>
</div>
</div>

{{</ example >}}

### Breadcrumb

{{< callout info >}}
The local navigation will come with [#890]({{<param repo>}}/issues/890).
Example will come with issue [#891]({{<param repo>}}/issues/891).
{{</ callout >}}
### Local navigation bar

Branded breadcrumbs will come with [#891]({{<param repo>}}/issues/891).
{{< callout info >}}
Example will come with issue [#890]({{<param repo>}}/issues/890).
{{</ callout >}}

## Title bars

Title bars have been built to be used just after a global header to display the title of the page. As they are based on utilities for spacing and backgrounds, title bars were designed to take `100vw` width.
A title bar is designed to display the title of a page and shall be placed right below a global header.

Being based on spacing and backgrounds utilities, title bars were designed to take `100vw` width.


### Background color

Use our [background utilities]({{<docsref "/utilities/background">}}) to change the appearance of a title bar. The ones that are Orange branded are the `.bg-dark .bg-white .bg-supporting-*`. The **colored** ones are supposed to be used only with **images and short title**.
To change the appearance of a title bar, use our [background utilities]({{<docsref "/utilities/background">}}). Orange branded background utilities are `.bg-dark`, `.bg-white` and `.bg-supporting-*`.

Background color other than white or black must be used only in title bars containing a **short title** and at least **one image**.

{{< example >}}
<div class="bg-dark title-bar">
{{< example class="p-0">}}
<div class="bg-body title-bar">
<div class="px-2 px-md-3 px-lg-4 px-xxl-5">
<div class="px-lg-2 px-xl-3 px-xxl-2 d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
Expand All @@ -35,9 +84,9 @@ Use our [background utilities]({{<docsref "/utilities/background">}}) to change
</div>
</div>

<div class="mt-3"></div>
<div class="mt-3 bg-light"></div>

<div class="bg-body title-bar">
<div class="bg-dark title-bar">
<div class="px-2 px-md-3 px-lg-4 px-xxl-5">
<div class="px-lg-2 px-xl-3 px-xxl-2 d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
Expand All @@ -46,102 +95,144 @@ Use our [background utilities]({{<docsref "/utilities/background">}}) to change
</div>
</div>
</div>

<div class="mt-3 bg-light"></div>

<div class="bg-supporting-pink title-bar">
<div class="px-1 px-md-2 px-lg-4 px-xxl-0">
<div class="px-xl-3 px-xxl-2 container-xxl d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0">Title</h1>
</div>
<div class="pt-1 pt-md-2 ms-auto mt-auto text-end m-0">
<picture>
<source media="(min-width:1440px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1440.png">
<source media="(min-width:1280px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1280.png">
<source media="(min-width:1024px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1024.png">
<source media="(min-width:768px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-768.png">
<source media="(min-width:480px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-480.png">
<source media="(min-width:320px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png">
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png" alt=""/>
</picture>
</div>
</div>
</div>
</div>
{{</ example >}}

### Images

Title bars include a few options to work with images.

We **strongly recommend** to use `srcset` attribute as it is very well supported by browsers and as it allows you to load an image depending on the device of the user. However, it might introduce a delay to display the image while resizing.

{{< callout warning >}}
It doesn't render well here, as the breakpoints for the font-size and for the spacing are screen based. Please see [**our examples on title bars**]({{<docsref "/examples/title-bars">}}).

The background image based title bar requires some extra css that you can see on our example page too.
{{< /callout >}}

```html
<div class="bg-supporting-pink title-bar">
<div class="px-2 px-md-3 px-lg-4 px-xxl-5">
<div class="px-lg-2 px-xl-3 px-xxl-2 d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0">Srcset based</h1>
</div>
<div class="pt-1 pt-md-2 ms-auto mt-auto text-end m-0">
<picture>
<source media="(min-width:1440px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1440.png">
<source media="(min-width:1280px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1280.png">
<source media="(min-width:1024px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1024.png">
<source media="(min-width:768px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-768.png">
<source media="(min-width:480px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-480.png">
<source media="(min-width:320px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png">
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png" alt=""/>
</picture>
Several options are available to add an image in a title bar.

#### Srcset
We **strongly recommend** to use `srcset` attribute as it is very well supported by browsers and allows you to load an image depending on the device of the user. However, it might introduce a delay to display the image while resizing.

{{< example class="p-0">}}
<div class="bg-supporting-pink title-bar">
<div class="px-1 px-md-2 px-lg-4 px-xxl-0">
<div class="px-xl-3 px-xxl-2 container-xxl d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0">Srcset</h1>
</div>
<div class="pt-1 pt-md-2 ms-auto mt-auto text-end m-0">
<picture>
<source media="(min-width:1440px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1440.png">
<source media="(min-width:1280px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1280.png">
<source media="(min-width:1024px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1024.png">
<source media="(min-width:768px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-768.png">
<source media="(min-width:480px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-480.png">
<source media="(min-width:320px)" srcset="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png">
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png" alt=""/>
</picture>
</div>
</div>
</div>
</div>
</div>

<div class="bg-supporting-green title-bar">
<div class="px-2 px-md-3 px-lg-4 px-xxl-5">
<div class="px-lg-2 px-xl-3 px-xxl-2 d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0">Img based</h1>
</div>
<div class="pt-1 pt-md-2 ms-auto mt-auto text-end m-0">
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png" alt="" class="d-sm-none" />
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-480.png" alt="" class="d-none d-sm-block d-md-none" />
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-768.png" alt="" class="d-none d-md-block d-lg-none" />
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1024.png" alt="" class="d-none d-lg-block d-xl-none" />
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1280.png" alt="" class="d-none d-xl-block d-xxl-none" />
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1440.png" alt="" class="d-none d-xxl-block" />
{{</ example >}}

#### Svg image

{{< example class="p-0">}}
<div class="bg-supporting-purple title-bar">
<div class="px-1 px-md-2 px-lg-4 px-xxl-0">
<div class="px-xl-3 px-xxl-2 container-xxl d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0">Svg image</h1>
</div>
<div class="pt-1 pt-md-2 ms-auto mt-auto text-end m-0 d-flex gap-2">
<svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#logo"/>
</svg>
</div>
</div>
</div>
</div>
</div>

<div class="bg-supporting-purple title-bar">
<div class="px-2 px-md-3 px-lg-4 px-xxl-5">
<div class="px-lg-2 px-xl-3 px-xxl-2 d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0">Svg based</h1>
</div>
<div class="pt-1 pt-md-2 ms-auto mt-auto text-end m-0 d-flex gap-2">
<svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#logo"/>
</svg>
<svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#logo"/>
</svg>
<svg viewBox="0 0 50 50" class="d-none d-sm-block" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#logo"/>
</svg>
<svg viewBox="0 0 50 50" class="d-none d-md-block" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#logo"/>
</svg>
{{</ example >}}

#### \<img\>

{{< example class="p-0">}}
<div class="bg-supporting-green title-bar">
<div class="px-1 px-md-2 px-lg-4 px-xxl-0">
<div class="px-xl-3 px-xxl-2 container-xxl d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0">img</h1>
</div>
<div class="pt-1 pt-md-2 ms-auto mt-auto text-end m-0">
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-320.png" alt="" class="d-sm-none" />
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-480.png" alt="" class="d-none d-sm-block d-md-none" />
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-768.png" alt="" class="d-none d-md-block d-lg-none" />
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1024.png" alt="" class="d-none d-lg-block d-xl-none" />
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1280.png" alt="" class="d-none d-xl-block d-xxl-none" />
<img src="/docs/{{< param docs_version >}}/assets/img/title-bars-illustrations/illustration-1440.png" alt="" class="d-none d-xxl-block" />
</div>
</div>
</div>
</div>
</div>

<div class="bg-supporting-blue title-bar">
<div class="px-2 px-md-3 px-lg-4 px-xxl-5">
<div class="px-lg-2 px-xl-3 px-xxl-2 d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0 me-3">Bg-image</h1>
{{</ example >}}

#### Background-image

{{< callout warning >}}
The background image based title bar requires some extra css that you can see on our [Examples]({{<docsref "/examples/title-bars">}}) page too.
{{< /callout >}}

{{< example class="p-0">}}
<div class="bg-supporting-blue title-bar">
<div class="px-1 px-md-2 px-lg-4 px-xxl-0">
<div class="px-xl-3 px-xxl-2 container-xxl d-flex">
<div class="pt-3 pt-md-4 pb-2 pb-md-3">
<h1 class="py-xl-1 m-0 me-1">Background-image</h1>
</div>
<div class="mt-auto col m-0 example-title-bar-custom-background"></div>
</div>
<h1 class="mt-auto col m-0 example-title-bar-custom-background"></h1>
</div>
</div>
</div>
```

{{</ example >}}

### Customize

In order to customize your css file, here are some clues on how to do it :
Informations to help you customize your css file:

- **For background images:**
The numbers following `bottom/number` are, for each breakpoint, the result of `image width/font-size`.

**For background images :**
The weird numbers after `bottom/number` are the results, for each breakpoint, of `image width/font-size`.
- **For displaying images :**
For each breakpoint, max-widths are calculated as follow: (`text width + image width + padding + 8`)/(`16`)

## Breadcrumb

{{< callout info >}}
Branded breadcrumbs will come with issue [#891]({{<param repo>}}/issues/891).
{{</ callout >}}

## Local navigation bar

{{< callout info >}}
The local navigation bars will come with issue [#890]({{<param repo>}}/issues/890).
{{</ callout >}}

**For displaying images :**
The max-width are calculated, for each breakpoint, as follow : (`text width + image width + padding + 8`)/(`16`)
Loading

0 comments on commit 7a468c9

Please sign in to comment.