Sub page
Starter Kit provides set of components. Probably every website needs rich text or image, but on each of them it can look totally different. Themes provide styles for components, but what if components look or behaviour varies between subpages or even within the same page? This is the moment where component variants come into play.
What is variant?
Component variant is nothing more but CSS class added to component. With such a simple change, with power of CSS, theme developers can provide totally different look and feel for the component. New behaviour can also be added by adding some Javascript functionality by detecting specific class.
One component, endless possibilities
Look at this example, here are 3 navigation components, all having different variant set. As you can see variant changes styling and behaviour of the component.
In this example we have set one variant for each component. Imagine that you can set multiple on every component, so you can provide different traits to your component - define size, colors, some Javascript enhancements.
Default navigation
Navigation with "Vertical" variant
Navigation with "Fat" variant
What if different CSS and JS is not enough?
If your designs need changes which cannot be achieved using only CSS and Javascript, but are achievable with changes in markup, Zen Garden provides mechanism for creating custom components markups. Component edit dialog stays the same, so you cannot add new fields, but you can present it in a different way.
