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

{left aligned}
Template: Card

Template OptionValue(s)Comments
Use DefaultYes
Hide TitleYes

{center aligned}
Template: Card

Template OptionValue(s)Comments
Use DefaultYes
Hide TitleYes
Alignment - BodyCenter

{right aligned}
Template: Card

Template OptionValue(s)Comments
Use DefaultYes
Hide TitleYes
Alignment - BodyRight
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)
desktop_windows
I'm on a large screen!
tablet
I'm on a medium screen!
smartphone
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

P12_TRUNCATION_EXAMPLE
Template: Standard

Template OptionValue(s)Comments
Use DefaultYes
Hide LabelYes
Display Only - Truncate TextYes
Display Only - Text SizeResponsive TextDefines the size of the text.
Margin top0Apply "Margin top" to any element with a template option.