Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The bucket is a very versatile content widget that groups together an image with custom html.

Datadef elementDescription
Width

Indicates the width of the widget relative to the total amount of horizontal space available. Note that including a secondary navigation or sidebar on your page will decrease the total horizontal space available for widgets. This setting affects widget widths on large screen sizes only.

Collapse content

All or Indicates which portions of the bucket content are collapsed. A user can reveal collapsed content with the 'open' button.

  • none - Bucket is not collapsible. Content in the 'Displayed content' field is included and shown.
  • partial - Content provided in the 'Displayed content' field is included and shown. If a bucket image is included, it is also shown. Content in the 'Collapsed content' field is included and hidden.
  • all - Content in the 'Collapsed content' field is included and hidden, Bucket images placed after the heading are collapsed as well. If a bucket image in placed before the widget heading or the widget heading is set to 'hidden', the bucket image is not collapsed.
Include imageSet to 'yes' to attach an image to the widget.
Main image > PlacementOnly appears if 'Include image' is set to 'yes' and the widget heading type is set to 'text' or 'link'. Indicates whether the image is place before or after the widget heading.
Main image > AlignmentOnly appears if 'Include image' is set to 'yes'. Sets the main image alignment to left or center.
Main image > Include linkOnly appears if 'Include image' is set to 'yes'. Set to 'yes' to make the main image linkable.
Main image > LinkOnly appears if 'Include image' and 'Include link' are both set to 'yes'. Refer to 'Working with links'.
Main image > ImageOnly appears if 'Include image' is set to 'yes'. Refer to 'Working with images'.
Displayed content

Only appears if 'Collapse content' is set to 'none' or 'partial'.

 This is the html content to be displayed in the widget.

Accessibility note: if a widget heading is displayed (refer to 'Working with widgets'), do not use heading levels h1 through h3. The top-most heading level for this content in this case is h4. If a widget heading is not displayed, you may use heading levels h3 through h6.

Collapsed content

Only appears if 'Collapse content' is set to 'partial' or 'all'.

This is the html content to be collapsed in the widget.

Examples

Bucket with left-aligned image.Image Added

Above: a bucket with left-aligned image

Bucket with center-aligned image.Image Added

Above: bucket with center-aligned image

Notes

Sometimes a row of buckets will have misaligned images resulting from some long widget headers that wrap onto multiple lines.

A row of buckets with misaligned images.Image Added

If you want all the images in a row of buckets to align, try positioning the bucket images before the widget heading instead of before.

A row of buckets with aligned images.Image Added