50/50 Demo
Overview
The 50/50 component creates a balanced section layout with text on one side and an image on the other. It’s ideal for presenting content in a visually engaging way while maintaining readability. Multiple 50/50 components can be stacked to showcase different pieces of information in a consistent format.
Tutorial
Learn how to create and edit the 50/50 component.
This showcases the 50/50 component with the different layout options.
Image Right / Text Left Layout
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
Image Left / Text Right Layout
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
Color Showcase
This showcases the Spring Snow White background color with the various content color options.
Spring Snow White Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
City Heigh Sandstone Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
90% Black Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
CU Black Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
This showcases the 90% black background color with the various content color options.
90% CU Black Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
City Heigh Sandstone Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
CU Black Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
Spring Snow White Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
This showcases the black background color with the various content color options.
CU Black Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
City Heigh Sandstone Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
Spring Snow White Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
90% Black Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
This showcases the City Height Sandstone background color with the various content color options.
City Height Sandstone Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
Spring Snow White Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
CU Black Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.
90% Black Content Color
Sed in ligula hendrerit, venenatis nisl eu, condimentum erat. Duis vulputate suscipit purus, sed tempor velit fringilla non. Donec ornare lectus ipsum, vitae tristique erat hendrerit ac. Donec vel tincidunt justo.