Developers
cancel
Showing results for 
Search instead for 
Did you mean: 

DXM Template Development Training

Component Library: Layout Definitions

Part of the Introduction to Component Library series.

Layout Definitions

A layout is the markup that provides the structure into which components can be arranged.

Similar to component definitions, you put placeholders into the markup to designate the “slots” into which components can be placed.

Layout definitions don’t get generated into anything else but are used in the template and nav wrapper definitions.

Layout definitions are created in the Layout Definitions folder using the File > New > Layout model.

The slots are indicated by using braces or curly brackets and must have the syntax “col n”, where n can be the digits 1 to 4.

Although 4 slots doesn’t sounds like very many, multiple components can be placed in a slot so if you find you have a layout that needs more than 4 slots, you may want to reconsider the design and encapsulate the complexity directly into a component.

When multiple components are targeted in a slot, the markup from each component will appear sequentially.

Component Library ships with one standard layout — the “no rail” layout. No rail has no markup other than a single slot placeholder.

Here is an example of a two column layout that uses Bootstrap to create a wide left column and a narrow right column. Note: you do not have to use Bootstrap in your layout definitions, this is being used for illustration purposes only.

Prev: Component Definitions

Next: Nav Wrapper Definitions

Labels (3)
Version history
Revision #:
6 of 6
Last update:
‎06-04-2019 09:57 AM
Updated by:
 
Contributors
Looking for more?
Ask in Discussions
Developers

Peer-to-peer support  and answers on developing CMS templates, modifying privacy scripts or building integrations.

Digital Experience Management

Find answers and ask questions on content management, personalization and targeting.

Digital Quality Management

Find answers and ask questions on WCAG and SEO quality management.

Digital Governance

Find answers and ask questions on consent and monitoring solutions.