Text Component

Synopsis: The text component is used to create paragraphs of text within the page. It has many different styling options to creation a near unlimited combination of treatments. Below you will find an example of the text treatments that can be applied. The text component is an editor that also includes copy/paste, undo, styling, spellchecking and html editing functions.

Content Fields: The text compenent is basically an open field for content 

Options: The text component has many styling options similar to any WYSIWIG editor, including:

• Format (bold, italic, underline)
• Justify (left, right, center)
• Lists (bullets, numbers)
• Hyperlink
• Anchor tag
• Styles (font, size, color and additional custiom style options that are detailed below)
• Subscript/superscript
• Special characters (trademark, copyright, etc)

Usage: All pages

Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.

Styling for Bullets & Numbers in RTE

• Click on Parsys add Text Component to the page.

• After adding component select the given text, click on list dropdown and select the styles (Bullets/Numbers) in RTE like below.

• Select custom style from Styles dropdown as we want to provide.

• Now click on source edit button to enter into source mode.

• Copy and paste the span classes in <ol> tag as shown in the below screenshot.

Base Styling Options

Typography and Sizes

NOTE: No color has been selected in the below examples, so the default #333333 color is applied, which is not the same the Primary Black. See the color section below for more on font colors.

Font Weights

In order to meet the required brand guidelines, the font-family from the Style System dropdown should be used to create light or bold text rather than using a bold or strong treatment button.

NOTE: No color has been selected in the below examples, so the default #333 color is applied, which is not the same the Primary Black. See the color section below for more on font colors.

Colors

The Fiserv color palette examples below are in Univers Light font family.

NOTE: Notice that the default font color with no style applied is #333, a dark but not entirely black color. The Primary Black color is the true branded black color and should be selected.

Scenario 1

Text Component within Columns

Ingredients: Container, Column Control, Text Components

The below demonstrates the use of the Text component within a two column container to meet design standards for this particular paragraph.

Scenario 2

Text Component Left-Aligned in a Contained Container

Ingredients: Container, Text Components

The below example is use of the Text component in the middle of a page, within a container. The eyebrow is being displayed from the Container component.

Advanced Styles

Image Float Left/Right with Margins

Ingredients:  Container,  Text Component

The below demonstrates the use of the Text component within a Container - Image Float Left with Margin Right, Left, Top & Bottom. This is used on our Executive Leadership page and can be used anywhere to wrap text around an image.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

There are many variations of passages of Lorem Ipsum available, but the majority  suffered alteration in some for by injected hu randomised words which don't l even slightly believable. If you are going to use passage of Lorem Ipsum, yo need to be sure there  anything embarrassing hidden  the middle of text. All  Lorem Ipsum generators on the Internet tend  predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.