Hero
Demos below show all available layouts. Position modifiers adjust the position of the hero graphic. A container class is required within content, as this only controls the outer layout. For example container-small is being used below. Note fill-context can be used on graphic container if you can't add a class directly to the img/video.
Split (left)
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.

Split (right)
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.

Split (top)
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.

Split (bottom/default)
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.

Overlay (compact)
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.

Split (left, compact)
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.

Split (right, split-graphic-wide)
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.

Split (left, split-content-wide)
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
