Web Support for Content Editors & Creators

Slide CSS classes

The following CSS classes offer more display options depending upon the slide image. They also afford responsiveness (i.e., viewability at various display sizes) and accessibility.

Slide title

On larger displays, this text will overlay the image. It moves above or below the image at smaller viewports (e.g., phones).

title-hide
Hides the title offscreen. It is still there for a screenreader, but not visually present.
title-right
Aligns the title to the right.
title-left
(DEFAULT) Aligns the title to the left.
title-smaller
Shrinks the title a bit.
title-bigger
Enlarges the title a bit.
title-lower
Displays the title near the bottom of the slide.

Slide description

Sometimes the image begs for an overt description and, perhaps, a link into the originating digital collection.

desc-hide
Hides the description offscreen. It is still there for a screenreader, but not visually present.
desc-left
(DEFAULT) Aligns the title to the left.
desc-right
Aligns the title to the right.
desc-full-width
Stretches the description all the way across the image and aligns in the center by default.
desc-bottom
Aligns the description to the bottom of the image. NOTE: This will overlap with the default display of an image description.

Slide image description

img-desc-hide
(DEFAULT) Hides the image description offscreen. It is still there for a screenreader, but not visually present.
img-desc-show
Shows the image description onscreen.
img-desc-left
(DEFAULT) Aligns the image description to the left.
img-desc-right
Aligns the title to the right.
img-desc-full-width
Stretches the image description all the way across the image and aligns in the center by default.
img-desc-bottom
(DEFAULT) Aligns the image description to the bottom of the image.
img-desc-top
Aligns the image description to the top of the image.

Navigation

Comes in two forms:  previous/next buttons and progress dots (not implemented, yet). Navigation only makes sense when two or more slides are enabled. Because of this, it is disabled by default and can be enabled via the following classes.

nav-pn-hide
(NOT implemented, yet) Hides the previous and next buttons.
nav-pn-show
(NOT implemented, yet) (DEFAULT) Shows the previous and next buttons if there is more than one slide.

Covers

Covers add a pattern on top of the image. It is basically a transparent image on top of your primary image. The benefits are 1) It can darken a very bright image for greater contrast and 2) It can hide some image compression artifacts without blurring the image.

cover-pattern-screendoor
[description and example]
cover-pattern-gridpaper
[description and example]