Primer

HTML

<div class="mean-bean">	
	<div class="mean-bean-cta clearfix">
		<div class="inner">
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--green">Mean Bean <span>guide</span></a>
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--orange">Nutrition <span>Advice</span></a>
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--red"><span class="top">48 HR</span> <span class="middle">youth</span> <span class="bottom">sign up</span></a>
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--faq">FAQs</a>
		</div>
	</div>

	<h2 class="pl-header">Sign Up Bar</h2>
	<div class="mean-bean-sign-section">
		<a class="button button--mean-bean">
			<div class="button--mean-bean__left-white"></div>
			<div class="button--mean-bean__top"></div>
			<div class="button--mean-bean__left"></div>
			Sign Up Today
			<div class="button--mean-bean__bottom-white"></div>
			<div class="button--mean-bean__right"></div>
			<div class="button--mean-bean__bottom"></div>
		</a>
		<a href="#" class="button button--mean-bean button--mean-bean--red">
			<div class="button--mean-bean__left-white"></div>
			<div class="button--mean-bean__top"></div>
			<div class="button--mean-bean__left"></div>
			Remind Me
			<div class="button--mean-bean__bottom-white"></div>
			<div class="button--mean-bean__right"></div>
			<div class="button--mean-bean__bottom"></div>
		</a>
		<h2>Mean Beans <span>Fight Hunger.</span></h2>
	</div>	
</div>

Twig

<div class="mean-bean">	
	<div class="mean-bean-cta clearfix">
		<div class="inner">
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--green">Mean Bean <span>guide</span></a>
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--orange">Nutrition <span>Advice</span></a>
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--red"><span class="top">48 HR</span> <span class="middle">youth</span> <span class="bottom">sign up</span></a>
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--faq">FAQs</a>
		</div>
	</div>

	<h2 class="pl-header">Sign Up Bar</h2>
	<div class="mean-bean-sign-section">
		<a class="button button--mean-bean">
			<div class="button--mean-bean__left-white"></div>
			<div class="button--mean-bean__top"></div>
			<div class="button--mean-bean__left"></div>
			Sign Up Today
			<div class="button--mean-bean__bottom-white"></div>
			<div class="button--mean-bean__right"></div>
			<div class="button--mean-bean__bottom"></div>
		</a>
		<a href="#" class="button button--mean-bean button--mean-bean--red">
			<div class="button--mean-bean__left-white"></div>
			<div class="button--mean-bean__top"></div>
			<div class="button--mean-bean__left"></div>
			Remind Me
			<div class="button--mean-bean__bottom-white"></div>
			<div class="button--mean-bean__right"></div>
			<div class="button--mean-bean__bottom"></div>
		</a>
		<h2>Mean Beans <span>Fight Hunger.</span></h2>
	</div>	
</div>

{}

Mean Bean guide Nutrition Advice 48 HR youth sign up FAQs

Sign Up Bar

Remind Me

Sign Up Bar

Mean Beans Fight Hunger.