Container

The <Container> component is designed to limit the width of its content, ensuring an optimal reading experience. By constraining the content width, it helps maintain readability and prevents text from becoming difficult to follow on wide screens.

Usage

The <Container> component is ideal for situations where you need to limit the width of content to ensure better readability and layout consistency. Here are some common use cases where the <Container> component is particularly useful:

• Text-centric pages: Pages that contain mostly text, such as FAQ pages, user guides, or terms of service, benefit from the <Container> component, as it ensures the text is easy to follow and comfortable to read.
• Hero sections: Use the <Container> for hero banners with headlines and call-to-action buttons. Limiting the width keeps the focus on the main message, avoiding the visual dispersion that comes with overly wide text blocks.
• Centering content: The <Container> is also useful when you need to center content on the page while ensuring it doesn't stretch too far, providing a consistent and polished appearance.

To limit text length, use the <Text> and <Headline> components inside the <Container>. This will automatically adjust the content length to make it easier to read.

Dynamic width

The width of the <Container> is not fixed. It adjusts based on the font size to ensure the optimal reading length, which is determined by the number of characters per line. This results in the <Container> varying in size depending on its content.

Content length

The length of the content within the <Container> can be adjusted using the contentLength property. This is useful when you want to customize the reading experience based on the type of content.

For example, you might want to shorten the line length for smaller text blocks like quotes or testimonials, while allowing more characters per line for larger bodies of text, such as articles or blog posts. Adjusting contentLength helps to maintain readability and improve the overall user experience depending on the context.

Complex layout

The <Container> component can be combined with other layout components, such as <Column>, to create more complex and cohesive designs. This approach allows you to build immersive layouts while ensuring that text blocks remain readable.

Alignment

Using the align and alignItems prop, the <Container> component lets you align text and other elements to the left, center, or right, giving you flexibility in arranging content. This is helpful when you need to make some parts of the layout stand out, like centering a hero section. Good alignment makes the page look organized and improves how users experience the site.

Preview

Code

Taking care of Marigolds

Caring for marigold flowers is straightforward, making them a popular choice for many gardeners. Marigolds thrive best in full sunlight, so make sure to plant them in a spot that receives at least six hours of direct sunlight every day. They grow well in a variety of soils but prefer well-drained, moderately fertile soil. Be sure to space them adequately, as proper air circulation helps prevent disease.

Watering marigolds requires balance. They do best when their soil is kept slightly moist but not overly wet. Water the plants deeply when the top inch of soil feels dry, but avoid watering directly onto the flowers and leaves to prevent mold and mildew. Mulching around the base can help retain moisture and minimize weeds.

Deadheading, or removing spent flowers, will encourage marigolds to bloom more vigorously. This not only keeps the plants looking tidy but also redirects energy into producing new blooms. With proper sunlight, watering, and a bit of pruning, marigold flowers can bring vibrant color to your garden all season long.

Props

"left" | "center" | "right";

"left"

"left" | "center" | "right" | "none";

"none"

string;

string;

string;

string;

"off" | "polite" | "assertive";

ReactNode;

"short" | "default" | "long";

"default"

string;

"region" | (string & {});

GapSpaceProp;

0

Related