Multi tier display templateAvailable since EcoComposer 2.2

Classical multi tier display example :

Another example :

The defaults values are :

'border-radius' : .5rem * theming.$font-size,
'title--font-size' : 3rem * theming.$font-size,
'margin' : 0 1rem * theming.$font-size,
'padding' : 2rem * theming.$font-size,
'plans' : (
  (
    'background-image': linear-gradient(45deg, #e28383, #ecacac)
  ),
  (
    'background-image': linear-gradient(45deg, #8bdaa0, #b1e7bf)
  ),
  (
    'background-image': linear-gradient(45deg, #8c8fd9, #b3b4e6)
  )
),
'multi-tier-display--border' : 'multi-tier-display--border',
'multi-tier-display--title--color' : 'multi-tier-display--title--color',
'multi-tier-display--plan--highlighted' : 'multi-tier-display--plan--highlighted',
'suffix' : '',
'themes' : (
  'light' : (
    'default--multi-tier-display--border' : 1px solid #ccc,
    'default--multi-tier-display--title--color' : #000,
    'default--multi-tier-display--plan--highlighted' : linear-gradient(45deg, aqua, aquamarine)
  ),
  'dark' : (
    'default--multi-tier-display--border' : 1px solid #ccc,
    'default--multi-tier-display--title--color' : #000,
    'default--multi-tier-display--plan--highlighted' : linear-gradient(45deg, aqua, aquamarine)
  )
)

We can implement it that way :

@include multiTierDisplay.init;
@include multiTierDisplay.create;
@include multiTierDisplay.create(
  (
    border-radius: 0,
    margin : null,
    multi-tier-display--border: null,
    plans : (
      (
        'background-color': #5588ff
      ),
      (
        'background-color': #b1e7bf
      ),
      (
        'background-color':#b3b4e6
      )
    ),
    suffix: '-2',
    title--font-size: 3.5rem * theming.$font-size
  )
);

We can implement it that way :

-2