Type

Paragraph

As well as any paragraphs, <p> tags should be wrapped around any text as a default until another tag becomes more appropriate. Media queries can be used to increase the overall size of the default body copy, which is inherited by all paragraphs, but it should not be any smaller than font-size: 0.875em. Any change in font size should be expressed in em or rem units and not pixels.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

html
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        

Paragraph with inline icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Use with inline icon. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Use with inline icon. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Use with inline icon. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

html
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="rc-inline-icon"><span class="rc-icon rc-watchdog rc-iconography"></span>Use with inline icon. </span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="rc-inline-icon"><span class="rc-icon rc-nutritional rc-iconography"></span>Use with inline icon. </span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="rc-inline-icon"><span class="rc-icon rc-grooming rc-iconography"></span>Use with inline icon. </span> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        

Paragraph - enforced typeface

When working with third party plugins/extensions etc sometimes a different typeface might be applied and may not gain the properties from the casecading styles. To overcome this you can use the rc--font class to enforce the Royal Canin type style.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

html
            <p class="rc--font">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        

Paragraph with image

Images can be inserted within blocks of paragraph text and positioned so that the text floats around the image. Available classes are:

  • media--alignleft
  • media--alignright
  • media--aligncenter
These classes are intended strictly for positioning <img /> and <figure> tags around paragraph text and will not work when applied to any other element. For positioning any other element or outside the context of positioning images around paragraph text, please use the available grid and layout classes. The align[value] rules impose a maximum width on the <img /> or <figure> tag to which it is applied. This is to ensure that text is able to wrap around it.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

An awesome picture
This image is wrapped inside a figure tag with the alignleft class. This is the figcaption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

html
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure class="rc-media--alignleft">
  <img src="/assets/images/img-paragraph-with-image.jpg" alt="An awesome picture">
  <figcaption>This image is wrapped inside a figure tag with the alignleft class. This is the figcaption.</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        

Inline Anchor Link

This text contains an inline anchor link
html
            This text contains an <a class="rc-styled-link" href="#">inline anchor link</a>
        

Abbreviation

Provide a description for an abbreviated term, such as RCDL.
html
            Provide a description for an abbreviated term, such as <abbr title="Royal Canin Web Design Langugae">RCDL</abbr>.
        

Bold

Stylistically different from normal text, without conveying any special importance or relevance.
html
            <b>Stylistically different</b> from normal text, without conveying any special importance or relevance.
        

Line Break

Produces a line break
wherever it is placed.
html
            Produces a line break <br />
wherever it is placed.
        

Citation

Use as a reference to the source of some information. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite Provide a description for an abbreviated term, such as RCDL.
html
            Use as a reference to the source of some information. <cite>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite</cite>
Provide a description for an abbreviated term, such as <abbr title="Royal Canin Web Design Langugae">RCDL</abbr>.
        

Delete/Insert

Used to display edits to some a piece of text.
html
            Used to display edits to <del>some</del> <ins>a piece of</ins> text.
        

Defining Instance

The Internet is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.
html
            <dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.
        

Emphasis

Used to add stress emphasis to some text.
html
            Used to add <em>stress emphasis</em> to some text.
        

Italic

Used to represent text that is set off from the normal text. Examples include technical terms, foreign language phrases, or fictional character thoughts.
html
            Used to represent text that is <i>set off</i> from the normal text. Examples include technical terms, foreign language phrases, or fictional character thoughts.
        

Keyboard Input

To copy text on a Mac, use the cmd + c keys.
html
            To copy text on a Mac, use the <kbd>cmd</kbd> + <kbd>c</kbd> keys.
        

Highlight

Used to highlight some text.
html
            Used to <mark>highlight</mark> some text.
        

Inline Quotation

Used to represent short inline quotations where the cite attribute points to the source. For long quotations use the blockquote element.
It is not enough to have a good mind; the main thing is to use it well. - Rene Descartes
html
            Used to represent short inline quotations where the cite attribute points to the source. For long quotations use the blockquote element. <br /> <q cite="https://www.brainyquote.com/quotes/quotes/r/renedescar100799.html">It is not enough to have a good mind; the main thing is to use it well.</q> - Rene Descartes
        

Outdated

Used to represent some information that is no longer accurate.
html
            Used to represent <s>some information</s> that is no longer accurate.
        

Small

Used to represent smallprint.
html
            Used to represent <small>smallprint</small>.
        

Span

A generic inline container. Can be used for styling or to represent shared values. Should only be used when no other semantic element is apporpriate.
html
            A generic inline container. Can be used for <span class="color: red;">styling</span> or to represent shared values. Should only be used when no other semantic element is apporpriate.
        

Strong

Used to give text importance.
html
            Used to give text <strong>importance.</strong>
        

Subscript

Used to represent sub text, such as H2O.
html
            Used to represent sub text, such as H<sub>2</sub>O.
        

Superscript

Used to represent superscript text.
html
            Used to represent <sup>superscript</sup> text.
        

Time

html
            <time datetime="1989-11-18T00:00">November 18 1989</time>
        

Underline

Used to underline a piece of text.
html
            Used to <u>underline a piece of text.</u>
        

Inline icon

Use with inline icon

Use with inline icon

Use with inline icon

Use with inline icon

Use with inline icon
Use with inline icon
Use with inline icon Use with inline icon
html
            <h1 class="rc-alpha rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h1>
<h2 class="rc-beta rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h2>
<h3 class="rc-gamma rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h3>
<h4 class="rc-delta rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h4>
<h5 class="rc-espilon rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h5>
<h6 class="rc-zeta rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</h6>
<span class="rc-header-with-icon"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</span>
<span class="rc-header-with-icon rc-header-with-icon--gamma"><span class="rc-icon rc-video rc-iconography"></span>Use with inline icon</span>
        

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