Web CommunicationWeb TrainingWeb Design System (WDS) TrainingBlocksUseful Classes & Customization

Useful Classes & Customization

Overview

This is a page dedicated to listing and explaining custom WDS classes to increase awareness of useful classes that aren’t shown as WDS block controls.

Quick Links

Dropshadows

Dropshadows are implemented with this list of WDS classes:

  • wsu-dropshadow--high
  • wsu-dropshadow--medium
  • wsu-dropshadow--low

Note: Dropshadows are NOT compatible with the Notch style.

Example – Dropshadow on Cards

High Dropshadow Class

wsu-dropshadow–high is entered in the Advanced Panel > Additional CSS Class(es) field.

Medium Dropshadow Class

wsu-dropshadow–medium is entered in the Advanced Panel > Additional CSS Class(es) field.

Low Dropshadow Class

wsu-dropshadow–low is entered in the Advanced Panel > Additional CSS Class(es) field.

List Styles

There are several styles that are not shown in the editor controls for the List Block.

Add the CSS class to the Advanced Panel > Additional CSS Class(es) field.

Example – List styles

Boxed List style

wsu-list--style-boxed

  • List item
  • List item
  • List item
  • List item

Checkmark List style

wsu-list--style-checkmark

  • List item
  • List item
  • List item
  • List item

Arrows List style

wsu-list--style-arrow

  • List item
  • List item
  • List item
  • List item

Lined List style

wsu-list--style-lined

  • List item
  • List item
  • List item
  • List item

Notch

Notches are implemented with this list of WDS classes:

  • wsu-notch--large
  • wsu-notch--medium
  • wsu-notch--small

Note: Dropshadows are not compatible with the Notch style.

Example – Notch on Cards

Sample image with a large notch.

wsu-notch--large

Add the CSS class to the Advanced Panel > Additional CSS Class(es) field.

Sample image with a medium notch.

wsu-notch--medium

Add the CSS class to the Advanced Panel > Additional CSS Class(es) field.

Sample image with a small notch.

wsu-notch--small

Add the CSS class to the Advanced Panel > Additional CSS Class(es) field.

Opacity

Opacity classes can be used with decorative elements like the Decorator to make more creative layouts and to ease visual noise.

Opacity is implemented with this list of WDS classes:

  • wsu-opacity--medium
  • wsu-opacity--lightest

Add the CSS class to the Advanced Panel > Additional CSS Class(es) field.

Example – Opacity on Decortators

No Opacity Class

Sample image with a decorator with no opacity.

wsu-opacity--medium

Sample image with a decorator with medium opacity.

wsu-opacity--lightest

Sample image with a decorator with lightest opacity.

Place the class on the element, like the Decorator, you want to become more transparent. The three examples have no opacity class, the medium opacity class, and the lightest opacity class set on the crimson block decorator.

Pull

The wsu-pull class can pull content up or down, even overlapping other content.

CSS Class Structure

The wsu-pull class uses the following structure:

wsu-pull-[direction, up or down]--[breakpoint]-[pull amount]

For example, to pull content up on screen sizes tablet or larger by xhero amount, you would use this class:

wsu-pull-up--tablet-xhero

Breakpoint

  • phone-small
  • phone
  • tablet
  • tablet-medium
  • tablet-large
  • desktop
  • desktop
  • xultrawide
  • xultrawide

Pull amount

  • sxxsmall
  • xxsmall
  • xsmall
  • small
  • medium
  • xmedium
  • xxmedium
  • large
  • xlarge
  • xxlarge
  • hero
  • xhero
  • xxhero

Example – Large image with cards pulled up

Sample image with cards pulled up over the image.

This card is pulled up on top of the hero

Using the wsu-pull-up–tablet-xhero class

This card is pulled up on top of the hero

Using the wsu-pull-up–tablet-hero class