Web CommunicationWeb TrainingWeb Design System (WDS) TrainingBlocksDecorator Block

Decorator Block

Hide at Breakpoint
Small Triangle in Bottom Right Corner
Styled Separator
Spotlight Overlap and Decorator Block

Hide at Breakpoint

In the Decorator Panel under Additional Advanced Settings under Advanced is the Hide at Breakpoint dropdown list.

Preview the Webpage

Preview the webpage. Change the size of your browser and watch how the decorator behaves as the webpage gets smaller in the browser. If it is wonky you can select one of the breakpoints to remove the decorator from the page.

Small Triangle in Bottom Right Corner

[Section Block]

[Generic Container Block]

  1. Add container for your content (Column block or Section block).
  2. Set the Overflow Hidden on this container.
    If using a column set this on the outer row.
    Column Block > Advanced > Additional Advanced Settings > toggle on Overflow Hidden
  3. Add a Decorator Block. It can be before or after the content.
  4. Set the Style Options for a top right or bottom right triangle
    1. Set the Space Setting for a top right triangle (any type) to top: 0 or for a bottom right triangle (any type) to bottom: 0.
    2. Set the Space Settings for the top right Triangle (WSU) to left: [px (500px), % (90%) or calculation (calc(100%-100px))]

Example: Outer block: Section block, Inner block: Generic Container block, Decorator block: Triangle (WSU) (Top Right): Bottom: 0, Left: 90%

[Decorator Block]

Styled Separator

[Generis Container]

  1. Add container for your content (Column block, Section block or Generic block).
  2. Set the Overflow Hidden on this container.
    If using a column set this on the outer row.
    Column Block > Advanced > Additional Advanced Settings > toggle on Overflow Hidden
  3. Add a Decorator Block. It can be before or after the content.
  4. Set the Style Options for a block or lines
    1. Set the Space Setting for top: 0 or bottom: 0.
    2. Set the Space Settings for width: 100% and height: [px (500px), % (90%) or calculation (calc(100%-100px))]

Example: Outer block: Generic block, Decorator block: Lines Crimson: Bottom: 0, Width: 100%, Height: 25px

[Decorator]

Spotlight Overlap and Decorator Block

[Generic Container]

[Decorator]

A bronze sculpture of a cougar.

Part 1: Overlap Spotlight

  1. Add a Generic Container
  2. Select Position Element under Additional Advanced Settings for the Generic Container.
  3. Add Overlap Spotlight and add images, text, and any Style Options.

Part 2: Decorator

  1. Add a Decorator block above or below the Spotlight block.
  2. Add the Style Options to Lines Crimson.
  3. For Display Options add: Bottom -25px, Left: -25px; Width: 75%; Height: 75px. (Adjust theses measurements as needed.)