Bucket widget

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

Datadef element	Description
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 image	Set to 'yes' to attach an image to the widget.
Main image > Placement	Only 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 > Alignment	Only appears if 'Include image' is set to 'yes'. Sets the main image alignment to left or center.
Main image > Include link	Only appears if 'Include image' is set to 'yes'. Set to 'yes' to make the main image linkable.
Main image > Link	Only appears if 'Include image' and 'Include link' are both set to 'yes'. Refer to 'Working with links'.
Main image > Image	Only 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.

Above: a bucket with left-aligned image

Bucket with center-aligned image.

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.

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.