Skip to Main Content

H1 to be used only once at top of page

(H3) If there are multiple lines in the content section with long titles...


This is the time to use H3 as the title so that the page doesn't feel as cluttered. 

This also helps give the title enough attention without distracting too much. 





(H3) Use 4 "breaks" in between each paragraph.


This will help each paragraph be able to breathe and have its own place on the page without budging into other paragraphs.





(H2) If Short Title...


...in content section, this is when to use H2. It will be more acceptable to use the proper section title size if it takes up less space.





(H2)Don't Mix Sizes


If there are multiple paragraphs with content below, only use one H size consistently. Use judgement based on the average line length to whether H2 or H3 is more appropriate

H6 should be used for title for media items
H6 is to be lowercase
H6 should be used for title for media items
H6 is to be lowercase
H6 should be used for title for media items
H6 is to be lowercase

Use "Margin bottom" and "vertical padding" to every section that isn't related to the section above or below. Add 30px for each one. 

Eventually add 50 to "vertical padding" and "30" to margin bottom when available. There should always be a total of 80px between unrelated sections.

Need to change the title size for every module to H2. Image Set and Portfolio Slider are currently what H1 should be. They need to be shrunk to H2 size.

H2 header here


Always put a <p> or <br /> in between title and body copy in "copy block". This ensures the title has enough room to stand on its own and helps readability.
H5 should be used for three or more related copy blocks in succession

H5 is to be all caps and gray.

H5 should be used for three or more related copy blocks in succession

If there is a section with multiple related copy blocks, then only use Vertical padding on each (50px) and not the padding underneath. This is so that there isn't so much space between sections that makes it unclear that they are related.

H5 should be used for three or more related copy blocks in succession

The last of the copy blocks in a grouping like this should have both Vertical padding and Margin padding underneath. (50 above and 30 below)


Icon and Logo usage


Portfolio Slider Logos

170711-kbz-cisco-01-avizia_logo-port
Use Portfolio Slider for logos
One of the 2 ways we should display logos is in the Portfolio slider module.
Resize them to 377 x 167 when using them in this module
170711-kbz-cisco-01-avizia_logo-port
Use Portfolio Slider for logos
Get rid of the "White paper" category when using this module for logos 
170711-kbz-cisco-01-avizia_logo-port
Use Portfolio Slider for logos
Limit copy text to 8 lines of text if a description is necessary.

Image Set Logos

Use this module when you want to list a lot of logos at once. Try to avoid using text on this module, since it should mainly be for quantity. If necessary, only include up to a single line of text. 

Icon Link Gallery

Cloud Solutions

Unified Communications

Physical Security
Networking

POS and Barcoding

Information