Team member

A component used to represent someone part of a team. This component is supported with an image, title, text and a link to redirect the user to a profile.

This component can be used within a grid created with l-grid. If the component should be stretched so every item in the grid is the same height, then the class l-grid--stretch should be used. The component is designed to make sure that the content of the card is always placed on top and the link on the bottom. Within a grid system every link will be place horizontally on the same lin.

Default

px 

			
				<div class="m-team-member ">
	<div class="m-team-member__content">
		<div class="m-team-member__image-container">
			<img class="m-team-member__image" src="/assets/images/team/placeholder.jpg" alt="Isabel Van Hoedenaghe" title="Isabel Van Hoedenaghe" />
		</div>
		<p class="m-team-member__name">
			Isabel Van Hoedenaghe
		</p>
		<p class="m-team-member__text">
			L&amp;D Consultant L and D EN
		</p>
	</div>
	<a class="a-link a-link--decorated m-team-member__link " href="#">
		<span class="a-link__text">Bekijk dit profiel</span>
	</a>
</div>

Within grid

px 

			
				<div class="l-grid l-grid--with-spacing l-grid--stretch">
	<div class="m-team-member l-grid__col l-grid__col--6@viewport-4 l-grid__col--4@viewport-9">
		<div class="m-team-member__content">
			<div class="m-team-member__image-container">
				<img class="m-team-member__image" src="/assets/images/team/placeholder.jpg" alt="Isabel Van Hoedenaghe" title="Isabel Van Hoedenaghe" />
			</div>
			<p class="m-team-member__name">
				Isabel Van Hoedenaghe
			</p>
			<p class="m-team-member__text">
				L&amp;D Consultant L and D EN
			</p>
		</div>
		<a class="a-link a-link--decorated m-team-member__link " href="#">
			<span class="a-link__text">Bekijk dit profiel</span>
		</a>
	</div>
	<div class="m-team-member l-grid__col l-grid__col--6@viewport-4 l-grid__col--4@viewport-9">
		<div class="m-team-member__content">
			<div class="m-team-member__image-container">
				<img class="m-team-member__image" src="/assets/images/team/placeholder.jpg" alt="Isabel Van Hoedenaghe" title="Isabel Van Hoedenaghe" />
			</div>
			<p class="m-team-member__name">
				Isabel Van Hoedenaghe
			</p>
			<p class="m-team-member__text">
				Consult
			</p>
		</div>
		<a class="a-link a-link--decorated m-team-member__link " href="#">
			<span class="a-link__text">Bekijk dit profiel</span>
		</a>
	</div>
	<div class="m-team-member l-grid__col l-grid__col--6@viewport-4 l-grid__col--4@viewport-9">
		<div class="m-team-member__content">
			<div class="m-team-member__image-container">
				<img class="m-team-member__image" src="/assets/images/team/placeholder.jpg" alt="Isabel Van Hoedenaghe" title="Isabel Van Hoedenaghe" />
			</div>
			<p class="m-team-member__name">
				Isabel Van Hoedenaghe
			</p>
			<p class="m-team-member__text">
				L&amp;D Consultant L and D EN
			</p>
		</div>
		<a class="a-link a-link--decorated m-team-member__link " href="#">
			<span class="a-link__text">Bekijk dit profiel</span>
		</a>
	</div>
</div>