Skip to main content

Content rich block

Content rich block is used to lay out groups of text across the page grid in a way that each group maintains its identity across different viewport sizes. The elements contained within each group can be unique and maintain their relative hierarchy.

Example

Powerful

The first full laptop has arrived in the Surface family. Surface Book is a powerful laptop with a full sized, backlit keyboard for fast and natural typing.

Vibrant

The 13.5” PixelSense™ Display gives you Pen and touch, while having nearly 2 million more pixels than a MacBook Pro 13”.

Creative

Turn the screen around and reattach it to use Surface Book like a creative canvas. By reconnecting it to the keyboard, you unlock its full creative power in a pen first mode.

Versatile

Surface Book transforms into three different configurations, adapting to the way that you work and the places where you create.

Content rich block with four columns containing a Heading and Paragraph on a default theme

Best practices

Use content rich block to lay out text content in up to four columns on the page grid. The text content could be any combination of heading, subheading, paragraph, caption, and list. Unlike multi-column, the groups are independent so that content does not reflow across groups on page resize.

Do

  • Exercise restraint in the number of type sizes being used within a single content rich block. Too many type sizes can compromise with the hierarchy of content within a page.

Don’t

  • Use non-text elements such as buttons, images, or calls to action within content rich block. There may be other modules better suited for such scenarios.

Also known as

Content chunks
Text blocks

Related

Heading
Subheading
Paragraph
Caption
List

Development

  • Schema definition: The content-rich-block schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Content rich block with paragraphs

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.

<div data-grid="col-12" class="m-rich-content-block">
    <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit,
        augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.</p>
    <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit,
        augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.</p>
    <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.</p>
</div>

Content rich block with heading, paragraphs, and List

Heading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.

Heading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.

  • List Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div data-grid="col-12" class="m-rich-content-block">
    <h2 class="c-heading-2">Heading</h2>
    <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit,
        augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.</p>
    <h4 class="c-heading-4">Heading</h4>
    <p class="c-paragraph-2">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit,
        augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.</p>
    <ul class="c-list">
        <li>List Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li>List Item 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li>List Item 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li>List Item 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    </ul>
</div>

Content rich block with heading and subheading

Heading

Subheading

<div data-grid="col-12" class="m-rich-content-block">
    <h2 class="c-heading-2">Heading</h2>
    <p class="c-subheading-2">Subheading</p>
</div>

Content rich block with paragraphs and caption

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.

Caption text.

<div data-grid="col-12" class="m-rich-content-block">
    <p class="c-paragraph-2">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit,
        augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.</p>
    <p class="c-caption-2">Caption text.</p>
</div>

Content rich block with two columns containing a heading, a subheading, and a paragraph

Heading

Subheading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.

Heading

Subheading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.

<div data-grid="col-12 pad-6x stack-2" class="m-rich-content-block">
    <div data-grid="col-6">
        <h2 class="c-heading-2">Heading</h2>
        <p class="c-subheading-2">Subheading</p>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed
            blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.</p>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed
            blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.</p>
    </div>
    <div data-grid="col-6">
        <h2 class="c-heading-2">Heading</h2>
        <p class="c-subheading-2">Subheading</p>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed
            blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.</p>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum. Sed
            blandit, augue nec fringilla bibendum, quam elit facilisis tortor, id condimentum massa est non leo.</p>
    </div>
</div>

Content rich block with three columns containing a heading, a paragraph, and a list

Heading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet.

  • List Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet.

  • List Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet.

  • List Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List Item 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div data-grid="col-12 pad-6x stack-3" class="m-rich-content-block">
    <div data-grid="col-4">
        <h2 class="c-heading-2">Heading</h2>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet.</p>
        <ul class="c-list">
            <li>List Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>List Item 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>List Item 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>List Item 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
    </div>
    <div data-grid="col-4">
        <h2 class="c-heading-2">Heading</h2>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet.</p>
        <ul class="c-list">
            <li>List Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>List Item 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>List Item 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>List Item 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
    </div>
    <div data-grid="col-4">
        <h2 class="c-heading-2">Heading</h2>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet.</p>
        <ul class="c-list">
            <li>List Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>List Item 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>List Item 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>List Item 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
    </div>
</div>

Content rich block with four columns containing a heading and paragraph

Heading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.

Heading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.

Heading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.

Heading

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.

<div data-grid="col-12 pad-6x stack-3" class="m-rich-content-block">
    <div data-grid="col-3">
        <h2 class="c-heading-2">Heading</h2>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.</p>
    </div>
    <div data-grid="col-3">
        <h2 class="c-heading-2">Heading</h2>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.</p>
    </div>
    <div data-grid="col-3">
        <h2 class="c-heading-2">Heading</h2>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.</p>
    </div>
    <div data-grid="col-3">
        <h2 class="c-heading-2">Heading</h2>
        <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.</p>
    </div>
</div>