The left item can be the same height as the right item or reduced to the height of its content by changing the vertical line from auto to center.
Each item has its own background color and opacity which could be set the same if required and the grid gap removed to make it seemless.
The background could be a solid color, two color gradient or an image as used here.
A Jumbotron is used to draw attention to a specific item, a new product/service or a special, limited time. offer
Image
When the image option is selected it is inserted in three sizes for the various devices and has a lazy loading option to use if the item is not in view on page load.
Containers
The containers have controls to adjust their relative widths and controls to add a border and/or a bottom box shadow.
With the widespread adoption of the CSS Grid Layout Module web designers are using it to create more interesting designs with overlapping items and a liberal use of white space.
Cramming stuff into tight little row of boxes makes relevant content hard to find and is a sure indicator of outdated design.
Overlapping items make it easier to see which ones are directly related. In this case the text box overlaps the full width gradient background header to make the article easy to find and lets visitors know that the heading is related to the text content. This might not seem important at first sight but it makes the difference between a succesfull design and a mediocre one!
Layout Options
The overlap is created by adding a second row to the header and a negative top margin to the content.
The header with the optional icon and the main heading are in row one.
The article has a heading, text, optional list, options for another heading and text and a link bar.
The image is inserted in two or three sizes with alt text and a lazy loading option. The description has a heading, styled spans, text and an optional navigation.
When used without the header the ThemeKit Graphic Design Image widget can overlap the item abover.
Header
The optional header has an icon and an h1 heading. When the overlap checkbox is checked a second row is added to allow the content section to overlap.
Animation
The optional animation on scroll has controls animation on or span, rotate on X-axis, translate on the Y-axis, initial scale and perspective.
