Applications

section styles

Info Facts

Take a simple list of facts and turn them into something amazing that helps being context to your page.

section styles

Motion: Buttons

animate buttons wipe bars outline

section styles

Motion: Delays

animate time hold speed decrease increase

section styles

Motion: Fade In / Grow

animat css transparent to opaque used with delay styles

section styles

Motion: Movement

animat css up down left right

section styles

Motion: Reveal

animate css pull wipe iris sunrise grow appear magic

section styles

Parallax: Advanced

scrolling and zooming on your backgrounds, this will allow you add some motion to your pages that is subtle and yet makes a noticable mark on your content.

section styles

Parallax: Basic

image backgrounds, static, flat movement, overlay

section styles

Background Colors

Based on your current theme these colors can be used on boxes, sections, cards, and features.

section styles

Background Images

Stock photos images backgrounds sections boxes

section styles

Borders

Thick or thin, all around or just on top. You can add a variety of border colors and styles to your content.

section styles

Breakout Rows

Add sudo extra boxes to your page using breakout rows class on any section. These allow you to expand the maxgutter around the section and then keeps the background at 100% wide. Esentially giving you an extra box on your page to help craft your content.

section styles

Cards

Make a section stand out with backgrounds, borders, and shadowing. Cards is an easy and effective way to draw attention to areas on your page. Simlar to features these can help with drawing user's eyes to highlighted content.

section styles

Features

Features allow you to create a content piece on your page with an image or color on top, text on the bottom, and a bottom aligned button.

section styles

Lighten / Darken Backgrounds

Change the overlay used on stock photos or image backgrounds to make your content easier to read.

section styles

Page Banners

Add banner images across the whole page and before the left navigation.

section styles

Shadows

Nothing makes it feel like you could just reach out and grab it like a shadow on your content.

section styles

Stock Photos

Built into the edit mode you can view the gallery of stock photos that are ready for use in your boxes or sections.

section styles

Top Media

Add banner images across the whole page and before the left navigation. Top media sections are formatted to behave different on the page from regular content sections.

section styles

Topic Links

image backgrounds color links large format

section styles

Washes

Used over images these semi transparent colors only cover behind the text. They are used to provide extra color without over taking your whole image.

section styles

Buttons

Links are great but a button is hard to miss. Turn your average link into a landmark by making it a button.

section styles

Icons

People may not read everything on the page but they will notice icons. Used responsibly they are great indicators to help content navigation.

section styles

Motion: Buttons

animate buttons wipe bars outline

section styles

Topic Links

image backgrounds color links large format

section styles

Blockquotes

Have a relevant bit of wisdom to share or want to highlight a specific point in your data. Let a blockquote help you emphasize it and give credit to the speaker.

section styles

Buttons

Links are great but a button is hard to miss. Turn your average link into a landmark by making it a button.

section styles

iFrame

Content from another source comes right to you with iFrames. Video, forms, or other content fits into your page while still being its own thing.

section styles

Lists

Bullet points or orangized lists with numbers these style can help keep your reader focused in short consise points of data. Work flows and timelines are also avaiable. Those classes will help format your list into a structure perfect for tasks, specific steps, and helps keep people heading in the right direction.

section styles

Page Banners

Add banner images across the whole page and before the left navigation.

section styles

Sidebar or Aside

You can use an element called an Aside, or setup a sidebar which allows you to pull together a specially formatted section that can add additional information to your page in a container that is hard to miss.

section styles

Tables

Need to convey tabular data, use a table to help navigate large spreadsheet type datasets. Search and sort features available. Remember that tables are required to have headers and captions for accessiblity.

section styles

Top Media

Add banner images across the whole page and before the left navigation. Top media sections are formatted to behave different on the page from regular content sections.

section styles

Background Images

Stock photos images backgrounds sections boxes

section styles

Edges

Control the corners of your content. Make it round, chamfer, pill, and more to bring simple touches to your content.

section styles

Placement: Content & Images

Background images can have positioning which impacts what is shown. Content can be aligned to the a specific area to make sure that it aligns right or provides the bets view of your background.

section styles

Stock Photos

Built into the edit mode you can view the gallery of stock photos that are ready for use in your boxes or sections.

section styles

Topic Links

image backgrounds color links large format

section styles

Applications

Add in extra content to your pages, extend the current page or reuse the same content on multiple pages. sort, filter, search, info block, dynamic content

section styles

Directories

faculty staff list, services, locations, products, items. Add in extra content to your pages, extend the current page or reuse the same content on multiple pages

section styles

Events

25Live, calendar, campus calendar, local events, or events from outside sources. Add events to your pages and pull them in dynamically with number of days to show and any of the current campus calendars.

section styles

Galleries

gallery, picture, display, mason, and pintrest styles. Add in extra content to your pages, extend the current page or reuse the same content on multiple pages

section styles

Hours

desk, time, schedule, section, open, closed, holiday, breaks, available

section styles

Media Layouts

slide show, blocks, carosel, move, stacked, content,

section styles

Microblog

blog your content auto date formatting for published and updated dates. calendar feature. Add in extra content to your pages, extend the current page or reuse the same content on multiple pages

section styles

Regular Content

Add in extra content to your pages, extend the current page or reuse the same content on multiple pages

section styles

Buttons

Links are great but a button is hard to miss. Turn your average link into a landmark by making it a button.

section styles

Icons

People may not read everything on the page but they will notice icons. Used responsibly they are great indicators to help content navigation.

section styles

Topic Links

image backgrounds color links large format

section styles

Info Facts

Take a simple list of facts and turn them into something amazing that helps being context to your page.

section styles

Lists

Bullet points or orangized lists with numbers these style can help keep your reader focused in short consise points of data. Work flows and timelines are also avaiable. Those classes will help format your list into a structure perfect for tasks, specific steps, and helps keep people heading in the right direction.

section styles

RSS Feeds

Bring in news, stories, and more into your pages without needing to create the data yourself. RSS is a standard format and see the ready to go styles to help add it to your pages.

section styles

Icons

People may not read everything on the page but they will notice icons. Used responsibly they are great indicators to help content navigation.

section styles

Notifications

Help clearly identify special pieces of content that will keep users up to speed with potential problems, not to be missed data, and highlights. These can be added to a whole section or to pieces inside a section.

section styles

Parallax: Advanced

scrolling and zooming on your backgrounds, this will allow you add some motion to your pages that is subtle and yet makes a noticable mark on your content.

section styles

Parallax: Basic

image backgrounds, static, flat movement, overlay

section styles

Borders

Thick or thin, all around or just on top. You can add a variety of border colors and styles to your content.

section styles

Breakout Rows

Add sudo extra boxes to your page using breakout rows class on any section. These allow you to expand the maxgutter around the section and then keeps the background at 100% wide. Esentially giving you an extra box on your page to help craft your content.

section styles

Cards

Make a section stand out with backgrounds, borders, and shadowing. Cards is an easy and effective way to draw attention to areas on your page. Simlar to features these can help with drawing user's eyes to highlighted content.

section styles

Edges

Control the corners of your content. Make it round, chamfer, pill, and more to bring simple touches to your content.

section styles

Features

Features allow you to create a content piece on your page with an image or color on top, text on the bottom, and a bottom aligned button.

section styles

Heights

Control how tall a section or box is by default. These sizes are a minimum size and will grow with content.

section styles

Margin / Padding

Change the space in and around your content sections. This can help offset information from the rest of your page and draw attention to it.

section styles

Page Banners

Add banner images across the whole page and before the left navigation.

section styles

Placement: Content & Images

Background images can have positioning which impacts what is shown. Content can be aligned to the a specific area to make sure that it aligns right or provides the bets view of your background.

section styles

Spacing

The gaps between content sections can be controlled within the page or each box. This allows you to add some extra room between the content sections on your pages without using extra margins or padding.

section styles

Top Media

Add banner images across the whole page and before the left navigation. Top media sections are formatted to behave different on the page from regular content sections.