Guidelines Website Design

Klipfolio Web Design

Our web developers use cards, buttons, and signature blocks to create the ideal user experience on our website. If you get stuck while writing code, you can get some help from Bootstrap.

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