The Floating Text component is designed to overlay text content on top of other elements, creating a prominent and engaging display. Authors can customize various aspects of this component, including the alignment of the box (left, center, right), text alignment, the width of the text box, and the margins above and below the box. These adjustments allow for flexible positioning and styling to fit seamlessly into any webpage layout, ensuring the text stands out effectively against the background content.
This is a Heading
Lorem ipsum odor amet, consectetuer adipiscing elit. Fringilla id primis ridiculus ante tortor mollis. Aptent montes etiam maximus dapibus sit mi nostra. Platea eget class iaculis sociosqu in maecenas sodales. Quis arcu varius facilisis accumsan vulputate libero tortor netus? Diam fames sem orci varius vel est ornare enim. Maecenas scelerisque placerat nostra eleifend maecenas hac non mattis.
Layout and Styling Options
Align Text Box
Left
Center
Right
Text Box Width
Narrow
Lorem ipsum odor amet, consectetuer adipiscing elit. Fringilla id primis ridiculus ante tortor mollis. Aptent montes etiam maximus dapibus sit mi nostra.
Wide
Lorem ipsum odor amet, consectetuer adipiscing elit. Fringilla id primis ridiculus ante tortor mollis. Aptent montes etiam maximus dapibus sit mi nostra.
Bottom Margin
None
X-Small
Small
Medium
Large
X-Large
the end
Top Margin
None
X-Small
Small
Medium
Large
X-Large
the end
Usage
Do
- Ensure the text box is aligned appropriately to complement the surrounding content.
- Check the text alignment within the box for readability and visual appeal.
- Adjust the box width to avoid overcrowding the text or leaving too much empty space.
- Preview the component on different devices to ensure responsive design.
- Maintain a consistent style with the rest of your webpage for a cohesive look.
Don't
- Avoid using the Floating Text component for large blocks of text.
- Refrain from placing the text box in areas that obscure important content or images.
- Don’t use overly bright or clashing colors that make the text hard to read.
- Avoid using low contrast between text and background colors.
- Refrain from using the component excessively on a single page, which can overwhelm the viewer.