Content block

Content blocks make up a large proportion of many consumer facing websites. They are one of the most powerful assets we have to create a consistent visual style to landing pages, campaigns and content. This is why we have taken the time to carefully define and develop a collection of ready to use variations of content blocks for use across Royal Canin digital projects.

Tellus Pellentesque

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

Kitten and puppy playing with ball

Container layout modifiers

The container has a selection of utility classes that modify the layout and display of the content block.

Column selection

Using these classes, columns can be added to the content block.
  • one-column Single column layout.
  • two-column Two column layout.

html
            <div class="rc-content-block">
  <div class="rc-content-block__wrapper rc-content">
      <div class="rc-layout-container XXXXXXX">
          <div class="rc-column"> For each column addtional rc-column wrapper are required.
            ...
        

Item ordering

Utility classes can be added to the layout container to manipulate the item ordering or presententation.
  • layout-container Default ordering – same as the markup.
  • layout-container two-column stacked Two column layout but stacked.
  • layout-container two-column reverse-layout Two column layout but the columns are reversed at large device sizes.
  • layout-container two-column reverse-layout-mobile Two column layout but the columns are reversed at only smaller device sizes.

html
            <div class="rc-content-block">
  <div class="rc-content-block__wrapper rc-content">
      <div class="rc-layout-container XXXXXXX">
          <div class="rc-column">
            ...
        

Content block and layout container background properties

Content block background colour

The content block naturally has a transparent background so the base colour that's usually set on the body is visible. The layout container has a white background to ensure contrast and separation from other elements.

Images

Simple background image

This method enables us to add background images but also attach meaning through markup semantics and screenreader text.

html
            <div class="rc-content-block">
  <div class="rc-content-block__wrapper rc-content XXXXXXX">
      <div class="rc-layout-container">
        <figure class="rc-bg-image" style="background-image: url( /image.jpg )">
              <figcaption class="rc-screen-reader-text">Text about image</figcaption>
         </figure>
            <div class="rc-column">
              ...
        

Parallax background image

Exactly the same as "Simple background image" but with a parallax effect applied. For more information on how to adjust the parallax effect visit the media page.

html
            <div class="rc-content-block">
  <div class="rc-content-block__wrapper rc-content XXXXXXX">
      <div class="rc-layout-container">
         <figure class="rc-bg-image rc-fixed" data-rellax-percentage="0.5" data-rellax-speed="-2" style="background-image: url("/assets/images/img-b-w.png");" data-relaxed="true">
            <figcaption class="rc-screen-reader-text">Text about image</figcaption>
         </figure>
             <div class="rc-column">
                ...
        

Text alignment

Text alignment can be set using one of the following utility classes:

  • rc-column
  • rc-column rc-text--right
  • rc-column rc-text--center

html
            <div class="rc-content-block">
  <div class="rc-content-block__wrapper rc-content">
      <div class="rc-layout-container">
             <div class="rc-column XXXXXXX">
                ...
        

Responsive image background

This method leverages the picture element to serve up the most suitable image file for the current viewport. To aid balance and spacing, the utility class bg-placeholder-16-9 can be added to an empty rc-column to simulate having a 16:9 image.

html
            <div class="rc-content-block">
  <div class="rc-content-block__wrapper rc-content XXXXXXX">
      <div class="rc-layout-container">
        <div class="rc-bg-responsive-image__wrapper">
                <picture class="rc-bg-responsive-image" role="presentation">
                  <source srcset="/assets/images/responsive-backgrounds/Dachshund-2000px.jpg" media="(min-width: 1500px)">
                  <source srcset="/assets/images/responsive-backgrounds/Dachshund-1500px.jpg" media="(min-width: 600px)">
                  <img src="/assets/images/responsive-backgrounds/Dachshund-500px.jpg" alt="Kitten and puppy playing with ball">
                </picture>
              </div>
            <div class="rc-column rc-bg-placeholder-16-9">
              ...
        

Content block group

Tellus Pellentesque

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

Kitten and puppy playing with ball
html
            <div class="rc-content-block" id="content-block--demo-one">
  <div class="rc-content-block__wrapper">
    <div class="rc-layout-container rc-two-column">
      <div class="rc-column">
        <div>
          <h1 class="rc-alpha">Tellus Pellentesque</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>
          <button class="rc-btn rc-btn--one">Read more</button>
        </div>
      </div>
      <div class="rc-column">
        <picture>
          <source srcset="/assets/images/img-b-w.png" media="(min-width: 600px)">
          <source srcset="/assets/images/img-b-w.png" media="(min-width: 800px)"> <img src="/assets/images/img-b-w.png" alt="Kitten and puppy playing with ball">
        </picture>
      </div>
    </div>
  </div>
</div>
        

Tellus Pellentesque

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

Kitten and puppy playing with ball

Tellus pellentesque

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

html
            <div class="rc-content-block" id="content-block--demo-two">
  <div class="rc-content-block__wrapper">
    <div class="rc-layout-container rc-two-column">
      <div class="rc-column">
        <div>
          <h1 class="rc-alpha">Tellus Pellentesque</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>
          <button class="rc-btn rc-btn--one">Read more</button>
        </div>
      </div>
      <div class="rc-column">
        <picture>
          <source srcset="/assets/images/img-b-w.png" media="(min-width: 600px)">
          <source srcset="/assets/images/img-b-w.png" media="(min-width: 800px)"> <img src="/assets/images/img-b-w.png" alt="Kitten and puppy playing with ball">
        </picture>
      </div>
    </div>
  </div>
</div>
<div class="rc-content-block" id="content-block--demo-three">
  <div class="rc-content-block__wrapper">
    <div class="rc-layout-container rc-two-column">
      <div class="rc-column"><img src="/assets/images/img-b-w.png" width="500" height="385"></div>
      <div class="rc-column">
        <div>
          <h1 class="rc-alpha">Tellus pellentesque</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p><button class="rc-btn rc-btn--one">Read more</button></div>
      </div>
    </div>
  </div>
</div>
        

Tellus Pellentesque

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

Kitten and puppy playing with ball
A Dachshund jumping

Tellus pellentesque

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

A Dachshund jumping

Tellus Pellentesque

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

Tellus pellentesque

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

html
            <div class="rc-content-block" id="content-block--demo-four">
  <div class="rc-content-block__wrapper">
    <div class="rc-layout-container rc-two-column">
      <div class="rc-column">
        <div>
          <h1 class="rc-alpha">Tellus Pellentesque</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>
          <button class="rc-btn rc-btn--one">Read more</button>
        </div>
      </div>
      <div class="rc-column">
        <picture>
          <source srcset="/assets/images/img-b-w.png" media="(min-width: 600px)">
          <source srcset="/assets/images/img-b-w.png" media="(min-width: 800px)"> <img src="/assets/images/img-b-w.png" alt="Kitten and puppy playing with ball">
        </picture>
      </div>
    </div>
  </div>
</div>
<div class="rc-content-group">
<div class="rc-content-block" id="content-block--demo-five">
  <div class="rc-content-block__wrapper">
    <div class="rc-layout-container rc-two-column">
      <div class="rc-column">
        <picture>
           <source srcset="/assets/images/responsive-backgrounds/Dachshund-2000px.jpg" media="(min-width: 1500px)">
           <source srcset="/assets/images/responsive-backgrounds/Dachshund-1500px.jpg" media="(min-width: 600px)">
           <img src="/assets/images/responsive-backgrounds/Dachshund-500px.jpg" alt="A Dachshund jumping">
        </picture>
      </div>
      <div class="rc-column">
        <div>
          <h1 class="rc-alpha">Tellus pellentesque</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p><button class="rc-btn rc-btn--one">Read more</button></div>
      </div>
    </div>
  </div>
</div>
<div class="rc-content-block" id="content-block--demo-six">
  <div class="rc-content-block__wrapper">
    <div class="rc-layout-container rc-two-column">
      <div class="rc-column">
        <picture>
           <source srcset="/assets/images/responsive-backgrounds/Dachshund-2000px.jpg" media="(min-width: 1500px)">
           <source srcset="/assets/images/responsive-backgrounds/Dachshund-1500px.jpg" media="(min-width: 600px)">
           <img src="/assets/images/responsive-backgrounds/Dachshund-500px.jpg" alt="A Dachshund jumping">
        </picture>
      </div>
      <div class="rc-column">
        <div>
          <h1 class="rc-alpha">Tellus Pellentesque</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>
          <button class="rc-btn rc-btn--one">Read more</button>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="rc-content-block" id="content-block--demo-seven">
  <div class="rc-content-block__wrapper">
    <div class="rc-layout-container rc-two-column">
      <div class="rc-column"><img src="/assets/images/img-b-w.png" width="500" height="385"></div>
      <div class="rc-column">
        <div>
          <h1 class="rc-alpha">Tellus pellentesque</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p><button class="rc-btn rc-btn--one">Read more</button></div>
      </div>
    </div>
  </div>
</div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 10th April 2018 [ui_assets/components/content-block.yml]
    Combined content block and content block grouping pages
  • 10th April 2018 [ui_assets/components/content-block.yml]
    Copy and markup udpates and added new html boilerplate
  • 9th April 2018 [ui_assets/components/content-block.yml]
    Renamed text-centered to text-center as was duplicate class
  • 27th March 2018 [ui_assets/components/content-block.yml]
    Added reverse layout for mobile to portal.
  • 24th March 2018 [ui_assets/components/content-block.yml]
    Improved responsive background image in the content block generator.
  • 23rd March 2018 [ui_assets/components/content-block.yml]
    Removed fixed from image label on content block generator.
  • 23rd March 2018 [ui_assets/components/content-block.yml]
    Added text alignment to portal.
  • 23rd March 2018 [ui_assets/components/content-block.yml]
    Update reference for assets.
  • 23rd March 2018 [ui_assets/components/content-block.yml]
    Remove redundant settings and add mobile reverse order.
  • 23rd March 2018 [ui_assets/components/content-block.yml]
    Remove attributes not relevant to the portal.
  • 23rd March 2018 [ui_assets/components/content-block.yml]
    Removed redundant information.
  • 23rd March 2018 [ui_assets/components/content-block.yml]
    Move end tag to be able to parse yaml.
  • 23rd March 2018 [ui_assets/components/content-block.yml]
    Updated column names to something sensible. Updated js for new labels.
  • 23rd March 2018 [ui_assets/components/content-block.yml]
    Removed one two layout options from content block. Added new picture element background image example.
  • 8th March 2018 [ui_assets/components/content-block.yml]
    Made nav link capitalisation consistent
  • 8th March 2018 [ui_assets/components/content-block.yml]
    Re-ordered nav items
  • 27th February 2018 [ui_assets/components/content-block.yml]
    Replaced icon classes
  • 27th February 2018 [ui_assets/components/content-block.yml]
    Switched data-tooltip-direction to data-tooltip-placement as that's matches the core library.
  • 19th February 2018 [ui_assets/components/content-block.yml]
    Convert all multi line text to use
  • 4th February 2018 [ui_assets/components/content-block.yml]
    Updated select label markup
  • 1st February 2018 [ui_assets/components/content-block.yml]
    Updated icon classes
  • 29th January 2018 [ui_assets/components/content-block.yml]
    Update button classnames
  • 24th January 2018 [ui_assets/components/content-block.yml]
    Fixed buildAssets gulp task fail and added warning message.
  • 19th December 2017 [ui_assets/components/content-block.yml]
    Added boxer puppy responsive images and updated the markup.
  • 19th December 2017 [ui_assets/components/content-block.yml]
    Added modifier classes to documentation.
  • 19th December 2017 [ui_assets/components/content-block.yml]
    Added stacked layout to content block builder.
  • 19th December 2017 [ui_assets/components/content-block.yml]
    Remove title case.
  • 19th December 2017 [ui_assets/components/content-block.yml]
    Added template for builder page. Added configuration for content block builder page. Added new media types. Added import for cdn html beautify.
  • 14th December 2017 [ui_assets/components/content-block.yml]
    Added media element page. Added paragraph filter to section intro text. Added alt tag to image examples. Added initial content block example.