No margins, padding, text styling, or styling of any kind should be applied to <h1> - <h6> elements unless they have a class on them which the styling is coming from.
We want the SEO team to be able to throw a heading tag on anything without it changing the styling of the site.
That also means that <h1> - <h6> elements should not be available for the client to pick in the styles menu. Instead use <div> or <p> elements for headings.
Here's an example of a custom styles menu config json using <div> elements for headings:
[{ "title": "Button (Primary)", "class": "cms-btn", "element": "a" },{ "title": "Button (Secondary)", "class": "cms-btn cms-btn-secondary", "element": "a" },{ "title": "Button (Outlined)", "class": "cms-btn cms-btn-outlined", "element": "a" },{ "title": "Button (Outlined Secondary)", "class": "cms-btn cms-btn-outlined-secondary", "element": "a" },{ "title": "Heading 1", "class": "heading", "element": "div" },{ "title": "Heading 2", "class": "heading heading-2", "element": "div" },{ "title": "Heading 3", "class": "heading heading-3", "element": "div" },{ "title": "Divider", "class": "text-divider", "element": "div" },{ "title": "Call Out Text", "class": "call-out-text", "element": "div"}]
The elements below represent what a client can add to a text page in the CMS. The site's default font family and font size should be added to to the "cms-frontend" class on the body element. This will effect anything that doesn’t already have a text style. To select the body element, first select any other element, then hit the up arrow until you get to body.
Styles added to the elements below should be mostly for fonts and font sizes. Colors can be controlled by our CMS text editor with a color picker, so we don't need to set different colors for every heading type. You can make a dummy class to show the client what those colors would look like on headings. Dummy classes used on headings below are "second-color" and "third-color".
Heading One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Text LinkCall out text. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Text Style Button
Text Style Button
Text Style Button
Text Style Button
Heading Default Color
Heading Second Color
Heading Third Color
Heading Two
Heading Three
This represents content inside a CMS text editor on the backend. Add the default font family, font color, font size, and background color styles to the "cms-backend" class. The width, and border styles will be hard set in the backend.
