TextPlus

TextPlus is a component that allows you to style text in ways that are unavailable in the default text element in Framer. It provides more control over the text's appearance, such as font size, letter spacing, line height, text alignment, and more.

Installation

  1. Find the component's url in the Frame+ PDF that came with the order in the email.

  2. Copy the component's url.

  3. Go to your Framer project.

  4. Select a layer you want to use the component in, e.g. Desktop.

  5. Paste the component, Ctrl/Cmd + V. Framer will automatically detect a component add it to your Assets. The component will show up in the project with the default "TextPlus: Add text here" text.

  6. (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

Text type

Type of a text that will be the subject of the "Content" control.

  • “Plain text”, for a simple, inline phrase. It should be used with short text, one-liners like a heading, a post title, or a marketing phrase.

  • “Rich text” for a formatted text. It should be used 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.

  • “Plain text”, for a simple, inline phrase. It should be used with short text, one-liners like a heading, a post title, or a marketing phrase.

  • “Rich text” for a formatted text. It should be used 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.

  • “Plain text”, for a simple, inline phrase. It should be used with short text, one-liners like a heading, a post title, or a marketing phrase.

  • “Rich text” for a formatted text. It should be used 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 e.g. from the CMS.

Content

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

Content

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

Tag

HTML tag that will hold the Content. Available if Text type is set to "Plain text".

Tag

HTML tag that will hold the Content. Available if Text type is set to "Plain text".

Tag

HTML tag that will hold the Content. Available if Text type is set to "Plain text".

Controls

Determines the level of control that the plugin’s controls should offer.


Standard uses predefined units, matching controls of the Framer editor.


Advanced provides open input controls supporting any valid CSS units and functions. It assumes you are comfortable with CSS, especially units and basic properties' characteristics - or are ready to learn them.


Both modes have the same scope, on the high level they cover the same features.

Controls

Determines the level of control that the plugin’s controls should offer.


Standard uses predefined units, matching controls of the Framer editor.


Advanced provides open input controls supporting any valid CSS units and functions. It assumes you are comfortable with CSS, especially units and basic properties' characteristics - or are ready to learn them.


Both modes have the same scope, on the high level they cover the same features.

Controls

Determines the level of control that the plugin’s controls should offer.


Standard uses predefined units, matching controls of the Framer editor.


Advanced provides open input controls supporting any valid CSS units and functions. It assumes you are comfortable with CSS, especially units and basic properties' characteristics - or are ready to learn them.


Both modes have the same scope, on the high level they cover the same features.

"Controls" control set to "Advanced" and font controls like Size, Letter, and Line with a text input.
"Controls" control set to "Advanced" and font controls like Size, Letter, and Line with a text input.
"Controls" control set to "Advanced" and font controls like Size, Letter, and Line with a text input.

Font

Text styling controls.

Font

Text styling controls.

Font

Text styling controls.

Color

Colour for the text.

Color

Colour for the text.

Color

Colour for the text.

Justify

If set to “On” adjusts letter-spacing and word-spacing to make the text fall flush with both, left and right, margins.

Justify

If set to “On” adjusts letter-spacing and word-spacing to make the text fall flush with both, left and right, margins.

Justify

If set to “On” adjusts letter-spacing and word-spacing to make the text fall flush with both, left and right, margins.

Decoration

Defines text's decorative lines

Decoration

Defines text's decorative lines

Decoration

Defines text's decorative lines

Line

Style of the decorative line to apply to the text.

Line

Style of the decorative line to apply to the text.

Line

Style of the decorative line to apply to the text.

Thickness

Size of the decorative line. Available if Line is set to Underline or Strikethrough

Thickness

Size of the decorative line. Available if Line is set to Underline or Strikethrough

Thickness

Size of the decorative line. Available if Line is set to Underline or Strikethrough

Underline

Size of the space between the text and the underline. Available if Line is set to Underline.

Underline

Size of the space between the text and the underline. Available if Line is set to Underline.

Underline

Size of the space between the text and the underline. Available if Line is set to Underline.

Transform

Defines how a text should be capitalised.

Transform

Defines how a text should be capitalised.

Transform

Defines how a text should be capitalised.

Text Overflow

If set to "Ellipsis" hides overflow and adds ellipsis (three dots, …) at the end of a text.

Text Overflow

If set to "Ellipsis" hides overflow and adds ellipsis (three dots, …) at the end of a text.

Text Overflow

If set to "Ellipsis" hides overflow and adds ellipsis (three dots, …) at the end of a text.

Lines

Number of lines after which text will be clipped and overflow hidden. Available if Overflow is set to Ellipsis.

Lines

Number of lines after which text will be clipped and overflow hidden. Available if Overflow is set to Ellipsis.

Lines

Number of lines after which text will be clipped and overflow hidden. Available if Overflow is set to Ellipsis.

Initial (Drop cap)

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

Initial (Drop cap)

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

Initial (Drop cap)

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

Get Frame Plus now

Secure yourself future updates and new components today.

Get Frame Plus now

Secure yourself future updates and new components today.

Get Frame Plus now

Secure yourself future updates and new components today.

© 2024 Belar

© 2024 Belar

© 2024 Belar