{"type":"doc","content":[{"type":"paragraph","content":[{"text":"The Aldrich template includes a number of classes that are available for you to use in WYSIWYG content and in your customizations.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Applying classes in code / customizations","type":"text"}]},{"type":"paragraph","content":[{"text":"Add space separated values to the class attribute of your desired element.","type":"text"}]},{"type":"codeBlock","content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"The above example defines a button with a blue outline by applying three classes:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"button","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"button--outline","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"button--blue","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Applying classes to WYSIWYG content","type":"text"}]},{"type":"paragraph","content":[{"text":"You can access a list of all available classes in two (very similar) ways:","type":"text"}]},{"type":"paragraph","content":[{"text":"From the WYSIWYG menu bar, select ","type":"text"},{"text":"Format","type":"text","marks":[{"type":"em"}]},{"text":" > ","type":"text"},{"text":"Formats","type":"text","marks":[{"type":"em"}]},{"text":" > ","type":"text"},{"text":"Custom","type":"text","marks":[{"type":"em"}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":854,"alt":"accessing classes from the wysiwyg menu bar","id":"3bb9d7aa-9e28-44c7-924f-d9aa26ed8ece","collection":"contentId-112723604","type":"file","height":670}}]},{"type":"paragraph","content":[{"text":"Alternatively, you can access the same list from the WYSIWYG tool bar instead: ","type":"text"},{"text":"Formats","type":"text","marks":[{"type":"em"}]},{"text":" > ","type":"text"},{"text":"Custom","type":"text","marks":[{"type":"em"}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":854,"alt":"accessing classes from the wysiwyg tool bar","id":"9df333fb-83ff-49d0-b6d3-9c071f12e208","collection":"contentId-112723604","type":"file","height":576}}]},{"type":"paragraph","content":[{"text":"From the list of classes, select the ones you want to apply. Currently applied class will appear in the list with a gray bar to the left of the class name.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":854,"alt":"selected classes","id":"708455cb-55b5-46c5-83b2-6acb86a2105b","collection":"contentId-112723604","type":"file","height":576}}]},{"type":"paragraph","content":[{"text":"You will also notice that the WYSIWYG will (in most, but not all cases) display the effects of applying the selected classes in its preview ","type":"text"},{"text":"window. In","type":"text","marks":[{"type":"link","attrs":{"href":"http://window.In"}}]},{"text":" the pictured example, three classes are applied to the word ","type":"text"},{"text":"Lorem","type":"text","marks":[{"type":"em"}]},{"text":",","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Not all WYSIWYGs offer access to the list of classes (e.g., the footer). This is by design.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Available classes","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Buttons","type":"text"}]},{"type":"paragraph","content":[{"text":"All buttons require the base class ","type":"text"},{"text":"button","type":"text","marks":[{"type":"em"}]},{"text":" combined with two modifier classes. One modifier class will define the button as solid vs. outline, and the second modifier class will define the button’s color.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Button classes can be applied to both button and link elements (","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":68,"alt":"solid gold button","id":"3c701ecd-342c-424f-84eb-157c6a7a0d33","collection":"contentId-112723604","type":"file","height":36}}]},{"type":"codeBlock","content":[{"text":"link","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Images","type":"text"}]},{"type":"paragraph","content":[{"text":"Image classes are used to align your images within surrounding content and require the base class ","type":"text"},{"text":"image","type":"text","marks":[{"type":"em"}]},{"text":" combined with an alignment modifier class.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Image classes can be used with both image and figure elements ( and

Browser not supported