Example Modules

Reusable components to jumpt start development.

This whole page here is in a .page module. This is a module created for basic pages with a wrapping .page div, and a .page__header and optional .page__footer.

Note that these components use basic inline javascript for some UI actions. Since Skyline focuses on CSS, you are free to use any javascript libraries you wish.

Alerts

Alerts are UI elements that give important info.

×

ERROR: Uh oh - something went wrong

×

WARNING: Shake it fast, but watch yourself.

×

SUCCESS: The secret to my success is that I learn, 25 hours a day!

×

INFO: All the planets can fit in the space between the earth and moon.

Callouts

Callouts are those sections of featured content that usually contain an icon, a title, and some text. These are usually in a row, and call attention to highlighted features.

We're putting these into a small 2 up, medium 4 up grid

Feature

This callout is very impressive, and should command your attention

Feature

This callout is very impressive, and should command your attention

Feature

This callout is very impressive, and should command your attention

Feature

This callout is very impressive, and should command your attention

Thumbnails

Thumbnails are usually found within a grid or gallery, as a teaser or preview of more content. The common use is to have an image on top of a title and text below, while the entire thumbnail is an anchor link.

We're putting these into a small 2 up, medium 4 up grid

A caption title here

Some more text follows to tease the rest of the content

A caption title here

Some more text follows to tease the rest of the content

A caption title here

Some more text follows to tease the rest of the content

A caption title here

Some more text follows to tease the rest of the content

Modals

Click the button below to see our basic starter modal.