Chakra-UI

I♥️Components

Container

|

Chakra Docs

|

⦾ The Container component is used to constrain the width of content based on the current breakpoint while maintaining fluidity. It offers several features and options to enhance your design and development workflow.

By incorporating the Container component, you can easily control the width of your content while maintaining a consistent design system. The flexibility provided by the Container component allows for responsive designs across different breakpoints.

The Container component can be imported as follows:

Examples

Basic Usage

⦾ This example demonstrates how to use the Container component to wrap your content and apply the width constraints.
<Container w="300px">
In a world where silver whispers dance, there exists a chinchilla named Chihiro. With a coat adorned in glistening hues, Chihiro brings a touch of enchantment to every moment. Graceful and serene, this furry companion captures hearts with its luminous eyes and delicate charm. In the twilight hours, Chihiro's playful spirit awakens, filling the air with joyful leaps and twinkling mischief. A radiant presence that illuminates our lives, Chihiro invites us to embrace the magic found within the company of a silver chinchilla.

Code

Customizing Container Size

⦾ The Container component provides flexibility in setting the maximum width of the content. By default, it sets the maxWidth to 60 characters (60ch), but you can customize this by passing custom maxWidth values or using size tokens defined in the theme's sizes.container.

In this example, we demonstrate different maxWidth values for the Container component. The first Container has a maxW of "md," the second has a maxW of "550px," and the third uses the container.sm size token. Feel free to adjust these values based on your specific design requirements.

maxW="md"
maxW="550px"
maxW="20ch"

Code

Container Content Centering

⦾ When the width of the content within the Container may is smaller than the container itself, you can utilize the centerContent prop to center the child components. The Container component will render a flexbox with flexDirection set to "column" and alignItems set to "center".

In this code snippet, we have a Container component with maxW set to "xl" and the centerContent prop applied. Inside the Container, there's a Box component that contains the actual content. The padding and maxW properties are set to control the appearance of the content. The result is a centered content block within the container.

Once upon a time, in a tranquil pond nestled amidst a lush green forest, there lived a little frog named George. George was a curious and adventurous frog, always eager to explore beyond the confines of his watery home. With each hop, he embarked on daring escapades, hopping from lily pad to lily pad, and occasionally venturing onto the moss-covered rocks at the pond's edge. George's vibrant emerald skin shimmered under the golden sunlight, captivating the eyes of those who crossed his path. One day, as George leaped through the air, a gentle breeze carried him to a distant meadow. Surrounded by colorful wildflowers and swaying grass, George marveled at the vastness of the world outside his pond. With newfound excitement in his heart, George vowed to continue his extraordinary journeys, eager to discover the wonders that awaited him beyond the confines of his watery abode. And so, the adventurous frog, George, leaped forward, his next adventure calling him to explore the unknown.

Code

Did you know?

Creative Idea No. 1

Hero Section: This example creates an attention-grabbing hero section with a fixed position and full-screen coverage. The Container component acts as the central container, providing structure and responsiveness to the content within the hero section. It allows you to customize the maximum width of the content and ensures consistent and visually appealing layouts across different devices. With the HeroSection component, you can easily create captivating hero sections that make a lasting impression on your users.

Code

Creative Idea No. 2

Responsive Pricing Table: Pricing tables are often an essential component of websites offering various plans or subscription options. With the Container component, you can build a responsive pricing table that adjusts its width based on different screen sizes, all the while maintaining an attractive layout.

Basic Plan

Perfect for starters

$9.99/mo

Pro Plan

Ideal for professionals

$19.99/mo

Premium Plan

For advanced users

$29.99/mo

Code

Creative Idea No. 3

Blog Post Layout: In this example, we've utilized the Container component to create a blog post layout. The Box component inside the Container represents a single blog post. It includes a heading, a brief excerpt or description of the blog post, and a "Read More" button for users to access the full article. The Container component keeps the blog post content within a fixed width, ensuring that the content is easy to read and visually appealing.

The Secrets of Time Travel Revealed

Have you ever wondered what it would be like to travel through time? In this blog post, we'll uncover the mysteries behind time travel and explore its implications for the future. Buckle up, as we delve into the science, theories, and mind-bending paradoxes that accompany this fascinating concept.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.