Kitchen Sink

Lead In Text - this is a short intro/summary to the page, and should only be 1-3 sentences. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante.

Heading 2 - keep this short, helps to divide larger sections of page content.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Sed sed ultricies arcu. Sed sit amet aliquet quam, sit amet lobortis turpis. Curabitur fringilla eget urna sit amet cursus. In text link ante ac ex interdum, eget fermentum eros bibendum. Pellentesque facilisis iaculis lacus, ut blandit leo rutrum sit amet. In text link hover bibendum feugiat massa, ut euismod magna commodo sed. Cras nec justo magna. Praesent enim tellus, volutpat vitae ex dapibus, sollicitudin ultrices dui. Mauris maximus ut nunc ac eleifend. Mauris pharetra.

Heading 3 - can have more text than H2 headings. Looks best when it only spans two or three lines like a headline.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Heading 4 - This is a sans serif to make sure it has adequate contrast with the other heading styles.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Heading 5 - Since this heading style is in all caps, make sure not to use too much text, as this can affect readability.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero

Heading 6 - Since this heading style is in all caps, make sure not to use too much text, as this can affect readability.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Outlined Button Outlined Button Hover

Fancy Link Fancy Link Hover

Text-based elements

Example of an inline image on the right and text on the left.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

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. 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 gna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias quae ut dolores vero amet fugiat, doloribus dolorem facilis, velit necessitatibus et ad. Mollitia delectus ipsam temporibus odit id ducimus nulla.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Unordered and ordered lists.

Unordered and ordered lists should follow some design guidelines:

  • Ordered and unordered lists should have the same line height as body copy, and a clear space between the list and the copy above and below it. The space between list items is less than the space between regular paragraph text.
  • The list is indented one gutter-width from left.
  • Text for each bullet/number is aligned to the first letter, rather than the bullet/number.
    • Lorem ipsum dolor sit amet consectetur adipisicing elit.
    • Sed tempore nulla deleniti illum quidem dolorum maxime quos, totam, iure, distinctio vitae a maiores sint ratione eveniet rem veniam accusantium odit.
      • Animi assumenda obcaecati aspernatur, repellat eligendi optio? Aperiam repellat vero blanditiis unde nihil!
      • Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel nobis voluptate inventore, sunt dicta consequatur deserunt aliquid.

Example of an ordered list

  1. Ordered list numbers are 16px instead of 18px
  2. The font weight for each number is Extra Bold.
  3. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Blockquote and pullquote examples

Sometimes it’s useful to feature a testimonial from a student or highlight a specific piece of text from the page. Each instance gets it’s own style.

Pullquotes are used for highligting key points in the page.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam

When you use the “quote” feature in the text editor, it will style it like this — inset within the content with an orange rule above. Reprehenderit in voluptate velit esse cillum dolore.

Phasellus vestibulum, augue at semper sagittis, tellus nibh ultricies enim, vitae gravida ante lorem at enim. Aliquam erat volutpat. Mauris porttitor risus elit. Proin enim est, ullamcorper a pharetra sed, vehicula ac ipsum. Proin pharetra ornare sagittis. Sed in sollicitudin turpis, quis vulputate velit. Fusce sollicitudin finibus quam.

Consectetur volutpat, orci nibh congue libero, vel tincidunt ipsum elit in ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia ultricies enim, vitae gravida ante lorem at enim. Aliquam erat volutpat.

Blockquotes are used for testimonials that usually have an attribution.

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam

Blockquotes are their own separate element that goes in between blocks of text. Having attributions for blockquotes is preferred since it helps with credibility.

Phasellus vestibulum, augue at semper sagittis, tellus nibh ultricies enim, vitae gravida ante lorem at enim. Aliquam erat volutpat. Mauris porttitor risus elit. Proin enim est, ullamcorper a pharetra sed, vehicula ac ipsum. Proin pharetra ornare sagittis. Sed in sollicitudin turpis, quis vulputate velit.

The same blockquote element with an attribution. Attributions should include a name and some kind of descriptor, like a title or degree earned.

Lorem Ipsum Dolor Sit Amet duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur sit amet suis aut dolor

alt text lorem

Accordions

Accordions are great for organizing large chunks of related content. They work best when there is enough content for at least 3 accordions, and the content inside is neither too little or too much.

This is the content area of accordion 1

This is the content area of accordion 2

This is the content area of accordion 3

This is the content area of accordion 4

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.</p><p>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.

Media and Call to Action Elements

Featured Image Carousel

Cards

Cards are clickable elements that link out to other pages. Cards work best when they have brief, to-the-point headings. They can also have optional descriptions if they need them. All cards stack so any number of cards can be used in a row — though it’s best to keep the number between 3 and 5.

Cards are clickable elements that link out to other pages. Cards work best when they have brief, to-the-point headings. They can also have optional descriptions if they need them. All cards stack so any number of cards can be used in a row — though it’s best to keep the number between 3 and 5.

  • KS Card alt text lorem
    Multiple cards stack on top of one another
  • KS Card alt text lorem

    Some descriptive text just in case the heading isn’t enough. This should be brief, 2-3 lines long.

Cards are clickable elements that link out to other pages. Cards work best when they have brief, to-the-point headings. They can also have optional descriptions if they need them. All cards stack so any number of cards can be used in a row — though it’s best to keep the number between 3 and 5.

Large CTA

Large, Very Brief Heading

Apply Online

Embedded video with caption

Videos usually don’t need a detailed caption, so a brief sentence or two below the video should suffice.