Text
Perfect for headings and titles.
The Text Component is an ideal choice for a wide range of text elements, from headings and taglines to smaller text areas. It provides flexibility for styling text to suit various design needs, making it perfect for creating visually impactful headings, standout taglines, and highlighted phrases.
With the Text Component, you can easily create bold, eye-catching headings enhanced by background images, gradients, or color overlays, adding depth and style to your design. The component’s versatility means it works seamlessly in both minimal and complex layouts, allowing you to design text elements that grab attention without overpowering your overall look.
Whether you’re looking to create subtle text accents or prominent, styled headers, the Text Component has you covered.
Gettings Started with Text Compotnent
The following video will teach you the basics on using the Text Component.
How to Make Your Text Responsive
The following video will show you how to make your text resposive.
Applying Tailwind CSS Classes to Text
This is an advaced feature that allows you to apply Tailwind CSS Classes to any of your text in the Text Component.
Example Tailwind Classes for Text
Below we have included a few sample classes that were featured int he video. To learn more you can browse the Tailwind CSS Docs.
General
Under the General settings in the inspector you'll find options to style the entire block of text.
Tag
The Tag helps create a semantic structure so search engines understand the hierarchy and relationship of your content. For example, the main heading on the page choose would be "Heading 1", your body text would be set "Paragraph".
Text Align
Align your text, left, center and right. You may need to also set the aligment of the parent item to get the desired alignment.
Font
Choose a font family, these are managed by the Theme Studio.
Size:
Choose a text size, these are managed by the Theme Studio.
Text styles include size, line height, letter spacing, and weight. You can override some of these settings inline by choosing the "Override" option.
Weight:
Set the weight of your text.
Spacing:
Set the spacing of the text.
Line Hight:
Set the line height of the text.
Italic:
Make the text italic.
Text Shadow:
Choose a shadow for yoru text, these are managed by the Theme Studio.
Case:
Choose a shadow for yoru text, these are managed by the Theme Studio.
Transform:
Choose from None, Uppercase, Lowercase, and Capitalise.
Underline:
Choose from None, Underline, Overline, and Line Through.
Color
Choose between colour, background image, and gradient for your text. Each different type of style has a set of sub options.
Color: Choose a solid colour from the theme studio, also supports opacity.
Image: Choose an image, along with positioning, sizing, and repeat.
Gradient: Supports up to 3 colours, set position and oapcity of each colour independently.
Links
Default and HOver
Last updated
