left col

Features

Web standards is about removing guess work for end users. We all want to feel comfortable when looking for answers. Campus templates now work with two types of content blocking styles, Cards and Features.

right col

left col

Making a feature

Features are flexible, but they do require a couple of elements.

image for the top
title elements for the top text
bottom text all other content without title
last line is bottom aligned

The image does not need to be the first item in your editor, but it will always be on top of the feature. The image will auto darken when hovering over the content.

All items with title will be moved to the top of the feature.

All remaining items will appear below the image.

use class "feature" in the CSS section where you enter the content.

Example content

statue of david background

Example content

Feature content will automatically be formatted in preview or production mode. When editing it will appear as regular content.

The last line in your content will default to be aligned on the bottom. This is helpful to have as a link to related content.

Last Item Goes Here

right col

left col

Additional Styles

To provide variation on the title elements use the 'smaller text', 'larger text', or 'standout' text sizes. That will get something that looks like it has a sub/post description over the title.

Features are meant to be small blocks that lead the reader to something else, or just convey a few lines of text, not for full page documents.

If you want to get the text on the top part to be in the middle of the background color or image, use " feature-middle" as additional styles in your CSS section.

right col

left col

Example content

Showing the feature-middle class

library patio

Example content

Showing the feature-middle class

All of the feature content will automatically be formatted after you save.

A few items to mention
Place content in a list for easy reading

Last Item Right Aligned

Example content

Try variations to your titles

football field background

Example content

Try variations to your titles

All of the feature content will automatically be formatted after you save. When editing it will appear as regular content.

The last line in your content will default to be aligned on the bottom. This is helpful to have as a link to related content.

Last Item

right col

left col

Stock Photos

You can add a stock photo to the feature block by simply including it with 'feature' in the section CSS.

While in edit mode, you'll see the stock photo appear behind you content, but when it is in preview or produciton the content will look as expected.

Stock Photo Example

When using a stock photo its important that you don't include your own image. The local image will override the stock photo you are tyring to use.

Last Item

right col

left col

Color instead of Images

Theme colors work as well, just use the background color code (ie: background-1) and the top will become a solid color.

The bottom of the features will always be either the theme white or a gray for dark mode.

Theme Colors

No image, no problem

Theme Colors

No image, no problem

All of the feature content will automatically be formatted after you save.

A few items to mention
Place content in a list for easy reading

Last Item Centered

right col