Text block

Use to educate readers on a certain subject such as brand story, product information and USPs.

Description

Modifiers for large, medium, small and xsmall variants are responsible for combining different typographic elements depending on the type of message to be conveyed.

The large and medium variants incorporate section headings, while the small and xsmall variants make use of paragraph headings. More details about headings can be found in the typography section (see: rules/typography/headings).

In the context of the --large variant, the heading is followed by an accent bar which is meant to draw users attention. Two variants of the accent bar exists dependent of the font used (these variants are: --brand and --primary).

When used on dark backgrounds, an utility class needs to be added which will change the text block color to white (see: developer/utility classes/modifiers).

Heading Accent bar Lead paragraph Paragraph
text-block--large required required required optional
text-block--medium optional N/A optional optional
text-block--small optional N/A N/A required
text-block--xsmall optional N/A N/A required

Modifiers |

text-block--center: use when you need a center aligned text block

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-text-block;

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

Large text block

Lorem ipsum dolor sit amet consectetur adipiscing elit

Suspendisse magna orci, hendrerit vel gravida quis, mollis a diam. Vestibulum auctor, sem non accumsan molestie, urna ligula pharetra ex, eget blandit lacus libero et quam.

Proin dui risus, ultrices id porttitor at, rutrum pharetra lectus. Vivamus commodo vulputate efficitur. Fusce orci ante, consectetur in consequat eget, convallis ac sem. Nullam vehicula augue vitae quam pharetra ultricies. Mauris ultrices nisi ipsum, aliquam suscipit velit aliquam in. Praesent auctor, augue at porttitor bibendum, neque nisi ornare odio, et egestas ex nisi vel risus.

Centred large text block

Lorem ipsum dolor sit amet consectetur adipiscing elit

Suspendisse magna orci, hendrerit vel gravida quis, mollis a diam. Vestibulum auctor, sem non accumsan molestie, urna ligula pharetra ex, eget blandit lacus libero et quam.

Proin dui risus, ultrices id porttitor at, rutrum pharetra lectus. Vivamus commodo vulputate efficitur. Fusce orci ante, consectetur in consequat eget, convallis ac sem. Nullam vehicula augue vitae quam pharetra ultricies. Mauris ultrices nisi ipsum, aliquam suscipit velit aliquam in. Praesent auctor, augue at porttitor bibendum, neque nisi ornare odio, et egestas ex nisi vel risus.

Medium text block

Lorem ipsum dolor sit amet consectetur adipiscing elit

Suspendisse magna orci, hendrerit vel gravida quis, mollis a diam. Vestibulum auctor, sem non accumsan molestie.

Proin dui risus, ultrices id porttitor at, rutrum pharetra lectus. Vivamus commodo vulputate efficitur. Fusce orci ante, consectetur in consequat eget, convallis ac sem. Nullam vehicula augue vitae quam pharetra ultricies. Mauris ultrices nisi ipsum, aliquam suscipit velit aliquam in.

Small text block

Lorem ipsum dolor sit amet consectetur adipiscing elit

Proin dui risus, ultrices id porttitor at, rutrum pharetra lectus. Vivamus commodo vulputate efficitur.

Extra small text block

Lorem ipsum dolor sit amet consectetur adipiscing elit

Proin dui risus, ultrices id porttitor at, rutrum pharetra lectus. Vivamus commodo vulputate efficitur.

Inverted text block

Lorem ipsum dolor sit amet consectetur adipiscing elit

Suspendisse magna orci, hendrerit vel gravida quis, mollis a diam. Vestibulum auctor, sem non accumsan molestie, urna ligula pharetra ex, eget blandit lacus libero et quam.

Proin dui risus, ultrices id porttitor at, rutrum pharetra lectus. Vivamus commodo vulputate efficitur. Fusce orci ante, consectetur in consequat eget, convallis ac sem. Nullam vehicula augue vitae quam pharetra ultricies. Mauris ultrices nisi ipsum, aliquam suscipit velit aliquam in. Praesent auctor, augue at porttitor bibendum, neque nisi ornare odio, et egestas ex nisi vel risus.

<section class="text-block text-block[--modifier]">
  <h3 class="section-heading section-heading[--modifier]">Lorem ipsum dolor sit amet consectetur adipiscing elit</h3>
  <p class="text-block__lead-paragraph">Suspendisse magna orci, hendrerit vel gravida quis, mollis a diam. Vestibulum auctor, sem non accumsan molestie, urna ligula pharetra ex, eget blandit lacus libero et quam.</p>
  <p class="text-block__paragraph">Proin dui risus, ultrices id porttitor at, rutrum pharetra lectus. Vivamus commodo vulputate efficitur. Fusce orci ante, consectetur in consequat eget, convallis ac sem. Nullam vehicula augue vitae quam pharetra ultricies. Mauris ultrices nisi ipsum, aliquam suscipit velit aliquam in. Praesent auctor, augue at porttitor bibendum, neque nisi ornare odio, et egestas ex nisi vel risus.</p>
</section>

<section class="text-block text-block[--modifier]">
  <h3 class="paragraph-heading paragraph-heading[--modifier]">Lorem ipsum dolor sit amet consectetur adipiscing elit</h3>
  <p class="text-block__lead-paragraph">Suspendisse magna orci, hendrerit vel gravida quis, mollis a diam. Vestibulum auctor, sem non accumsan molestie, urna ligula pharetra ex, eget blandit lacus libero et quam.</p>
  <p class="text-block__paragraph">Proin dui risus, ultrices id porttitor at, rutrum pharetra lectus. Vivamus commodo vulputate efficitur. Fusce orci ante, consectetur in consequat eget, convallis ac sem. Nullam vehicula augue vitae quam pharetra ultricies. Mauris ultrices nisi ipsum, aliquam suscipit velit aliquam in. Praesent auctor, augue at porttitor bibendum, neque nisi ornare odio, et egestas ex nisi vel risus.</p>
</section>