Skip to content

Wide Image

full-width image.

Table of Contents

  1. Usage Guidelines
  2. Accessibility
  3. WordPress
  4. Specifications
    1. Properties
    2. Styling
      1. Modifiers
  5. Changelog
  6. Examples

Usage Guidelines

This component is used for placing full-width images with an optional color gradient overlay. Note that the image will scale up to fill the full space, so if an image with a more square aspect ratio is used it can appear very tall on landscape displays like laptops.

If an image needs to be placed next to other content, images can be added directly inline instead of this component, or as part of a Two Column component.

Accessibility

Image should have alt text if appropriate.

WordPress

This component can be added to post content with the Wide Image block in the Gutenberg editor.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
imageinteger WordPress image ID Yes-
overlayboolean Show color overlay on top of the image Nofalse
classstring list of additional classes to apply to main element. No-

Styling

Modifiers

NameClassDescription
Overlay.tux-c-wide-image--overlayAdds a colored gradient over the image

Changelog

1.0.0

  • wide-image added

Examples

Default 

{{ include( 'components/wide-image.twig', {
	image: "hero-background-lg.jpg"
} ) }}

Overlay 

{{ include( 'components/wide-image.twig', {
	image: "hero-background-lg.jpg"
	overlay: true
} ) }}