Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Scripts
  • Templates
  • Access control banner
  • Activity
  • Archived content
  • Breadcrumbs
  • Cards
  • Collapsible containers
  • Columns
  • Content slider (carousel)
  • Crosslinks (You may also like)
  • Disclosure button
  • Evangelists
  • Fifty-fifty
  • Footer
  • Group list
  • Header
  • Hero
  • Image component
  • Members
  • Navigation
  • Navigation with new logo v1
  • Navigation with new logo v2
  • Notes
  • Pagination
  • Pre-footer
  • Quote component
  • RSS
  • Table of contents
  • Tag list
  • Text component
  • Translations
  • Video component

Fifty-fifty

Available on the landing page and business ecosystem page templates.

Open this Fifty-fifty component in a new tab

HTML:

<section class="component component--fifty-fifty">
	<div class="illustration">
		<div class="l-frame">
			<img src="/dist/assets/svg/illustration-join.svg" alt role="presentation" />
		</div>
	</div>
	<div class="component--fifty-fifty__text">
		<h2 class="txt-earth">The Open Web Platform is Transforming Payments</h2>
		<p>To help ensure that the Web evolves to meet new industry needs, we're convening banks, processors, regulators, card networks, e-commerce companies, telecom operators, multiple service vendors, browser and software vendors and others who are shaping the way Web Payments are developed.</p>
		<div class="l-box l-box--no-border l-box--no-padding">
			<a class="button button--alt" href="path/to/page">An optional link</a>
			<a href="path/to/page">Another optional link</a>
		</div>
	</div>
</section>

¶Considerations

Note the use of the frame layout and the box layout.

An option is available within the CMS to swap the order of the picture and text region. This adds the class .reversed to the <section>:

Open this Reversed fifty-fifty component in a new tab

HTML:

<section class="component component--fifty-fifty reversed">
	<div class="image">
		<div class="l-frame">
			<img src="/dist/assets/images/temp-developers-920.jpg"
			     srcset="/dist/assets/images/temp-developers-360.jpg 360w, /dist/assets/images/temp-developers-580.jpg 580w, /dist/assets/images/temp-developers-920.jpg 920w, /dist/assets/images/temp-developers-700.jpg 700w, /dist/assets/images/temp-developers-1520.jpg 1520w"
			     sizes="(min-width: 48em) 50vw, 100vw"
			     loading="lazy"
			     alt="A Macbook screen with code, as seen from over the developer's shoulder" />
		</div>
	</div>
        <div class="component--fifty-fifty__text">
		<h2 class="txt-earth">The Open Web Platform is Transforming Payments</h2>
		<p>To help ensure that the Web evolves to meet new industry needs, we're convening banks, processors, regulators, card networks, e-commerce companies, telecom operators, multiple service vendors, browser and software vendors and others who are shaping the way Web Payments are developed.</p>
		<div class="l-box l-box--no-border l-box--no-padding">
			<a class="button button--alt" href="path/to/page">Here's an optional link</a>
			<a href="path/to/page">A unique and descriptive link</a>
		</div>
	</div>
</section>

Copyright © 2025 W3C - generated 10 Jan 2025, 12:43:28 UTC

Feedback is welcome and can be submitted as a GitHub issue.