Update 08/15/2019: Since the original date of this post, we've made improvements to our image card and row card that make achieving a split look even easier and which works better on smaller devices. To achieve this effect, you'll want to select the Wide layout option on your Row Card, and then add an Image Card and a Text Card side-by-side.
Under Options on the Image Card, toggle on Scale to Fit, which allows the image to proportionately resize and fill whatever space is available. This may mean that some of the image will be hidden off screen on smaller devices, but you can use the Focal Point control to indicate what part of the image you want to stay predominantly visible during the resizing.
On the Text Card side, you may need to hit enter a couple times to vertically align your text, but the Text Card uses a transparent background and will rely on the background-color and text-color that you set in the Row Card.
Note: You will see some padding on the cards when you're in edit mode. This is a result of needing room for our hover controls. It will not be visible in live mode and you will have the edge-to-edge effect after you save and view your site.
--------
While designing Hub sites, you may find that you'd like to have images that bleed to the edges of your site. Unfortunately, in order to do this you would need to have a fluid-width container as the Bootstrap 3 grid depends on a set of nested elements: row, container, columns. Our app is based on a fixed-width container, which prevents columns and their content from taking up 100% of available screen space, and keeps your content from resizing past a certain maximum width. We've found this works best for the majority of sites. However, the rows which are outside of the container, are set to be fluid. This is what presently allows 100% width image and color backgrounds on rows. We're going to take advantage of that to achieve a split bleed look.
Steps
<div style="min-height: 350px;"></div>
If your image is not decorative, you may want to add an aria-label to the div for web accessibility, since background images are not conveyed to assistive technologies like screen readers and do not support the alt text attribute.
<div style="min-height: 350px;" aria-label="city sunrise"></div>
<h1 style="display: inline-block; background-color: #2d2d2d; padding: 10px 20px;">
We are Making a Difference
</h1>
<p style="background-color: #2d2d2d; padding: 10px 20px;">
Welcome to our city.
</p>