Richtext
Overview:
The Rich Text section is designed to display structured content with taglines, headings, descriptions, and call-to-action buttons in a clean content-focused layout. It supports multiple content blocks, typography customization, button styling, text alignment, color schemes, and responsive spacing controls. This section is ideal for brand storytelling, promotional content, announcements, store introductions, or informational sections.
Blocks Configuration
Tagline Block
The Tagline block displays a short label or introductory text above the main heading.
Content:
| Setting |
Description |
| Tagline Text |
Defines the tagline displayed inside the section, such as New Arrival, Limited Edition, or About Us. |
Typography:
| Setting |
Description |
| Text Size |
Controls tagline size such as Large, Medium, or Small. |
| Text Weight |
Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Text Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Font Family |
Allows switching between Default and Heading font family styles. |
Styling:
| Setting |
Description |
| Background Color |
Controls the background color displayed behind the tagline. |
| Text Color |
Controls the tagline text color. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the tagline block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the tagline block on mobile devices. |
Heading Block
The Heading block displays the main heading inside the Rich Text section.
Content:
| Setting |
Description |
| Heading |
Defines the main heading displayed inside the section. Supports rich text formatting such as bold and italic styling. |
Typography:
| Setting |
Description |
| Heading Size |
Controls heading size such as H1–H6, Large, Medium, or Small. |
| Heading Weight |
Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Heading Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Heading Tag |
Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Heading Font Family |
Allows switching between Default and Body font family styles. |
| Heading Color Style |
Applies predefined color styling to headings. |
| Heading Link Style |
Controls styling behavior of links used inside heading content. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the heading block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the heading block on mobile devices. |
Description Block
The Description block displays supporting content below the heading.
Content:
| Setting |
Description |
| Description Text |
Displays rich text content such as brand messaging, product details, announcements, or promotional text. |
Typography:
| Setting |
Description |
| Text Size |
Controls description text size such as Large, Medium, or Small. |
| Text Weight |
Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Text Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Font Family |
Allows switching between Default and Heading font family styles. |
| Text Color Style |
Applies predefined color styling to description text. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the description block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the description block on mobile devices. |
The Button block displays a call-to-action button inside the Rich Text section.
| Setting |
Description |
| Button Label |
Defines the text displayed on the button such as Shop Now, Learn More, or Explore. |
| Button Link |
Adds a destination URL for the button. |
| Button Style |
Controls button appearance such as Primary or Secondary style. |
| Button Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Open in New Tab |
Opens the button link in a new browser tab when enabled. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the button block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the button block on mobile devices. |
Section Configuration
Layout:
| Setting |
Description |
| Container Layout |
Determines whether the section uses Contained, Contained Content, or Full Width layout. |
| Container Width |
Controls the maximum width of the section container on desktop devices. |
| Text Alignment (Desktop) |
Sets text alignment on desktop devices (Left, Center, or Right). |
| Text Alignment (Mobile) |
Sets text alignment on mobile devices (Left, Center, or Right). |
Color Scheme:
| Setting |
Description |
| Section Color Scheme |
Applies a predefined color palette to the Rich Text section background and content. |