Boxes

Sometimes your content needs to be gathered in a box: listings, small forms, options, filters. The platform contains two types of boxes: foldable boxes with options, and bubble boxes. For each box you add, chose a title, define your content, select a box type and think about where you want to display the box: your box's container will handle the global width of your box.

Bubble boxes

A .bubbleBox div class contains a .bubbleHeader div class with a h3 title. The .bubbleHeader div is followed by a .boxBody div class for the box content. The content can be plain text, tables, forms, etc ... Here are several possibilities to display the .bubbleBox:

  • Simple box: a .bubbleBox div class, that automatically defines the borders and margins,
  • Box with button: add a .button input class before the h3 in the .bubbleHeader.

Simple box

Just a title and some content in a paragraph.

Box with button

File My document
File My folder

Gray boxes

A .grayBox div class displays the content in a gray container with a border and a 100% width behavior.

Hello, I'm in a gray box.

But I'm feeling blue.

Simple boxes

A .simpleBox div is a specific case of the .grayBox container: in addition to the background color and border the width is fixed to 350px. The text have an ellipsis behavior if needed.

Just a title and some content in a paragraph.

averyveryveryveryverylonglonglonglongtitleforalinkdontyouthink

HTML text block

A .textBlock div displays the text as a note, in accordance with default HTML formatting. The width will depend of the block's container.

Hooray ! A text block !

  1. I can write lists
  • All types of lists,
    • even nested ones \o/

Default foldable boxes

A .foldableBox div class contains a .unfolded or .folded h3 title class with a link class .foldableHeaderLink in it to display the foldable icon. A .boxBody div class is used for the content.

.unfolded h3 title

The foldable box content is in a .boxBody div. The h3 title class automatically switches from .folded to .unfolded and vice versa.

A box folded by default

Foldable box with button Enable

You can include a tooltip in the title by using a .layoutHelpLabel img class. Write the content of your helper in the title of your img tag.

You can also add an action, by adding the .button .smallButton .action link classes.

For more details on buttons, check the Buttons section.

Custom foldable boxes

.foldedDisabled h3 title

If you want to use the foldable box style only, without the foldable behavior, remove the link from the .h3 and add a .foldedDisabled class to it.
.unfolded foldable box div title class

A light foldableBox can also be an option for a light interface: use the .foldableLightBox class for the container instead of the .foldableBox class, then keep the same layout as the default foldable box.

City Paris
Country France
Continent Europe