Helpers
These are template options available through all sorts of components for more flexibility.
Horizontal Alignment
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.
{left aligned}
This should be left aligned
{center aligned}
This should be center aligned
{right aligned}
This should be right aligned
Selected Template Options
Component Name: {left aligned}
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Hide TitleYes
Text Color - GlobalWhite
Background ColorDeep Orange
Background ModifierAccent 2
Component Name: {center aligned}
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Hide TitleYes
Alignment - BodyCenter
Text Color - GlobalWhite
Background ColorBrown
Background ModifierAccent 2
Component Name: {right aligned}
Template: Card
Template OptionValue(s)Comments
Use DefaultYes
Hide TitleYes
Alignment - BodyRight
Text Color - GlobalWhite
Background ColorDeep Purple
Background ModifierAccent 2
Hiding Content
We provide template options to hide content on specific screen sizes.
{collection}
  • {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  
Examples (resize me)
I'm on a large screen!
I'm on a medium screen!
I'm on a small screen!
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}
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 OptionValue(s)Comments
Use DefaultYes
Hide LabelYes
Display Only - Truncate TextYes
Display Only - Text SizeResponsive Text, H1, H2, H3, H4, H5, H6Defines the size of the text.
Margin top0, 1, 2, 3, 4, 5Apply "Margin top" to any element with a template option.
--------- bottom0, 1, 2, 3, 4, 5Apply "Margin bottom" to any element with a template option.