Configure the layout of your tile group

In this topic, you learn how to configure the layout of your tile group, including the header content, the tile group appearance, and tile appearance.

Prerequisites

Multi Column tab

To create a multicolumn launchpad appearance, open the Multicolumn tab. In Navbar Groups, select Add Navbar Group to add one or more predefined tile groups to be rendered in a dedicated navbar area on the left side of the launchpad.

In Sidebar Groups, select Add Sidebar Group to add one or more predefined tile groups to be rendered in a dedicated sidebar area on the right side of the launchpad.

In the Multi Column Setup section, you can select the width and fit for your navbar and sidebar. The fit can be configured to either shrink or wrap the navbar and sidebar on smaller screens.

Appearance tab

The settings made in the Appearance tab apply only to the specific tile group and tile you are modifying in the Tile Group tool. The settings applied to the specific tile are prioritized above any of the same settings that you can apply in tile group layouts and tile group layouts that you can select separately in the Tile Group Layout and Tile Layout tabs.

Tile Group

In the Tile Group Layout Settings section, enter the CSS style class in CSS Style Class.

In the Tile Group Size Settings section, you can select the width and alignment of the content of the tile group size.

Tile Group Width

Select between the following alignment options:

  • No selection Inherit (Adjust to Layout Shell Width)

  • Full Screen

  • XXXLarge

  • XXLarge

  • XLarge

  • Large

  • Medium

  • Small

  • XSmall

  • XXSmall

  • XXXSmall

Tile Group Alignment

Select between the following alignment options:

  • No selection Inherit (Left)

  • Left (Default)

  • Center

  • Right

To make layout changes to the header image, in the Tile Group Header Image section, specify the layout of the header content in the tile group depending on the output medium. In Header Height, enter a header height either as a CSS value, for example, in rem, pixels, or auto.

In Light Appearance Header Image, select a header image for a light appearance from the Media Library.

By default, on desktop, dark appearance header images are inherited from the header image selected in Light Appearance Header Image. Select Do NOT inherit light appearance header image to select a dark appearance header image from the Media Library separately. For tablet and mobile, select a separate dark appearance header image from the Media Library.

Tiles

In the Settings for Tiles Displayed in this Tile Group section, select Clickable Tiles to make all selected tile clickable. Buttons previously displayed on tiles are hidden and the whole tile areas is clickable. You can access tile actions from the right-click context menu.

In Tile Density, in Tiles/Row, select how many tiles are displayed in a tile group with the following options:

  • One

  • Few

  • More (default)

  • Many

    A CSS grid and the tile-to-row configuration governs the display of tiles in tile groups. Cells have a 32px minimum height, and an approximate 32px minimum width. The width adjusts, however, to the screen size in use.

In Tile Size, you can select the width and alignment of the content of the tile. The tile width adapts to the available space depending on the screen size (amount of grid cells) and the tile width (column span in the grid).

The height (row span) controls the number of vertical grid blocks the tile occupies. Use this setting to align larger tiles with stacks of smaller tiles. For example, a tile with a tile height set to Tower (row span of 8) is exactly as tall as two standard tiles stacked next to it. Note that this does not set a fixed pixel height, so the card still naturally shrinks or stretches to fit the layout of the surrounding content.

Tile Group Layout tab

In Tile Group Layouts for Light Appearance, and Tile Group Layouts for Dark Appearance select Add Tile Group Layout to add one or more predefined tile group layout settings from the Tile Group Layout tool to apply to your tile group for a light and dark appearance.

If same tile layout settings are shared between multiple tile group layouts, the top tile group layout is prioritized when applying settings.

In Tile Layout Inheritance, select Prioritize Tile Group Layouts added to this Tile Group First to enable the specific settings for the tile group defined in the Appearance tab instead of the tile group inheriting tile group layout settings configured in launchpad layouts and tile group layouts by default.

Repeat the procedure in the Tile Layout context.

Results

  • You have configured the layout of your tile group.

Next steps

Related topics