Styleguide

Use this page to visualize all the components available to build a page.

Video Hero

With Modal Video

Modal video can be the same video as the background, or a completely different video. Adding a modal video will display a play button that when clicked, will open in a modal.

Another Hero

With another modal

Content Component - Default

The content component is the most fundamental building block. It consists of a header, body, and a call to action (all fields are optional).

The content component has many options / various styles:

  • default (this)
  • half width media left / right
  • quarter media left/right
  • background - navy

By default, the content component will have a max-width of 960px, ideal for adding copy.
Media quarter width has a slightly larger width 1248px.
Media half width will have a max width of 1400px.

Kitten staring into the camera
Content Component: Media Quarter Width - Float Left
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh.
Component: Social Feed
    Table Styling

    The table styles will apply to any tables added inside the content component WYSIWYG. Switch the Text Format to "Full HTML" and click on the table icon in the WYSIWYG menubar. Use the modal to specify the number of rows and columns, and any headers. Use the caption field to enter in a table title.

    Cat adoptions in KC
    Year Intake Adoptions Returned to Owners
    2017 9553 6406 1341
    2016 9264 5939 1455
    2015 8928 5863 1217
    2014 9476 5986 1217
    2013 8179 4516 1062
    (Source: KC Pet Project Org)
    Component: Pullquote Carousel

    Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada.

    Pellentesque in ipsum id orci porta dapibus

    Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

    Praesent sapien massa, non nisi.

    Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Curabitur aliquet quam id dui posuere blandit.
    Long kitten image
    Component: Section CTA
    The section CTA has a background image, a header, content, and a CTA. The background image can have a parallax effect (optional) by enabling parallax in the settings tray.
    Long kitten image
    Component: Text Carousel

    Sed porttitor lectus nibh. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada.

    Cras ultricies ligula sed magna dictum porta. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada.

    Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat.

    Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.

    Featured Media - Full, Bg Navy
    Component: Featured Media

    The featured media component has many layouts that give the content author a variety of ways to present media items (charts, images, remote videos):

    • Full (takes up full width)
    • Grid (3 columns on desktop, 1 column on mobile)
    • Slider (shows 1 media per slide)
    • Half width (show carts side-by-side)

    Remote videos and images with captions will appear as a blue bar on slider layout.
    In addition, there is an option to have a blue background featured media (for full layout).

    Featured Media : Full
    • Cat with a ball of yarn
    Featured Media: Grid
    • Kitten sniffing
    • sleepy kitten
    • Cat with a ball of yarn
    Featured Media: Half Width
    • KC Population by Race
      Pie chart of KC Population by race.
      Census 2010
    • US Population by Race
      Pie Chart
      Census 2010
    Featured Media: Slider
    • sleepy kitten
    • Cat with a ball of yarn
    Featured Content - Layout Teaser
    The Featured Content component references other pages in a teaser format. The teaser format includes the page title, the listing image, lead-in/summary text, and a link that navigates to the page. Featured content should ideally reference two pages, although there is no restriction. Referencing one will only span half width on desktop; referencing more than two will wrap additional teasers. Referencing a page that does not have a listing image or lead-in will default to a grey box, page title, and a CTA.
    Stats Section
    28
    Nulla porttitor accumsan tincidunt
    Lorem Ipsum
    12,345
    Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem
    1,234,567
    Praesent sapien massa
    99,999,999
    Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
    Lorem
    Sed porttitor lectus nibh. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
    (Source: Lorem Ipsum)
    Component: Section
    The section component is a utility component that wraps other nested components into one section. Components that are nested within a section will have the same banding color. The vertical space between nested components is reduced to maintain content flow.
    • Cat with a ball of yarn
    500
    Cats
    A meowing
    Some song
    • KC Population by Race
      Pie chart of KC Population by race.
      Census 2010
    • US Population by Race
      Pie Chart
      Census 2010
    Stats Section Component
    The Stats Section component houses one or many Stats Item components. The stats section has a header, stat items, and an attribution field. The attribution can be added to the entire section (if all stats items come from the same source), or the attribution can be added to each individual stats item. Stats Item has a label (navy, bold), with a description underneath, and an option for attribution.

    Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.

    Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem
    Pullquote Component
    A pullquote component has a full-width navy background. Quotation marks are automatically added. When nested in another component (i.e. accordion), the pullquote component will not have a background and will be contained by the parent component's width.
    Content Component: Column 3
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    • Lorem Ipsum List Item 3,502
    Accordion Group Component
    Accordion Item - Basic
    Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Cras ultricies ligula sed magna dictum porta. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
    Accordion Item - Pullquote

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

    Curabitur non nulla sit amet nisl tempus convallis quis ac lectus
    Accordion Item - Stats Item
    26
    Taco Bells in the metro area
    Google Maps
    Kitten sniffing
    Content Component: Media Half Width - Float Right

    Nulla quis lorem ut libero malesuada feugiat, Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor accumsan tincidunt.
    Google, February 2018

    A Top Job Market for New College Grads due to an unemployment rate of 3.6 percent and median rent of $1,321.
    Yahoo, 2018

    Kitten sniffing
    Content Component: Media Half Width - Float Left

    Nulla quis lorem ut libero malesuada feugiat, Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor accumsan tincidunt.
    Google, February 2018

    A Top Job Market for New College Grads due to an unemployment rate of 3.6 percent and median rent of $1,321.
    Yahoo, 2018

    Content Component - No media - Background navy. Background stretches full width. Similar in style to the pullquote component, but a few differences: text is not italicized, no attribution field, semantically different HTML-wise (pullquote uses the blockquote html tag).
    Kitten staring into the camera
    Content Component: Media Quarter Width - Float Right
    Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Sed porttitor lectus nibh.
     
    Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
    Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
    sleepy kitten
    Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
    Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.