You can use several variations of .content
container.
The basic variant has transparent background so you can use it with any parent component.
<div class="color-brand-secondary-off2">
<div class="content">
<div class="content__inner">
<h2 class="content__heading">How it works</h2>
</div>
</div>
</div>
Use .content--light
modifier for this variant.
Measure Code Quality • Decrease Technical Debt • Find Refactoring Opportunities
<div class="content content--light">
<div class="content__inner">
<h2 class="content__heading">We help developers write clean code</h2>
<p class="content__claim">
Measure Code Quality
<strong>•</strong>
Decrease Technical Debt
<strong>•</strong>
Find Refactoring Opportunities
</p>
</div>
</div>
Use .content--dark
modifier for this variant. Class .content__heading--small
makes the text sie and margin smaller. For even smaller heading use class .content__heading--get-started
.
<div class="content content--dark">
<div class="content__inner">
<h2 class="content__heading content__heading--small content__heading--get-started">
We help developers write clean code
</h2>
</div>
</div>
Simple page heading.
Last updated: 06 September 2018
This privacy policy applies to you when you use the CodeFlow services or browse
the getcodeflow.com
website.
When you start using our services, we will ask for some of your personal data, for example, your name and email.
<div class="content content--light">
<div class="content__inner text-justify">
<h2 class="content__heading content__heading--simple-content">Terms of Service</h2>
<p class="text-muted">Last updated: 06 September 2018</p>
<p>This privacy policy applies to you when you use the CodeFlow services or browse
the <code>getcodeflow.com</code> website.</p>
<h3 class="content__heading content__heading--simple-content content__heading--sub">
Information we collect
</h3>
<h4 class="content__heading content__heading--simple-content content__heading--sub-sub">
Account information
</h4>
<p>When you start using our services, we will ask for some of your personal data,
for example, your name and email.</p>
</div>
</div>