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 fileUsage
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>