Components | Row

"Row" is one of the most adaptable and interesting components offered by the Tokyo template. This component allows inserting "Columns" to order the rest of components. So, we can decide to display the information divided into columns. We would find a similar layout in newspapers, for instance.

Rows can be divided into 12 columns. We can add "Columns" to occupy 1-12 out of all the spaces available. For instance, we can add two symmetrical columns (6 spaces each), three symmetrical columns (4 spaces each), etc. We can also create asymmetrical layouts consisting of columns with different layouts.

Rows are added within the screens by default (See here), but they can also be added inside other components (for example, a Pop-up, an Accordion, a Row, etc.).
You will find this component in the group of "Cataloguer" components.

When we add a row, we can choose different preset structures that will help us when editing contents.

Setup process

1. Check the selected row (you can check this quickly from the breadcrumb trail), access the "Add" tab and, if needed, include new "Columns".

2. Access the "Properties" tab in the row and configure its properties (see the list of properties at the bottom of this page). Properties used to choose a background image or colour for the row are interesting. It is also possible to let the row width exceedthe central area of the screen.

3. Columns we created include a text by default, but there are also other components we can insert in the column. We select the column (the easiest way to do this is through the breadcrumb trail), access the "Add" tab and choose one of the components to "Insert inside" the column. Remember you can go to "Insert after" and add another column after this column.

4. Finally, access the "Properties" tab in the column. For example, this tab allows you to assign a width to each column included inside the row (1 to 12 spaces).

Row properties

PROPERTY

DESCRIPTION

Width

The row occupies 100% of the available space by default, but size can be changed to "Full", that is, size can be adjusted to fit the central column width.

Right margin

This property allows defining where the right margin should finish.

None: Default option.
level 1: The margin is aligned to one side of the central column.
level 2: The margin exceeds 50px the side of the central column.
level 3: The margin exceeds 100px the side of the central column.

If we combine the "Right margin" with the "Left margin" property, we can configure the same margin for both sides of a row.

Left margin

This property allows defining where the left margin should start.

None: Default option.
level 1: The margin is aligned to one side of the central column.
level 2: The margin exceeds 50px the side of the central column.
level 3: The margin exceeds 100px the side of the central column.

If we combine the "Left margin" with the "Right margin" property, we can configure the same margin for both sides of a row.

Background image

This property allows adding a background image for the row. We will click on "Examine" to access the unit Resources folder (check here ), and select the image we want to show. Supported image formats: jpeg, png, and gif.

Background colour

This property allows adding a background colour for the row. If we add a "Background image", this will prevail over the background colour.

Column properties

Lets decide how the column will be resolved in the printable version in pdf:

- Yes: the content of the column was defined with the "Size" defined. Thus, if there are contents in 3 columns, they will be seen in the same way in the printable version.

- No: will make the content of the column see a full size in the PDF (12 spaces). This will be positive if we want the columns to be displayed on top of each other in the PDF version for easy reading. We will be useful if we have content

For example, if we create 3 columns with flipping images, we can decide if the 3 are shown online in the pdf with the option "Yes":

PROPERTY

DESCRIPTION

Size

This is the size occupied by a column inside a row. Columns can occupy 1-12 spaces.

Animation

This property allows adding an animation effect when a column appears:

None: No effect.
Fade: Appearance effect.
Fade up: Appearance from the bottom of the screen.

Offset

This option allows creating a breaking space on the left of the column, which can be visually noticed. Offset can have 1-12 spaces.

It's the last column

This property allows marking a column as the last one within a row. This means that the second column will be placed below the first column, so that the third column appears as the last one within the row. This example shows that more options could have included in the first row, but we decided to insert them in the next row.

Keep size in PDF version Lets decide how the column will be resolved in the printable version in pdf:
- Yes: the content of the column was defined with the "Size" defined. Thus, if there are contents in 3 columns, they will be seen in the same way in the printable version.
- No: will make the content of the column see a full size in the PDF (12 spaces). This will be positive if we want the columns to be displayed on top of each other in the PDF version for easy reading. We will be useful if we have content

For example, if we create 3 columns with flipping images, we can decide if the 3 are shown online in the pdf with the option "Yes":

Or if they are displayed in full size for easy reading with the option "No":