Wide Image
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
Property | Type | Description | Required | Default |
---|---|---|---|---|
image | integer | WordPress image ID | Yes | - |
overlay | boolean | Show color overlay on top of the image | No | false |
class | string | list of additional classes to apply to main element. | No | - |
Styling
Modifiers
Name | Class | Description |
---|---|---|
Overlay | .tux-c-wide-image--overlay | Adds 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 } ) }}