Style guide
Text
Headings
h1
h2
h3
h4
h5
h6
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
h1
h2
h3
h4
h5
h6
<div class="dark-theme">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</div>
Headings helpers classes
p.h1
p.h2
p.h3
p.h4
p.h5
p.h6
<p class="h1">p.h1</p>
<p class="h2">p.h2</p>
<p class="h3">p.h3</p>
<p class="h4">p.h4</p>
<p class="h5">p.h5</p>
<p class="h6">p.h6</p>
p.h1
p.h2
p.h3
p.h4
p.h5
p.h6
<div class="dark-theme">
<p class="h1">p.h1</p>
<p class="h2">p.h2</p>
<p class="h3">p.h3</p>
<p class="h4">p.h4</p>
<p class="h5">p.h5</p>
<p class="h6">p.h6</p>
</div>
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="body-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="dark-theme">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="body-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
CTA Links
<a href="#" class="cta-link">Cta Link</a>
<a href="#" class="cta-icon-link "><i class="fas fa-map-marker-alt"></i>Cta link with Icon</a>
<a href="#" class="cta-icon-link cta-icon-link--black"><i class="fas fa-map-marker-alt"></i>Black Cta link with Icon</a>
Forms
Inputs
<input type="text" placeholder="222">
<div class="icon-input"><i class="fas fa-map-marker-alt"></i><input type="text" placeholder="222"></div>
<div class="styled-select">
<select name="select" id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<div class="styled-checkbox">
<input type="checkbox" class="styled-checkbox__checkbox" name="testCheckbox" id="testCheckbox">
<label class="styled-checkbox__label-content" for="testCheckbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="#">magna aliqua</a>.</label>
</div>
<label class="styled-radio">One
<input type="radio" checked="checked" name="radio">
<span class="styled-radio__checkmark"></span>
</label>
<label class="styled-radio">One
<input type="radio" name="radio">
<span class="styled-radio__checkmark"></span>
</label>
Buttons
<button class="button">default <i class="fal fa-long-arrow-right"></i></button>
<button class="button button--outlined">outlined <i class="fal fa-long-arrow-right"></i></button>
<button class="button button--red">red <i class="fal fa-long-arrow-right"></i></button>
<button class="button button--red button--outlined">red outlined <i class="fal fa-long-arrow-right"></i></button>
<button class="button button--light">light <i class="fal fa-long-arrow-right"></i></button>
<button class="button button--light button--outlined">light outlined <i class="fal fa-long-arrow-right"></i></button>
<button class="scroll-down-button"></button>
<button aria-label="next slide" class="step-button step-button--next"></button>
<button aria-label="next slide" class="step-button step-button--prev"></button>
Indicators
<div class="steps-counter"><span class="steps-counter__current-step-number">01</span> / <span class="steps-counter__steps-length">3</span> </div>