Components Text Image: Choose Your Layouts

A Powerful Combination for Effective Communication

Design Flexibility: This approach offers various layout options, allowing for the creation of balanced and visually appealing designs.
Emotion and Engagement: Images can evoke emotions and create a stronger connection with users. By using evocative visuals, you can reinforce the message of the text and encourage visitors to engage more with the content.
Enhanced Communication: Images quickly capture attention, while text provides detailed explanations. This synergy allows complex messages to be conveyed more effectively and memorably.

For certain layouts, it may be useful to enclose this component within a section tag. For example, the Products page is composed of several sections with different background colors that occupy the full width.

These Components Offer Several Variants:

The combination of an image with text can be inside a card or placed directly on the page.
Images can be alternated, positioned to the left or right of text areas.
Call-to-action buttons can be used optionally.

Components

Common Features of All Components of This Type

Header and Conclusion

The use of the header and conclusion is optional.
On mobile devices, texts are left-aligned.
From 992px (lg breakpoint), texts are centered horizontally.
Using short, single-line sentences optimizes display for this breakpoint.

Vertical Centering of Areas with Flexbox

Depending on the content, displaying in two columns can lead to a height difference between the text area and the image area. To optimize display, the shorter area is vertically centered relative to the other.

Simplified Use

This type of component only uses standard Bootstrap classes.
No custom code, CSS, or JavaScript is needed.
Each combination of an image with text can be duplicated multiple times.

Components on One or Two Columns

For small screens, the image area is always positioned at the top.
On large screens, text and image areas are vertically centered.