Content Block

Overview

Content Blocks are used as semantic wrappers for component blocks within the body of a page. They provide the layout elements necessary to achieve the appearance of a uniform central container.

They need to:

  • Be full width on the outer wrapper so that background colours or full/half width images are able to be implemented
  • Use left and right margins to align the content to a virtual centre container
  • Use top and bottom padding to regulate vertical spacing

alt backgrounds are shown for CSS rule validation purposes and are not to be made generically available as a section background option.

Content block

Example:

Lorem ipsum, dolor sit amet consectetur adipisicing elit

Pariatur velit aliquip minim magna nulla quis laboris. Ex culpa consectetur anim irure velit eiusmod. Et sint consequat non nulla et consectetur esse commodo aliqua id non voluptate nisi consectetur. Ipsum pariatur commodo voluptate Lorem labore nostrud sunt reprehenderit magna velit amet sunt et non. Dolor deserunt et quis cupidatat cillum fugiat ipsum incididunt non ullamco. Eu minim consectetur cupidatat consectetur eiusmod. Nulla mollit cillum dolor labore aliquip mollit. Est mollit eiusmod nostrud nisi labore.

Alternate Content block

Example:

Lorem ipsum, dolor sit amet consectetur adipisicing elit

Pariatur velit aliquip minim magna nulla quis laboris. Ex culpa consectetur anim irure velit eiusmod. Et sint consequat non nulla et consectetur esse commodo aliqua id non voluptate nisi consectetur. Ipsum pariatur commodo voluptate Lorem labore nostrud sunt reprehenderit magna velit amet sunt et non. Dolor deserunt et quis cupidatat cillum fugiat ipsum incididunt non ullamco. Eu minim consectetur cupidatat consectetur eiusmod. Nulla mollit cillum dolor labore aliquip mollit. Est mollit eiusmod nostrud nisi labore.

Adjacent Content blocks

Example:

Lorem ipsum, dolor sit amet consectetur adipisicing elit

Pariatur velit aliquip minim magna nulla quis laboris. Ex culpa consectetur anim irure velit eiusmod. Et sint consequat non nulla et consectetur esse commodo aliqua id non voluptate nisi consectetur. Ipsum pariatur commodo voluptate Lorem labore nostrud sunt reprehenderit magna velit amet sunt et non. Dolor deserunt et quis cupidatat cillum fugiat ipsum incididunt non ullamco. Eu minim consectetur cupidatat consectetur eiusmod. Nulla mollit cillum dolor labore aliquip mollit. Est mollit eiusmod nostrud nisi labore.

Lorem ipsum, dolor sit amet consectetur adipisicing elit

Pariatur velit aliquip minim magna nulla quis laboris. Ex culpa consectetur anim irure velit eiusmod. Et sint consequat non nulla et consectetur esse commodo aliqua id non voluptate nisi consectetur. Ipsum pariatur commodo voluptate Lorem labore nostrud sunt reprehenderit magna velit amet sunt et non. Dolor deserunt et quis cupidatat cillum fugiat ipsum incididunt non ullamco. Eu minim consectetur cupidatat consectetur eiusmod. Nulla mollit cillum dolor labore aliquip mollit. Est mollit eiusmod nostrud nisi labore.

Lorem ipsum, dolor sit amet consectetur adipisicing elit

Pariatur velit aliquip minim magna nulla quis laboris. Ex culpa consectetur anim irure velit eiusmod. Et sint consequat non nulla et consectetur esse commodo aliqua id non voluptate nisi consectetur. Ipsum pariatur commodo voluptate Lorem labore nostrud sunt reprehenderit magna velit amet sunt et non. Dolor deserunt et quis cupidatat cillum fugiat ipsum incididunt non ullamco. Eu minim consectetur cupidatat consectetur eiusmod. Nulla mollit cillum dolor labore aliquip mollit. Est mollit eiusmod nostrud nisi labore.

Lorem ipsum, dolor sit amet consectetur adipisicing elit

Pariatur velit aliquip minim magna nulla quis laboris. Ex culpa consectetur anim irure velit eiusmod. Et sint consequat non nulla et consectetur esse commodo aliqua id non voluptate nisi consectetur. Ipsum pariatur commodo voluptate Lorem labore nostrud sunt reprehenderit magna velit amet sunt et non. Dolor deserunt et quis cupidatat cillum fugiat ipsum incididunt non ullamco. Eu minim consectetur cupidatat consectetur eiusmod. Nulla mollit cillum dolor labore aliquip mollit. Est mollit eiusmod nostrud nisi labore.