Header 1 Is Primarily Used as a Page Title or Header.
Header 2 Is Primarily Used as a Strong Subhead and Is Styled Like This
Header 3 Is Used as Yet Another Strong Subhead and Is Styled Like This
Header 4 Is Primarily Used as a Less-Important Subheader and Is Styled Like This
Header 5 is primarily used as yet another subheadline and is styled to look like this
Header 6 Is Primarily Used as Yet Another Subheadline and Is Styled to Look Like This
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- List Item #1
- List Item #2
- List Item #3
Call Out 1
Whether your ID Card Project is short or long term, we can help! Let’s discuss how we can assist and you’ll understand at K&A, “We Do ID Right”!
Order Button
Primary Button
Secondary Button
This is a caption for the image
This is the page for testing styles provided in the styleguide. This page can be used as a reference for adding the specific classes to achieve the items listed in the styleguide.
Please note: The items below do not contain everything in the styleguide, such as menu items, input text, and footer text. These items can be found in their respective locations on all pages.
Header 1
Header 4
Header 2
Header 5
Header 3
Header 6
For the headers, simply select the Header block and the respective header. Every page will contain a Header 1 that is the page title, so avoid using H1 tags inside page content. Headers should be used for information organizational purposes, not for styling text in the page.
Callout 1
For callout 1, under Advanced on the right-hand side, add (without quotes) “callout1” to the Additional CSS class(es) box.
Note: Callout1 must be a
tag.
Whether your ID Card Project is short or long term, we can help! Let’s discuss how we can assist and you’ll understand at K&A, “We Do ID Right”!
For callout 2, under Advanced on the right-hand side, add (without quotes) “callout2” to the Additional CSS class(es) box.
Note: Callout2 must be a
tag.
Callout 2 is set to be 100% width of whatever container (row) layout it is in. The text will always be centered, with 10px of padding on the left and right, and 40px of padding on the top and bottom. It has white before & after lines of 2px tall set to 86% width of the area.
Body text
This is the default body text. It will appear anywhere a paragraph is used, such as these explanations!
Links will be styled this way by default.
- List item 1
- List item 2
- List item 3
List items will be styled this way by default
This is a stylized tag in a paragraph.
Add (without quotes) “quotebutton” to the Additional CSS class(es) box.
These are set to be 100% width of the container (row) they are in. This is to allow flexibility for the content contained in the button. Additionally, they will stylize ANY tag in the paragraph, so it’s best to use these in their own paragraph.
This is a stylized tag in a paragraph.
Add (without quotes) “primarybutton” to the Additional CSS class(es) box.
These are set to be 100% width of the container (row) they are in. This is to allow flexibility for the content contained in the button. Additionally, they will stylize ANY tag in the paragraph, so it’s best to use these in their own paragraph.
This is a stylized tag in a paragraph.
Add (without quotes) “secondarybutton” to the Additional CSS class(es) box.
These are set to be 100% width of the container (row) they are in. This is to allow flexibility for the content contained in the button. Additionally, they will stylize ANY tag in the paragraph, so it’s best to use these in their own paragraph.
This is the custom block called homepage icon block
This is an image with a caption. All captions on images will be styled this way by default.
