Evangelists

Found on the business ecosystem template.

Open this Evangelists component in a new tab

HTML:

<div class="component component--evangelists">
	<div class="component--evangelists__text">
		<h2 class="txt-earth">Need more information tailored to your organisation?</h2>
		<p>Our Evangelists understand that every organisation is different! They represent W3C in various locations and are an extension of W3C's Business Development Team. They are responsible for identifying and recruiting new W3C Members, running local events, promoting W3C Training and fostering Sponsorship.</p>
	</div>
	<div class="component--evangelists__list">
		<h3 class="txt-saturn">Our Web Payments Evangelists</h3>
		<ul class="clean-list" role="list">
			<li class="l-box l-box--no-border">
				<div class="l-sidebar">
					<div>
						<div class="sidebar">
							<div class="avatar">
								<img alt src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" loading="lazy">
							</div>
						</div>
						<div class="not-sidebar">
							<p class="txt-saturn bold">Joseph Lorem-Ipsum</p>
							<p>W3C editor</p>
							<p>Tel: <a href="tel:+1(555)5309">+1 (555) 5309</a></p>
							<p>Email: <a href="mailto:name@w3c.org">name@w3c.org</a></p>
						</div>
					</div>
				</div>
			</li>
			<li class="l-box l-box--no-border">
				<div class="l-sidebar">
					<div>
						<div class="sidebar">
							<div class="avatar">
								<img alt src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" loading="lazy">
							</div>
						</div>
						<div class="not-sidebar">
							<p class="txt-saturn bold">Joseph Lorem-Ipsum</p>
							<p>W3C editor</p>
							<p>Tel: <a href="tel:+49.157.0156">+49 157 0156</a></p>
							<p>Email: <a href="mailto:name@w3c.org">name@w3c.org</a></p>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>

¶Considerations

Note the use of the sidebar layout and the <div class="avatar"> wrapper around the image for avatars.