Content Block
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.
Default layout
The default layout is a one column block of content.
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.
- Lorem ipsum dolor sit amet consectetur, adipisicing elit
- Lorem ipsum dolor sit amet consectetur, adipisicing elit
- Lorem ipsum dolor sit amet consectetur, adipisicing elit
Multiple columns
The browser determines how it distributes content between columns, which may result in layouts that don’t match your expectations. If this occurs, we recommend using the Grid layout for more precise control.
Two Columns
Use the class content-block--2-cols to split content into two columns.
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.
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.
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.
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.
Lorem ipsum, dolor sit amet
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.
Lorem ipsum, dolor sit amet
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.
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.
Three Columns
Use the class content-block--3-cols to split content into three columns.
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.
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.
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.
Lorem ipsum, dolor sit amet
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet qui ratione voluptas magnam amet, repellat quibusdam numquam corrupti a exercitationem, atque voluptatibus ipsa, asperiores unde provident nostrum fugit cumque minima?
Lorem ipsum, dolor sit amet
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet qui ratione voluptas magnam amet, repellat quibusdam numquam corrupti a exercitationem, atque voluptatibus ipsa, asperiores unde provident nostrum fugit cumque minima?
Lorem ipsum, dolor sit amet
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet qui ratione voluptas magnam amet, repellat quibusdam numquam corrupti a exercitationem, atque voluptatibus ipsa, asperiores unde provident nostrum fugit cumque minima?
Titles
To make the first heading element span the entire row, apply the content-block--title-row class.
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.
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.
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.
To make the first heading element span the entire first column, apply the content-block--title-col class.
Lorem ipsum dolor sit amet consectetur adipisicing elit
Lorem ipsum dolor sit amet
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.
Lorem ipsum dolor sit amet
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.
Lorem ipsum dolor sit amet
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.
Lorem ipsum dolor sit amet
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.