Documentation - TextPlus

T+

Getting TextPlus

If you have already a copy of TextPlus to work with, thank you for purchase. If you don't, thank you for interest, you can get TextPlus by using the button below.

Get TextPlus now

How to use TextPlus?

In the e-mail with your order, find the component's url.
Copy the component's url [from the email].
Go to your Framer project.
Select a layer you want to use the component in.
Component should be added to your Assets and show up in the project with the default "TextPlus: Add text here" text
(Optional, but recommended) Go to Assets and update the component. If possible, there will be a clickable "Update" next to the component's name,

Controls: Standard

Text type

Type of a text that will be the subject of the "Content" control. Currently there are 2 types available, “Plain text” for a simple string and “Rich text” for a formatted text.

“Plain text” is the best options for short text, one-liners like a heading, a post title, or a marketing phrase.
“Rich text” shines with long text, like blog posts’ content coming from CMS’ formatted field.

Text type

Type of a text that will be the subject of the "Content" control. Currently there are 2 types available, “Plain text” for a simple string and “Rich text” for a formatted text.

“Plain text” is the best options for short text, one-liners like a heading, a post title, or a marketing phrase.
“Rich text” shines with long text, like blog posts’ content coming from CMS’ formatted field.

Content

Text that will be processed by the component. It can be a direct input or supplied through a variable.

Content

Text that will be processed by the component. It can be a direct input or supplied through a variable.

Tag

Requires: “Text type” set to “Plain text”

HTML tag that will be used as a wrapper for passed plain text.

Tag

Requires: “Text type” set to “Plain text”

HTML tag that will be used as a wrapper for passed plain text.

Controls

Switch to choose level of control that you would like to have over the properties. Standard uses predefined units, mimicking inputs of the Framer editor. Advanced gives you full control over properties' values, allowing you to use different units or even CSS functions.

Controls

Font

Text styling controls.

Font

Text styling controls.

Color

Colour to be used for the text.

Color

Colour to be used for the text.

Justify

Switch for fully justified text alignment.

“Off” - turn of justified text.
“On” - adjusts letter-spacing and word-spacing to make the text fall flush with both, left and right, margins.

Justify

Switch for fully justified text alignment.

“Off” - turn of justified text.
“On” - adjusts letter-spacing and word-spacing to make the text fall flush with both, left and right, margins.

Decoration

Allows you to define text's decorative lines, with control over thickness, and in the case of underline, also offset.

Line - Decoration line to apply. Choose from None, Underline, Strikethrough
Thickness [available for: Underline, Strikethrough] - Defines thickness of the line.
Underline offset [available for: Underline] - Defines the space between a text and an underline.

Decoration

Allows you to define text's decorative lines, with control over thickness, and in the case of underline, also offset.

Line - Decoration line to apply. Choose from None, Underline, Strikethrough
Thickness [available for: Underline, Strikethrough] - Defines thickness of the line.
Underline offset [available for: Underline] - Defines the space between a text and an underline.

Transform

Provides control over how a text should be capitalised.

Transform

Provides control over how a text should be capitalised.

Text overflow

Text overflow switch.

“Off” - turns overflow hiding off.
“Ellipsis” - hides overflow and adds ellipsis (three dots, …) at the end of a text.

Text overflow

Text overflow switch.

“Off” - turns overflow hiding off.
“Ellipsis” - hides overflow and adds ellipsis (three dots, …) at the end of a text.

Lines

Requires: “Overflow” to be set to “Ellipsis”

Number of lines after which text will be clipped and overflow hidden.

Lines

Requires: “Overflow” to be set to “Ellipsis”

Number of lines after which text will be clipped and overflow hidden.

Initial (also known as drop cap)

Number of lines that the initial letter should occupy. Applied to the first letter of the first paragraph.

Initial (also known as drop cap)

Number of lines that the initial letter should occupy. Applied to the first letter of the first paragraph.

Controls: Advanced

Advanced controls give you an extra power by opening up the inputs for various properties. However, that comes with an assumption that you are comfortable with CSS, especially units that can be used in it and basic properties' characteristics - or are ready to learn them.

Both Standard and Advanced mode have the same scope, on the high level they cover the same features, so you don't have to worry about using Standard controls. Rule of thumb, if you can't think of a reason to go Advanced, Standard should be enough.

Where to expect differences:

Font - custom controls for font allow you to use any supported values by CSS, that means units (e.g. rem, %, vw) and even CSS functions like calc or clamp.
Align - all alignment options are held by a single panel.
Decoration properties - thickness and underline offset controls for custom levels, like the advanced font controls, allow you to freely use any compatible values.