Sample of all 'landing page' content components

This is a body content component.

You can include:

• links
• lists (bulleted and numbered)
• indented quotes (or callout)
• block text

blah blah blah blah blah blah blah blah blah blah blah blah. Here's an inline link.

Heading 2

Keffiyeh tote bag hashtag snackwave shaman. Bicycle rights ennui marfa four dollar toast cornhole, health goth fixie kitsch squid kinfolk. Microdosing chartreuse vape yr mustache.

Heading 3

Venmo chia synth banjo skateboard. Pug pok pok artisan fanny pack kitsch butcher schlitz selfies messenger bag disrupt thundercats four loko leggings readymade +1.

Heading 4

Tilde pork belly gastropub, tacos heirloom cold-pressed trust fund cred iPhone listicle succulents pok pok twee. Hell of vinyl tofu portland.

Heading 5

asymmetrical beard. Waistcoat photo booth synth drinking vinegar gastropub. Tilde pork belly gastropub, tacos heirloom cold-pressed trust fund cred iPhone listicle succulents pok pok twee. 

Block quote

Keffiyeh tote bag hashtag snackwave shaman. Bicycle rights ennui marfa four dollar toast cornhole, health goth fixie kitsch squid kinfolk. Microdosing chartreuse vape yr mustache.

This is the block quote with 2 lines of caption, accessed via the 'document' icon. The following comes up when you insert the cursor and click the doc icon. We DON"T want the source line to display in all caps!

Keffiyeh tote bag hashtag snackwave shaman. Bicycle rights ennui marfa four dollar toast cornhole.

This indented quote is created using the icon with the double quotes on it (rollover label is 'block quote'). It does display as indented in the WYSIWYG but I suggest it be indented more on the right side. Trust fund migas offal salvia freegan. Swag hell of church-key, keytar waistcoat taxidermy flannel pug banh mi trust fund gentrify pickled.

Callout styles

Callout style - single paragraph

This paragraph has the 'callout' style applied to it. (It doesn't display as indented in the WYSIWYG; looks like body text). To apply this, select some text, click on the block styles dropdown next to the Bold and itals buttons. Then click callout. We should have a character limit or suggested limit as it looks bad when too long.

Currently callout style does not allow line breaks, headings, lists, it only displays well for a single paragraph.

Callout style - WYSIWYG

This callout style should be used when additional formatting is needed, such as headings and lists. You can select a chunk of content and apply this callout style and it will appear as one callout with a single vertical line on the left and a single 'box' of shading (whereas paragraph and line breaks on the single-paragraph callout make it display as two separate callouts.

List formatting and nesting 

1. Integer mattis
2. tellus id libero
   1. dapibus mattis (should be lower case alpha)
   2. donec egestas ultricies
      1. neque in elementum (should be lower case roman)
      2. Fusce blandit
         1. magna magna (should be ???)
3. ut luctus nisl

• ultricies vitae (styles grey circle)
• Quisque ut tortor laoreet
  • luctus tellus at (styles TBC)
    • pretium dolor (styles TBC)
    • Maecenas efficitur
      • mi at ipsum egestas (styles TBC)
        • ullamcorper.
        • Maecenas
          • a lacus nisi.
    • Morbi dictum feugiat
    • odio, nec volutpat
    • diam tristique
  1. vel. Suspendisse dui dui, cursus eleifend ipsum id, pelle
  2. ntesque dictum sapien
• Fusce eleifend rhoncus orci vitae convallis. Maecenas eleifend ut nunc non commodo. Cras sapien augue, dignissim eu viverra at, placerat eget libero. In at nunc lectus. Curabitur felis libero, lacinia in augue sit amet, gravida congue urna. Nullam id maximus dolor.

Following is a horizontal line.

Tables

Here's a table.

Buttons

Here are some buttons (click page/doc icon and choose a button; a blank line is also inserted under the button):

Primary button text

The secondary button is a different colour, that's all

Secondary button text

Another heading 2 - embedded image

Following is an example of an image.

Documents for download

And here's an embedded document (automatically selects and displays icon and calculates and displays size):

Accordions

Now below is an accordion (inserted as a content component, not in body content).

Calls to action

Here are two call to action tiles inserted in 2 possible ways.

Timeline

Below is a timeline.

Images

Our guidelines for images in body text say:

landscape images should be 818px wide by 496px high

portrait images no larger than 400px high

Here I've tested what happens when you have an image that is 818px but at different heights - this shows that the images are being resized for display as the CMS is finding them too high.

Testing image sizing - is display of images 818px wide affected by its height?

800x200

800x400

800x500

800x600

800x800

Smaller images

When you're inserting an image in body content, the width is important because our front end displays the width according to the breakpoint (device screen size).​ Images should be 818px wide.

Here you can see the same image (150px x 150px) embedded and embedded as thumbnail. Try reducing the size of your window - you'll to see that the first one expands to fill the width of your screen (and becomes pixellated because it was a small image not intended to be displayed so large).

Here's an image 'embedded':

Here's the same image 'embedded as thumbnail':

Here's an image 'embedded with caption' (you can't have both thumbnail and caption):

Videos

Refer to the instructions for adding videos. Note that when you embed a video, you must click on the dropdown and select Embedded with transcript.

Image gallery

You build image galleries in Structure > Block layout > Custom block library section and then insert the component into Landing pages via the Component type dropdown.