Klipfolio Triangle Banners
Triangle Banner 1

<section class="banner--colored-triangles overflow-hidden triangles-formation--2">
<div class="big-container grid--2-col">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-1 bg--green">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-2 bg--orange">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-3 bg--yellow">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-4 bg--blue">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path>
</svg>
<div class="col-left">
<header>
<h1 class="strong h2" style="line-height: 1.3;">PLACEHOLDER TEXT</h1>
</header>
</div>
<div class="col-right">
<img data-src="/sites/all/themes/klipfolio_theme/img/illustrations/illustration-brand-guideline.svg" class="illustration" alt="Klipfolio Brand Guideline Banner">
</div>
</div>
</section>
* Replace placeholder text
Triangle Banner 2

<section class="banner--colored-triangles overflow-hidden triangles-formation--2">
<div class="big-container grid--2-col">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-1 bg--green">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-2 bg--orange">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-3 bg--yellow">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-4 bg--blue">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z"></path>
</svg>
<div class="col-left">
<header>
<h1 class="strong h2" style="line-height: 1.3;">PLACEHOLDER TEXT</h1>
</header>
</div>
<div class="col-right">
<img data-src="/sites/all/themes/klipfolio_theme/img/illustrations/illustration-brand-guideline.svg" class="illustration" alt="Klipfolio Brand Guideline Banner">
</div>
</div>
</section>
* Replace placeholder text
Triangle Banner 3

<section class="banner--colored-triangles overflow-hidden triangles-formation--3">
<div class="big-container tri-form-3-grid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-1 bg--green">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-2 bg--purple">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-3 bg--yellow">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-4 bg--orange">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.4 561.7" class="triangle triangle-5 bg--magenta">
<path d="M264.9,61.8l-232.1,402c-24.3,42.1,6.1,94.8,54.8,94.8h464.2c48.7,0,79.1-52.7,54.8-94.8l-232.1-402C350.1,19.7,289.3,19.7,264.9,61.8z" />
</svg>
<header>
<h1 class="strong text-center" style="line-height: 1.3;">PLACEHOLDER TEXT</h1>
</header>
</div>
</section>
* Replace placeholder text
Klipfolio Card Design
Card Design 1

<section class="shadow border-curved" style="margin-bottom: 60px; overflow: hidden; display: block;">
<div class="container">
<div class="row-flex">
<div class="col-md-6 col-left " style="margin:auto;">
<div class="" style="padding: 50px;"><a href="PLACEHOLDER TEXT"><img typeof="foaf:Image" class="Lazyload" data-src="PLACEHOLDER TEXT" width="100%" alt="PLACEHOLDER TEXT"
style="width:100%;"></a></div>
</div>
<div class="col-md-6 col-right vertical-center bg--blue-very-light">
<div style="width: 80%;" class="gap-south gap-north">
<h2 class="strong"><a href="PLACEHOLDER TEXT">PLACEHOLDER TEXT</a></h2>
<p>PLACEHOLDER TEXT</p>
<a href="PLACEHOLDER TEXT"><button class="grey">PLACEHOLDER TEXT</button></a>
</div>
</div>
</div>
</div>
</section>
* Replace placeholder text
Card Design 2

<div class="card-column gap-south-45">
<div class="card shadow">
<div class="card-body"><img class="gap-south-45 lazyload" data-src="/PLACEHOLDER TEXT" alt="PLACEHOLDER TEXT">
<p class="strong text-grey gap-south-0">PLACEHOLDER TEXT</p>
<h2 class="strong h4 gap-south-30">PLACEHOLDER TEXT</h2>
<p>PLACEHOLDER TEXT</p>
</div>
<div class="card-cta">
<a href="PLACEHOLDER TEXT" class="strong icon-cta-arrow">PLACEHOLDER TEXT</a>
</div>
</div>
</div>
* Replace placeholder text
Card Design 3

<div class="card with-border">
<div class="card-image">
<figure class="klip-screenshot">
<img data-src="PLACEHOLDER TEXT" class="shadow-double lazyload" alt="PLACEHOLDER TEXT" data-src="PLACEHOLDER TEXT">
</figure>
</div>
<div class="card-body">
<h4 class="strong" style="margin: 0;"><a href="PLACEHOLDER TEXT">PLACEHOLER TEXT</a></h4>
<section class="block-sm template-overview">
<p>PLACEHOLER TEXT</p>
</section>
<section class="block-sm template-services">
<p class="strong">PLACEHOLER TEXT</p>
<div class="integration_logo"><a href="PLACEHOLDER TEXT"><img typeof="foaf:Image" class=" lazyloaded" data-src="PLACEHOLDER TEXT"
width="100" height="100" alt=""></a></div>
</section>
</div>
<div class="card-cta">
<a href="PLACEHOLDER TEXT"><button class="grey">PLACEHOLDER TEXT</button></a>
<a href="PLACEHOLDER TEXT" target="_blank" rel="nofollow"><button class="blue">PLACEHOLDER TEXT</button></a>
</div>
</div>
* Replace placeholder text
Klipfolio Buttons
Primary CTA Button Red

* normal state

* hover state
* test button
<button class="red" >PLACEHOLDER TEXT</button>
* Replace placeholder text
Primary CTA Button Red with glow

* normal state

* hover state
* test button
<button class="red with-glow" >PLACEHOLDER TEXT</button>
* Replace placeholder text
Primary CTA Button Blue

* normal state

* hover state
* test button
<button class="blue" >PLACEHOLDER TEXT</button>
* Replace placeholder text
Primary CTA Button Grey

* normal state

* hover state
* test button
<button class="grey" >PLACEHOLDER TEXT</button>
* Replace placeholder text
Links CTA
<a href="add-link-here" class="icon-cta-arrow strong " >PLACEHOLDER TEXT</a>
* Replace placeholder text