Web Components Directory

Web Components

Layout/Stucture

Layout - not represented

Inner Layout

Auto Grid Container

Spacer - not represented

Inner Layout

Column One

You can have 2 or 3 columns in an inner layout. These are meant to be placed within a larger Layout component where more columns are needed.

Column Two

You can have 2 or 3 columns in an inner layout. These are meant to be placed within a larger Layout component where more columns are needed.

Column Three

You can have 2 or 3 columns in an inner layout. These are meant to be placed within a larger Layout component where more columns are needed.

Auto Grid Container

Featured Title

Text

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id commodo nibh, vitae auctor purus. Nunc diam ante, dictum eget odio lobortis, imperdiet imperdiet diam. Proin diam massa, tempus ut risus ut, finibus mollis purus. Etiam eros nulla, accumsan vel odio a, imperdiet auctor ligula. Integer at dui auctor ante elementum pharetra eu ut risus. Quisque luctus libero et ligula placerat, vel venenatis lacus feugiat. Ut tristique nibh quis purus euismod, ac sagittis lorem porttitor. Maecenas hendrerit ipsum vel nisl ornare suscipit. Donec tincidunt nunc a vestibulum ullamcorper. Maecenas venenatis varius blandit. Mauris sit amet dolor vel turpis lacinia facilisis. Fusce vitae tempor elit. Aenean a nulla a velit vulputate ornare. In elementum pulvinar libero, ut congue elit dapibus quis. Phasellus at neque fringilla, sodales turpis non, sagittis enim. Nulla facilisi.

Sed euismod purus id ante congue dignissim. Morbi lectus elit, malesuada eget ornare a, hendrerit vitae justo. Aliquam malesuada maximus nisi nec ultrices. Nulla vitae tellus vitae enim hendrerit lobortis a non dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam at eros hendrerit, pharetra ipsum vitae, congue purus. Quisque bibendum iaculis felis finibus egestas. Nunc in lorem eu risus condimentum scelerisque. Aliquam auctor dictum quam eget sollicitudin. Fusce cursus ex id velit aliquam efficitur. Morbi ornare ex in ex sodales, sit amet elementum nisl luctus. In sapien lectus, mattis vel libero id, aliquam feugiat quam.

Icon Link

Featured User

Many times we do not use text with these, but it's an option

Hanging Icon

Featured School

Paragraph of text beneath the heading to explain the heading.

More About Featured School

Bootstrap Button

Standard Button - other colors available

This is the Outline type

This is the large style

This is small and outline

Bootstrap Alert

A standard warning-style alert. There are other colors available. You can make these dismissible or not. I have toggled this option, so you can close it.

Page Title

Our Story (This is a page title at the top of a page)

Section Title

Taking Action Across Douglas County (goes above a Layout section)

Icon Graphic

This can use either a Font Awesome icon ...

Or an image, and you can control the background/text colors

Big Block CTA

Centered Block Title

This block is centered. This component is an alternative for quick links.

Left Aligned Block Title

These are probably the ones to use the most, especially when paired with other blocks

Right Aligned Block Title

This might be interesting used in a 2 column layout, on the left side, next to a left-aligned block on the right side.

Media

Bootstrap Figure

JLEC Addition workers placing final steel beam

Card

4-H Club

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et nunc a mi accumsan accumsan. Pellentesque magna est, iaculis vitae...

Visit the 4-H Website

Bio Card

Jordan Valasquez

Data Entry

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et nunc a mi accumsan accumsan. Pellentesque magna est, iaculis vitae tincidunt id, elementum eu ante. Ut efficitur molestie sagittis. Suspendisse et euismod tortor, sit amet condimentum est. Duis in tempor nisi. Cras tempus nec ex eu porta. In ullamcorper molestie est in euismod. Curabitur id massa augue. Vivamus nec erat eu massa luctus posuere. In venenatis lobortis augue a pretium. Sed nec urna quis erat tristique sagittis. Ut in arcu non ligula porta dictum. Proin maximus nisl quis urna porta, et tempus diam euismod. Curabitur sapien ante, rhoncus quis magna sed, ultrices gravida sem. Suspendisse vitae massa metus. Ut sed tristique leo.

Horizontal Card

Katie Hoke opened Streamline Coffee and Crepes in downtown Lawrence.

Entrepreneurship

Go to Entrepreneurship Page

Thumbnail Block

Patrick Reed

County Commissioner

Best used with square image, intended for people

Remote Video

Winter in Lawrence, Kansas shot by Drone Lawrence | 4K

Card Carousel

Card One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, nisi eget suscipit mollis, mi tellus eleifend nulla...

Do this specific thing

Card Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, nisi eget suscipit mollis, mi tellus eleifend nulla...

Do this specific thing

Card Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, nisi eget suscipit mollis, mi tellus eleifend nulla...

Do this specific thing

Card Four

Ideally, we would do sets of three.

Card Four

Card One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, nisi eget suscipit mollis, mi tellus eleifend nulla...

Do this specific thing

Card Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, nisi eget suscipit mollis, mi tellus eleifend nulla...

Do this specific thing

Card Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, nisi eget suscipit mollis, mi tellus eleifend nulla...

Do this specific thing

Card Four

Ideally, we would do sets of three.

Card Four

Media Carousel

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mosaic Media Gallery

Card Deck

Entrpreneurship

The NetWork Kansas Entrepreneurship Community (E-Community) program is geared towards identifying and developing resources to assist local...

Go to Administration Website

Human Resources

Human Resources is responsible for placing ads for new jobs, on-boarding new hires, handling benefits and working with third party...

Go to HR Website

Sustainability

Sustainability means balancing the needs of the economy, environment, and society. Together, we can create a vibrant economy, a healthy...

Go to Sustainability Website

Details Wrapper

What is the answer to the first question?

The answer to the first question is the first answer, perhaps.

What is the answer to the second question?

The answer to the second question is the second answer, perhaps.

What is the answer to the third question?

The answer to the third question is the third answer, perhaps.

Details Item

We used to call this an accordion item

I changed it to "Details" because I'm using the HTML "details" element. It is inherently more accessible and searchable than using JavaScript to create a dropdown on a <div> element.

Tabs

This is content for National

This is content for State

This is content for County

Surprise! Content for city

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt nec leo a venenatis. Morbi suscipit ornare maximus. Etiam interdum semper odio et egestas. Pellentesque vitae consequat quam. Vestibulum mattis volutpat felis. Morbi mauris mi, lobortis eget consequat ut, ultricies eu tortor. Aenean ultrices ligula id odio ornare iaculis. Praesent sem ex, commodo nec porta nec, fringilla quis dui. Fusce convallis dapibus augue, sed porttitor dui tincidunt ac. Nulla ornare ullamcorper orci vel finibus. Mauris pretium, turpis vitae cursus pretium, nisi sem sagittis arcu, eu mattis lacus mi eu ligula. Curabitur viverra fermentum lobortis. Sed at congue orci. Donec felis dui, rhoncus sit amet suscipit egestas, ullamcorper id mauris.