Simple Text
Description
The Simple Text component is a flexible and customizable text block that allows for the display of a header, subheader, body text, and buttons. It offers various styling options including alignment, theme, layout, and text size, making it suitable for a wide range of content presentation needs.
Installation
sabaccui add simpleText
Usage
Here are examples of how to use the Simple Text component with different configurations:
Basic usage with header and body text
Preview
Welcome to Our Website
This is a sample text to demonstrate the Simple Text component. It supports markdown formatting.
Full configuration with subheader and buttons
Preview
Professional Solutions
Discover Our Services
We offer a wide range of services to meet your needs. Contact us to learn more about how we can help you achieve your goals.
Full configuration in side-by-side layout
Preview
Professional Solutions
Discover Our Services
We offer a wide range of services to meet your needs. Contact us to learn more about how we can help you achieve your goals.
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
header | text | The main title of the text block | - |
subheader | text | A smaller header displayed above the main header | - |
bodytext | markdown | The main content of the text block, supports markdown formatting | - |
buttons | bloks | An array of button components to be displayed below the body text | - |
align | option | Text alignment option: left, center, or right | left |
theme | option | Color theme: light or dark | dark |
layout | option | Layout option: side for side-by-side layout | - |
textSize | option | Size of the body text: sm, lg, xl, or 2xl | - |
Related Components
Notes
- The component uses computed properties to dynamically generate CSS classes based on the selected options.
- The
layoutoption "Side-by-Side" (side) affects the overall structure of the component, placing content in a two-column layout on larger screens. - The
themeoption affects text color and potentially other styling elements to ensure readability on different backgrounds. - The
textSizeoption allows for fine-tuning of the body text size, which can be useful for creating visual hierarchy or emphasis.
Best Practices:
- Use consistent themes and text sizes across your site for a cohesive look.
- Consider the context and surrounding elements when choosing alignment and layout options.
- Utilize the markdown support in the
bodytextfield for rich text formatting when needed. - Be mindful of the number of buttons added to avoid overwhelming the user with too many options.