Componentes Fluid Engie - Engie Website 2023

Header

EN / FR

Espace client

Stories fixed

EN / FR

Espace client

Reduced on scroll

EN / FR

Espace client

mobile breakpoint lg

EN / FR

Espace client

Autocomplete

Example

Avatar

Stories

Link

Clickble

Notification

25 notifications

Status

Bagde

Bold

75+

Subtle

75+

Minimal

75+

Bold color variants

Information, in progress

Danger

Warning

Success

Information

Discovery

Subtle color variants

Information, in progress

Danger

Warning

Success

Information

Discovery

Minimal color variants

Information, in progress

Danger

Warning

Success

Information

Discovery

Stories

75+

Information, in progress

Danger

Warning

Success

Information

Discovery

Emphasis variant: Subtle

Information, in progress

Danger

Warning

Success

Information

Discovery

Emphasis variant: Minimal

Information, in progress

Danger

Warning

Success

Information

Discovery

Breadcrumb

Buttons

Primary icon

Secondary icon

Destructive icon

Inverse icon

Cards

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Indicator

7,234,000

check_circle positive evolution 1,6%

Stories

Category Date Author

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Updated 24/01/2017

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius, expedita illo minus molestias natus pariatur perferendis, sed tenetur! Cumque magnam qui quis, sequi similique suscipit voluptas.

Horizontal with image

tag

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

15/04/2020

tag

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

15/04/2020

Cover

Villes et collectivités

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Villes et collectivités

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Villes et collectivités

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Particuliers

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Card decks

Card title

This is a longer 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

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card columns

1 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

2 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

3 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

4 - Card title

tag

5 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

5 Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

6 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

7 - Card title

tag

8 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

9 - Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur dolorum earum harum, hic illum ipsa molestias nam odit quis quo quos repellat, repudiandae similique soluta veniam veritatis vero voluptatum!

10 - Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius, expedita illo minus molestias natus pariatur perferendis.

tag

Other example

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

20 users included
10 of storage
Priority email support
Help center access

Offer details

Checkbox

Wonderful choice

Bad choice

Disabled choice

Disabled checked choice

Inline choice 1

Inline choice 2

Inline choice 3 disabled

Stories

HTML5 Native Form validation is taken into account with required attribute. Fields with * are mandatory.

Forced errors with .has-danger class

Fab

Stories

Disabled state

Speed dial mode

Footer

Stories List of links

Inline Message

Title error Message

Message description or remediation action

Title info Message

Message description or remediation action

Title success Message

Message description or remediation action

Title warning Message

Message description or remediation action

Title fatal error Message

Message description or remediation action

Stories No Status Indicator

Title error Message

Message description or remediation action

Title info Message

Message description or remediation action

Title success Message

Message description or remediation action

Title warning Message

Message description or remediation action

Title fatal error Message

Message description or remediation action

Closable

Title error Message

Message description or remediation action

Title info Message

Message description or remediation action

Title success Message

Message description or remediation action

Title warning Message

Message description or remediation action

Title fatal error Message

Message description or remediation action

Link

Here is a text link

Here is a text link

Here is a text link

Here is a text link

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, incidunt

Stories Bold

Here is a text link

Here is a text link

Here is a text link

Here is a text link

Small

Here is a text link

Here is a text link

Here is a text link

Here is a text link

Contextual

Here is a text link

Here is a text link

Here is a text link

Here is a text link

Grayed

Here is a text link

Here is a text link

Here is a text link

Here is a text link

High contrast

Here is a text link

Here is a text link

Here is a text link

Here is a text link

Inverse

Here is a text link

Here is a text link

Here is a text link

Here is a text link

External link

List

Icon text alternative Default item with icon and right content Icon text alternative
Icon text alternative Active item with icon and right content Icon text alternative
Icon text alternative Default item with icon and badge as right content
7
Icon text alternative Active item with icon and right content, border on the right Icon text alternative

Stories Basic

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Dense

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Active items

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

With active border on the right

Disabled items

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Borderless item

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Links and buttons

With icons

Icon text alternative Lorem ipsum dolor sit amet
Icon text alternative Lorem ipsum dolor sit amet
Icon text alternative Lorem ipsum dolor sit amet

With content on the right

List item with a badge on the right
14
List item with an icon on the right Icon text alternative
List item with a tag on the right
Small tag

With some gap between items (mainly used with no-border and dense)

Modal

Stories Confirmation/Vertically centered

Confirmation/WithCheckbox

Confirmation/WithIcon

Confirmation/Sizes

Information/Success

Information/Error

Information/Warning

Information/Info

Information/Waiting

Navbar

Stories CollapseSearchBar

Transparent version

Size variation

Container

No responsive example with no toggler

Pagination

Progress

Stories With label

Radio

Stories Inline

Error

HTML5 Native Form validation is taken into account with required attribute

Forced errors with .has-danger class

Segmented Control

Stories Sizes

SM:

MD (Default):

LG:

Icon Only

Select

Example

Disabled

Hint

Error

Example XL

Example LG

Example SM

Stories Select custom

Sidebar

This div has the `.nj-sidebar-content` class. It's mandatory to have the right behavior with a fixed sidebar.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.

Stories Folded version

This div has the `.nj-sidebar-content` class. It's mandatory to have the right behavior with a fixed sidebar.

For a folded sidebar, add the .nj-sidebar--folded modifier.

No push sidebar version

This div has the `.nj-sidebar-content` class. It's mandatory to have the right behavior with a fixed sidebar.

To have the sidebar go over the content, add the .nj-sidebar-content--nopush modifier.

No motion sidebar version

This div has the `.nj-sidebar-content` class. It's mandatory to have the right behavior with a fixed sidebar.

For a reduced motion sidebar, add the .nj-sidebar--no-motion modifier.

Slider

Stories Value display

Spinner

Stories Color variation

Inside a button

Stamp

Stories White version

Shadow

Status Indicator

Offline

Online

Away

Do not disturb

Busy

Unknown

Error

Success

Warning

In progress

Info

Stories Size variants

Online

Without label

Tabs

My Item 1 content

My Item 2 content

My Item 3 content

My Item 4 content

My Item 5 content

My Item 6 content

Stories Compact

My Item 1 content

My Item 2 content

My Item 3 content

My Item 4 content

My Item 5 content

My Item 6 content

Spacious

My Item 1 content

My Item 2 content

My Item 3 content

My Item 4 content

My Item 5 content

My Item 6 content

Stretched

My Item 1 content

My Item 2 content

My Item 3 content

My Item 4 content

My Item 5 content

My Item 6 content

Table

Example of table
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
TOTAL	3	3	3

Stories Striped rows

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Hoverable rows

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Tag

tag

Stories Sizes

SM:

tag

MD (Default):

tag

LG:

tag

Color variation

default

brand

grey

brand

grey

teal

pink

orange

red

green

ultramarine

yellow

purple

blue

lime

Toast Container

Rows successfully inserted

Stories Full Width

Rows successfully inserted

Toast

Rows successfully inserted

Your table has been updated !

Rows successfully inserted

Your table has been updated !

Rows successfully inserted

Stories Inverse toast

Inverse toasts should be used on a darker surface

Rows successfully inserted

Your table has been updated !

Rows successfully inserted

Your table has been updated !

Rows successfully inserted

Toggle

Stories Sizes

Disabled

Dark Mode

Icons Or Text

Tooltip

Stories Inverse

Kit do Investidor

Bold

Subtle

Minimal

Bold color variants

Subtle color variants

Minimal color variants

Primary icon

Secondary icon

Destructive icon

Inverse icon

Card title

Indicator

Card title

Card title

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Villes et collectivités

Villes et collectivités

Villes et collectivités

Particuliers

Card title

Card title

Card title

1 - Card title

2 - Card title

3 - Card title

4 - Card title

5 - Card title

5 Card title

6 - Card title

7 - Card title

8 - Card title

9 - Card title

10 - Card title

Card title

Title error Message

Title info Message

Title success Message

Title warning Message

Title fatal error Message

Title error Message

Title info Message

Title success Message

Title warning Message

Title fatal error Message

Title error Message

Title info Message

Title success Message

Title warning Message

Title fatal error Message

Confirm these settings?

Delete the file?

Confirm these settings?

Confirm these settings?

Delete the file?

Confirm these settings?

Delete the file?

infoConfirm these settings?

infoDelete the file?

Small modal

Default modal

Failure modal

Warning modal

Warning modal

SM:

MD (Default):

LG:

This div has the .nj-sidebar-content class. It's mandatory to have the right behavior with a fixed sidebar.

This div has the .nj-sidebar-content class. It's mandatory to have the right behavior with a fixed sidebar.

This div has the .nj-sidebar-content class. It's mandatory to have the right behavior with a fixed sidebar.

This div has the .nj-sidebar-content class. It's mandatory to have the right behavior with a fixed sidebar.

SM:

MD (Default):

LG:

Confirm these settings?

Delete the file?

This div has the `.nj-sidebar-content` class. It's mandatory to have the right behavior with a fixed sidebar.

This div has the `.nj-sidebar-content` class. It's mandatory to have the right behavior with a fixed sidebar.

This div has the `.nj-sidebar-content` class. It's mandatory to have the right behavior with a fixed sidebar.

This div has the `.nj-sidebar-content` class. It's mandatory to have the right behavior with a fixed sidebar.