Helpers

These are template options available through all sorts of components for more flexibility.

Doc3 Vertical alignment can be a pain sometimes. You can easily vertically center things by adding the template option to the items you want to vertically align.

This should be left aligned

This should be center aligned

This should be right aligned

Selected Template Options

Component Name: {left aligned}
Template: Card
Template Option Value(s) Comments
Use Default Yes
Hide Title Yes
Text Color - Global White
Background Color Deep Orange
Background Modifier Accent 2

Component Name: {center aligned}
Template: Card
Template Option Value(s) Comments
Use Default Yes
Hide Title Yes
Alignment - Body Center
Text Color - Global White
Background Color Brown
Background Modifier Accent 2

Component Name: {right aligned}
Template: Card
Template Option Value(s) Comments
Use Default Yes
Hide Title Yes
Alignment - Body Right
Text Color - Global White
Background Color Deep Purple
Background Modifier Accent 2

Template Option	Value(s)	Comments
Use Default	Yes
Hide Title	Yes
Text Color - Global	White
Background Color	Deep Orange
Background Modifier	Accent 2

Template Option	Value(s)	Comments
Use Default	Yes
Hide Title	Yes
Alignment - Body	Center
Text Color - Global	White
Background Color	Brown
Background Modifier	Accent 2

Template Option	Value(s)	Comments
Use Default	Yes
Hide Title	Yes
Alignment - Body	Right
Text Color - Global	White
Background Color	Deep Purple
Background Modifier	Accent 2

Doc4 We provide template options to hide content on specific screen sizes.

{collection}
Hidden for Desktop Only
Hidden for Mobile Only
Hidden for Tablet Only
Hidden for Tablet and Above
Hidden for Tablet and Below
Hidden for all Devices

Truncation To truncate long lines of text in an ellipsis, add the truncate template option to the region that contains the text. See an example below of a header being truncated inside a card.

Truncation example This is an extremely long text that will be truncated. This is an example of a header being truncated inside a card.

Selected Template Options

Component Name: P12_TRUNCATION_EXAMPLE
Template: Standard
Template Option Value(s) Comments
Use Default Yes
Hide Label Yes
Display Only - Truncate Text Yes
Display Only - Text Size Responsive Text, H1, H2, H3, H4, H5, H6 Defines the size of the text.
Margin top 0, 1, 2, 3, 4, 5 Apply "Margin top" to any element with a template option.
--------- bottom 0, 1, 2, 3, 4, 5 Apply "Margin bottom" to any element with a template option.

Template Option	Value(s)	Comments
Use Default	Yes
Hide Label	Yes
Display Only - Truncate Text	Yes
Display Only - Text Size	Responsive Text, H1, H2, H3, H4, H5, H6	Defines the size of the text.
Margin top	0, 1, 2, 3, 4, 5	Apply "Margin top" to any element with a template option.
--------- bottom	0, 1, 2, 3, 4, 5	Apply "Margin bottom" to any element with a template option.

Helpers
Horizontal Alignment
Hiding Content
Truncation

{collection}