Side By Side
Description
The Side-By-Side component is a versatile layout tool that allows for the arrangement of content in two columns. It offers flexibility in content placement and orientation, making it ideal for creating visually balanced and responsive layouts. This component is particularly useful for presenting comparative information, pairing text with images, or creating split-screen designs.
Installation
bash
sabaccui add sideBySide
Usage
Basic side-by-side layout with text and image
Preview
Right Column Header
This content appears on the right in desktop view.
Reversed orientation
Preview
Left Column Header
This content appears on the left in desktop view.
Schema
| Field | Type | Description | Default Value |
|---|---|---|---|
columnA | bloks | Content for the first column. Restricted to components with tags 47877 and 47874. | - |
columnB | bloks | Content for the second column. Restricted to components with tags 47877 and 47874. | - |
orientation | option | Determines the order of columns. Options are "A-B" (value: "a-b") or "B-A" (value: "b-a"). | "a-b" |
fullA | boolean | Whether to make the first column span to the border. | false |
Related Components
No related components specified in the provided information
Notes
- The component uses a grid layout with 12 columns for responsive design.
- On mobile devices, the columns stack vertically, with Column A appearing first.
- The orientation option affects the layout on larger screens (md breakpoint and above).
- Column B has a z-index of 10, which may be useful for overlapping designs or emphasis.
Best Practices:
- Ensure that the content in both columns is complementary and balanced.
- Use the orientation option to optimize the layout for your specific content needs.
- Consider the mobile view when designing your content, as it will stack vertically on smaller screens.
- Utilize components that are tagged with 47877 and 47874 for the column content to ensure compatibility.