Hero Overline

This is the Hero Title

Hero Subhead

16x9 Hero Background Banner

This is a Text Area Title (H3)

This is an example of a text area component.  It can contain text, images, MediaHub videos, and tables.  The text of this component will take up the full width of the column it's in, but there is a max width setting that can limit the width.  You might want to limit the width when using a single wide column to make the text more readable. 
 

This is Text Area Subhead (H5)

When creating a text area in a text area you understand the difference between a newline and a paragraph break.  Paragraph breaks are done by hitting enter/return and start a new line with a little extra margin on top to help separate the paragraphs. The following is a standard paragraph break.

If you want to start a new line without the extra margin, you can press and hold shift and then press enter/return.  This starts a new line but does not have any extra margin above it, which is useful for something like an address.

Herbie Husker
123 Main St.
Lincoln, NE 68588

A key thing to note here is that some styles, such as heading and text size, can only apply to whole paragraphs.  If you were to try and apply a heading style to just the first line of the above address, all three lines would be affected.

16x9 Half Sized

Compare to the HERO image...

The above is a 16x9 image, inserted via the simple media component.  Simple media elements fill up the entire width of the column.  It is divided into 16 squares across by 9 squares high.  Because a crop ratio is not set for it, you should be able to see all of it.  

Note how the hero image, which is the same image, is cropped automatically based on screen size.  A 16x9 image is the recommended size, but at normal screen sizes, you may only see the middle third of the image, with the top and bottom being cropped out.  If the image format is wider that 16x9 the left and right sides are cropped off to get it to 16x9, and then the same vertical cropping based on screen size is done.