Tokyo - Components | Highlight

"Highlight" allows us to create and highlight content to make it aesthetically different from the rest of contents displaying on the screen.

Highlighted text is added within the screens by default (See here), but it can also be added inside other components (for example, a Highlight, an Accordion, a Row, etc.).

This component is included in the group of "Text" components.

When adding a panel, we can select three different presets:

  • Basic Highlight: it shows one text highlighted with a coloured border and a title. By default, the primary colour of the unit will be applied. (See here to know how to configure colours).
  • Highlight with header: it shows a highlighted title on a coloured background.
  • Highlight with double header: it includes a title and a subtitle.

Setup process

1. When we add a Highlight, a "Text" component is inserted inside by default. Then we can add more components if we want. Access the "Add" tab and you will see that you can "Insert inside" the panel many other components like images, audios, videos, rows, etc.). It is important to make sure we have selected the Highlight component because we can insert components inside, but we have also the "Insert after" option.

2. Enter the "Properties" tab and set up Highlight properties.

3. Finally, set up Highlight contents like title, texts, and other components.

Properties

PROPERTY

DESCRIPTION

View

This property allows changing the type of panel:

  • Basic Highlight
  • Highlight with header
  • Highlight with double header

Style

It allows modifying the graphic layout of the panel:

  • Standard: primary and secondary colours are applied to the unit, when appropriate to the chosen view (See here).
  • Customised: customised colours are applied to the panel. Depending on the selected "View", new properties will be enabled to let you modify border, background and titles colours.

Width

This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. For some quote styles, "Full" width makes quotes lay over the central column.

Align

This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

Header icon

This property is only available when choosing the "Basic Highlight" option inside "View".
It allows adding an image or icon related to the title of the panel.