1 Color Palette
<div class="green">Text Color</div>
<div class="bg-green">Background Color</div>
<div class="dark-blue">Text Color</div>
<div class="bg-dark-blue">Background Color</div>
<div class="black">Text Color</div>
<div class="bg-black">Background Color</div>
<div class="gray">Text Color</div>
<div class="bg-gray">Background Color</div>
<div class="dark-gray">Text Color</div>
<div class="bg-dark-gray">Background Color</div>
<div class="cool-gray">Text Color</div>
<div class="bg-cool-gray">Background Color</div>
<div class="blue-gray">Text Color</div>
<div class="bg-blue-gray">Background Color</div>
<div class="light-gray">Text Color</div>
<div class="bg-light-gray">Background Color</div>
2 Typography
Fonts
<p class="poppins">Example copy lorem ipsum dolor sit amet.</p>
<p class="poppins bold">Example copy lorem ipsum dolor sit amet.</p>
<p class="poppins italic">Example copy lorem ipsum dolor sit amet.</p>
<p class="poppins bold italic">Example copy lorem ipsum dolor sit amet.</p>
Helpers
Italic Font
Uppercase Font
Regular Case Font
Bold Font Weight
Normal Font Weight
Font Size t1
Font Size t2
Font Size t3
Font Size t4
Font Size t5
Font Size t6
Font Size t7
Font Size t8
Font Size t9
Font Size t10
<p class="italic">Italic Font</p>
<p class="caps">Uppercase Font</p>
<p class="regular-case">Regular Case Font</p>
<p class="bold">Bold Font Weight</p>
<p class="regular">Normal Font Weight</p>
<p class="t1">Font Size t1</p>
<p class="t2">Font Size t2</p>
<p class="t3">Font Size t3</p>
<p class="t4">Font Size t4</p>
<p class="t5">Font Size t5</p>
<p class="t6">Font Size t6</p>
<p class="t7">Font Size t7</p>
<p class="t8">Font Size t8</p>
<p class="t9">Font Size t9</p>
<p class="t10">Font Size t10</p>
Headings
h1 - Heading
h1 - Sub Heading
h2 - Heading
h2 - Sub Heading
h3 - Heading
h3 - Sub Heading
h4 - Heading
h4 - Sub Heading
h5 - Heading
h5 - Sub Heading
h6 - Heading
h6.Sub Heading
Heading Sizer h1
Heading Sizer h2
Heading Sizer h3
Heading Sizer h4
Heading Sizer h5
Heading Sizer h6
<h1 class="small caps">Headings</h1>
<h1>h1 - Heading</h1>
<h1 class="subheader">h1 - Sub Heading</h1>
<h2>h2 - Heading</h2>
<h2 class="subheader">h2 - Sub Heading</h2>
<h3>h3 - Heading</h3>
<h3 class="subheader">h3 - Sub Heading</h3>
<h4>h4 - Heading</h4>
<h4 class="subheader">h4 - Sub Heading</h4>
<h5>h5 - Heading</h5>
<h5 class="subheader">h5 - Sub Heading</h5>
<h6>h6 - Heading</h6>
<h6 class="subheader">h6.Sub Heading</h6>
<h3 class="h1">Heading Sizer h1</h3>
<h3 class="h2">Heading Sizer h2</h3>
<h3 class="h3">Heading Sizer h3</h3>
<h3 class="h4">Heading Sizer h4</h3>
<h3 class="h5">Heading Sizer h5</h3>
<h3 class="h6">Heading Sizer h6</h3>
Font Icons
<span class="icon-arrow-right"></span>
<span class="icon-arrow-left"></span>
<span class="icon-play-circle"></span>
<span class="icon-external"></span>
<span class="icon-mail-line"></span>
<span class="icon-facebook"></span>
Section Headings
Section Headings
Section Headings - with icon
<h3 class="headings">Section Headings</h3>
<h4 class="headings"><span class="icon-building"></span> Section Headings - with icon</h4>
Body Copy
Heading
This is a lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.
Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Paragraph link. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
<p class="lead">This is a lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. <a href="#">Paragraph link</a>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/350x250" class="alignright border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/350x250" class="alignleft border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/1200x400" class="aligntop border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
Body Copy Alignment
Left Align Lorem ipsum Ut a nisl id ante tempus hendrerit.
Right Align Lorem ipsum Ut a nisl id ante tempus hendrerit.
Center Lorem ipsum Ut a nisl id ante tempus hendrerit.
<p class="left-align"><strong>Left Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="right-align"><strong>Right Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="center"><strong>Center</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
Article Copy
Article copy that decreases container width and increases font size
Article copy that decreases container width and increases font size for easier reading experience. enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Article Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt mollitia, ipsam cupiditate.
Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Lorem ipsum enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
<div class="row">
<div class="small-11 medium-10 large-9 xlarge-8 small-centered column article">
<h1>Article copy that decreases container width and increases font size</h1>
<p>Article copy that decreases container width and increases font size for easier reading experience. enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<h2>Article Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt mollitia, ipsam cupiditate.</h2>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Lorem ipsum enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>
Blockquotes
Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. posuere cubilia Curae; Fusce id purus. Fusce id purus. posuere
Optional Authors Name Optional Second Field
<blockquote>
<div class="quote">
<p>Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Fusce id purus. posuere cubilia Curae; Fusce id purus. Fusce id purus. posuere </p>
</div>
<p class="cite">Optional Authors Name <span> Optional Second Field</span> </p>
</blockquote>
Unordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- Sub List Item 4
- Sub List Item 5
- List Item 6
Unordered List - Checkmarks
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- Sub List Item 4
- Sub List Item 5
- List Item 6
Ordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- Sub List Item 4
- Sub List Item 5
- List Item 6
<ul class="bullets">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ul>
</li>
<li>List Item 6</li>
</ul>
<ul class="checkmarks">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ul>
</li>
<li>List Item 6</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ol>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ol>
</li>
<li>List Item 6</li>
</ol>
3 Spacing
Top Margin Spacing
Bottom Margin Spacing
<div class="mt0">Margin Top 0</div>
<div class="mt1">Margin Top 1</div>
<div class="mt2">Margin Top 2</div>
<div class="mt3">Margin Top 3</div>
<div class="mt4">Margin Top 4</div>
<div class="mt5">Margin Top 5</div>
<div class="mt6">Margin Top 6</div>
<div class="mt7">Margin Top 7</div>
<div class="mt8">Margin Top 8</div>
<div class="mt9">Margin Top 9</div>
<div class="mt10">Margin Top 10</div>
<div class="mt11">Margin Top 11</div>
<div class="mt12">Margin Top 12</div>
<div class="mb0">Margin Bottom 0</div>
<div class="mb1">Margin Bottom 1</div>
<div class="mb2">Margin Bottom 2</div>
<div class="mb3">Margin Bottom 3</div>
<div class="mb4">Margin Bottom 4</div>
<div class="mb5">Margin Bottom 5</div>
<div class="mb6">Margin Bottom 6</div>
<div class="mb7">Margin Bottom 7</div>
<div class="mb8">Margin Bottom 8</div>
<div class="mb9">Margin Bottom 9</div>
<div class="mb10">Margin Bottom 10</div>
<div class="mb11">Margin Bottom 11</div>
<div class="mb12">Margin Bottom 12</div>
Top Padding Spacing
Bottom Padding Spacing
<div class="pt0">Padding Top 0</div>
<div class="pt1">Padding Top 1</div>
<div class="pt2">Padding Top 2</div>
<div class="pt3">Padding Top 3</div>
<div class="pt4">Padding Top 4</div>
<div class="pt5">Padding Top 5</div>
<div class="pt6">Padding Top 6</div>
<div class="pt7">Padding Top 7</div>
<div class="pt8">Padding Top 8</div>
<div class="pt9">Padding Top 9</div>
<div class="pt10">Padding Top 10</div>
<div class="pt11">Padding Top 11</div>
<div class="pt12">Padding Top 12</div>
<div class="pb0">Padding Bottom 0</div>
<div class="pb1">Padding Bottom 1</div>
<div class="pb2">Padding Bottom 2</div>
<div class="pb3">Padding Bottom 3</div>
<div class="pb4">Padding Bottom 4</div>
<div class="pb5">Padding Bottom 5</div>
<div class="pb6">Padding Bottom 6</div>
<div class="pb7">Padding Bottom 7</div>
<div class="pb8">Padding Bottom 8</div>
<div class="pb9">Padding Bottom 9</div>
<div class="pb10">Padding Bottom 10</div>
<div class="pb11">Padding Bottom 11</div>
<div class="pb12">Padding Bottom 12</div>
4 Buttons
Standard Buttons
<a class="button" href="#">Primary Default</a>
<a class="button tiny" href="#">Primary Tiny</a>
<a class="button secondary" href="#">Secondary Default</a>
<a class="button secondary tiny" href="#">Secondary Tiny</a>
<a class="button disabled" href="#">Disabled Button</a>
<a class="button expand" href="#">Expanded Button</a>
Text Buttons
<a href="#" class="text-button">Text Button Primary</a>
<a href="#" class="text-button secondary">Text Button Secondary</a>
<a href="#" class="text-button tiny">Small Text Button Primary</a>
<a href="#" class="text-button secondary tiny">Small Text Button Secondary</a>
Text Links
<a href="#" class="text-link">Text Link</a>
5 Forms
<form>
<div class="row column">
<label>Input Label
<input type="text" placeholder=".row.column">
</label>
</div>
<div class="row">
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder=".large-4.columns">
</label>
</div>
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder=".large-4.columns">
</label>
</div>
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder=".large-4.columns">
</label>
</div>
</div>
<div class="row column">
<label>Select Box
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</label>
</div>
<div class="row">
<div class="large-6 columns mb3">
<fieldset>
<legend>Choose Your Favorite</legend>
<div class="radio">
<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"><span></span> Radio 1 </label>
</div>
<div class="radio">
<label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"><span></span> Radio 2 </label>
</div>
</fieldset>
</div>
<div class="large-6 columns mb3">
<fieldset>
<legend>Check these out</legend>
<div class="checkbox">
<label><input type="checkbox"><span></span> Checkbox 1 </label>
</div>
<div class="checkbox">
<label><input type="checkbox"><span></span> Checkbox 1 </label>
</div>
</fieldset>
</div>
</div>
<div class="row column">
<label>Enable Some Fun</label>
<label class="switch">
<input type="checkbox" title="Switch Control" aria-label="Switch Control">
<span></span>
</label>
</div>
<div class="row column">
<label>Textarea Label
<textarea rows="8" placeholder=".row.column"></textarea>
</label>
</div>
<div class="row column">
<button type="submit" class="button">Submit</button>
</div>
</form>
6 Grids
Standard Grid
Grid system is based on Foundations Grid please reference docs for more information.
Sites breakpoints:
xsmall (0 to 479px)
small (480px - 639px)
medium (640px - 800px)
large (801px - 959px)
xlarge (960px - 1199px)
xxlarge (1200px and up)
Two column desktop/tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.
Two column desktop/tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.
Four column desktop; Two column tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.
Four column desktop; Two column tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.
Four column desktop; Two column tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.
Four column desktop; Two column tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.
<div class="row">
<div class="medium-6 column">
<p><strong>Two column desktop/tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.</p>
</div>
<div class="medium-6 column">
<p><strong>Two column desktop/tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.</p>
</div>
</div>
<div class="row">
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
</div>
Block Grid
<div class="row xsmall-up-1 small-up-2 medium-up-3 large-up-4 xlarge-up-5 xxlarge-up-6">
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
</div>
7 Page Body Components
Slide Content
Slide Toggle With Link
Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Slide Toggle With Button
Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
<h3>Slide Toggle With Link</h3>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus
laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula,
eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container">
<p> <a class="slide-toggle" href="#">More Info</a> </p>
<div class="slide-content">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>
<h3>Slide Toggle With Button</h3>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container"> <a class="slide-toggle button" href="#"> More Info</a>
<div class="slide-content">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>
Accordion
Accordion
- FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?
- Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
- FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?
- Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
- FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?
- Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
<dl class="accordion">
<dt>FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
</dl>
Vertical Tabs
- Tab 1
- Tab 2
- Tab 3
Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.
Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.
The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.
<div class="resp-tabs resp-tabs--vertical">
<ul class="resp-tabs-list resp-tabs-group" role="tablist">
<li tabindex="0">Tab 1</li>
<li tabindex="0">Tab 2</li>
<li tabindex="0">Tab 3</li>
</ul>
<div class="resp-tabs-container resp-tabs-group">
<div>
<p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help
entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better
products and services.</p>
</div>
<div>
<p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies
after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement,
experience, guidance, and investment of our Members.</p>
</div>
<div>
<p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment
goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business
development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
</div>
</div>
</div>
Horizontal Tabs
- Tab 1
- Tab 2
- Tab 3
Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.
Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.
The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.
<div class="resp-tabs resp-tabs--horizontal">
<ul class="resp-tabs-list resp-tabs-group" role="tablist">
<li tabindex="0">Tab 1</li>
<li tabindex="0">Tab 2</li>
<li tabindex="0">Tab 3</li>
</ul>
<div class="resp-tabs-container resp-tabs-group">
<div>
<p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.</p>
</div>
<div>
<p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.</p>
</div>
<div>
<p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
</div>
</div>
</div>
Tables
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
<table class="table">
<thead>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>
8 System Components
Alerts
This is an example successful alert message that would be used for forms or login messages more info
This is an example info alert message that would be used for forms or login messages more info
This is an example warning alert message that would be used for forms or login messages more info
This is an example danger alert message that would be used for forms or login messages more info
<div class="alert alert-success">
<p>This is an example successful alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-info">
<p>This is an example info alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-warning">
<p>This is an example warning alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-danger">
<p>This is an example danger alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
9 Theme Components
Split Panel
Success Stories
Kiwi Power helps our clients confidently participate in the new energy world
Kiwi Power’s energy software enables electricity suppliers, asset owners, aggregators, grid operators and other energy stakeholders to generate new streams of revenue by engaging in the wholesale energy markets. Our clients leverage Kiwi Power’s distributed energy platform to control a single asset or portfolio of resources, operating in one or across dozens of markets globally. In an increasingly complex grid landscape, we simplify distributed energy monetisation.
Success Stories
Our proprietary, low-cost, modular hardware – Kiwi Fruit – sends your energy data to the Kiwi Core platform and provides a wide range of metering and control functions.
- Kiwi’s hardware, Kiwi Fruit, is built with a proprietary design to reduce total cost of ownership.
- Our flexible and customizable solution deploys only the functionality you need
- The hardware has pre-configured modules to fit your existing site infrastructure for a fast and easy installation.
- Downloadable data makes it easy to access meter data at the Kiwi Fruit and site levels for reporting and analysis.
<section class="split-panel split-panel--full split-panel--right bg-white">
<div class="row row-site column">
<div class="split-panel__row flex">
<div class="split-panel__body matchheight-me">
<div class="split-panel__body-inner">
<h2 class="h1 split-panel__headline">Success Stories </h2>
<p class="split-panel__subheadline lead gray">Kiwi Power helps our clients confidently participate in the new energy world</p>
<div class="split-panel__overview" >
<p>Kiwi Power’s energy software enables electricity suppliers, asset owners, aggregators, grid operators and other energy stakeholders to generate new streams of revenue by engaging in the wholesale energy markets. Our clients leverage Kiwi Power’s distributed energy platform to control a single asset or portfolio of resources, operating in one or across dozens of markets globally. In an increasingly complex grid landscape, we simplify distributed energy monetisation. </p>
</div>
<a href="" class="button split-panel__button">View Our Customers</a>
</div>
</div>
<div class="split-panel__figure split-panel__figure--full matchheight-me">
<div class="split-panel__figure-inner flex flex--center">
<figure>
<img src="/wp-content/uploads/images-about-success-story.jpg" alt="">
</figure>
</div>
</div>
</div>
</div>
</section>
<section class="split-panel split-panel--full split-panel--left bg-white">
<div class="row row-site column">
<div class="split-panel__row flex">
<div class="split-panel__body matchheight-me">
<div class="split-panel__body-inner">
<h2 class="h1 split-panel__headline">Success Stories </h2>
<p class="split-panel__subheadline lead gray">Kiwi Power helps our clients confidently participate in the new energy world</p>
<div class="split-panel__overview" >
<p>Kiwi Power’s energy software enables electricity suppliers, asset owners, aggregators, grid operators and other energy stakeholders to generate new streams of revenue by engaging in the wholesale energy markets. Our clients leverage Kiwi Power’s distributed energy platform to control a single asset or portfolio of resources, operating in one or across dozens of markets globally. In an increasingly complex grid landscape, we simplify distributed energy monetisation. </p>
</div>
<a href="" class="button split-panel__button">View Our Customers</a>
</div>
</div>
<div class="split-panel__figure split-panel__figure--full matchheight-me">
<div class="split-panel__figure-inner flex flex--center">
<figure>
<img src="/wp-content/uploads/images-about-success-story.jpg" alt="">
</figure>
</div>
</div>
</div>
</div>
</section>
Split Panel - Stat Image
Kiwi’s energy expertise
For more than a decade, Kiwi Power has been helping our clients benefit from power market shifts. Our commercial model aligns us with our customers; we generate revenue when our clients generate revenue. By providing software and expert guidance, we help our clients participate in virtual power plants and maximize the usage of their energy resources.
Our expertise and global reach sets us apart
10+ countries operating in
1GW of DERs under management
Meet the people behind our advanced energy technology
The people at Kiwi Power bring decades of experience working with public and private companies across the energy sector. Our team members’ expertise ranges from distributed generation and energy storage to grid services and demand response, making Kiwi Power the right partner to help you compete in an evolving energy market.
<section class="split-panel split-panel--right split-panel--stat-image bg-dark-gradient">
<div class="row row-site column">
<div class="split-panel__row flex">
<div class="split-panel__body">
<div class="split-panel__body-inner">
<h2 class="h1 white split-panel__headline">Kiwi’s energy expertise </h2>
<div class="split-panel__overview white" >
<p>For more than a decade, Kiwi Power has been helping our clients benefit from power market shifts. Our commercial model aligns us with our customers; we generate revenue when our clients generate revenue. By providing software and expert guidance, we help our clients participate in virtual power plants and maximize the usage of their energy resources. </p>
</div>
<div class="split-panel__stats">
<h3 class="split-panel__stats-label cool-gray">Our expertise and global reach sets us apart </h3>
<div class="split-panel__stats-grid flex">
<div class="split-panel__stat">
<div class="split-panel__stat-inner">
<h4>
<span class="split-panel__stat-value white">10<sup>+</sup></span>
<span class="label split-panel__stat-label secondary">countries operating in</span>
</h4>
</div>
</div>
<div class="split-panel__stat">
<div class="split-panel__stat-inner">
<h4>
<span class="split-panel__stat-value white">1GW</span>
<span class="label split-panel__stat-label secondary">of DERs under management</span>
</h4>
</div>
</div>
</div>
</div>
<a href="" class="button split-panel__button">About Kiwi Power</a>
</div>
</div>
<div class="split-panel__figure">
<div class="split-panel__figure-inner">
<span class="split-panel__figure-label">
<span class="split-panel__figure-label-copy">A low-capital, low-risk commercial model</span>
<span class="split-panel__figure-divider"></span></span>
<div class="split-panel__figure-box bg-white">
<figure class="stat-image">
<img src="/wp-content/uploads/images-home-stat-10.png" alt="ALT TEXT">
<figcaption class="label secondary">YEARS OF EXPERTISE</figcaption>
</figure>
</div>
<img src="assets/images/elements/images-global-angle-accent.svg" class="split-panel--angle" alt="">
</div>
</div>
</div>
</div>
</section>
<section class="split-panel split-panel--left split-panel--stat-image bg-dark-gradient">
<div class="row row-site column">
<div class="split-panel__row flex">
<div class="split-panel__body">
<div class="split-panel__body-inner">
<h2 class="h1 white split-panel__headline">Meet the people behind our advanced energy technology </h2>
<div class="split-panel__overview white" >
<p>The people at Kiwi Power bring decades of experience working with public and private companies across the energy sector. Our team members’ expertise ranges from distributed generation and energy storage to grid services and demand response, making Kiwi Power the right partner to help you compete in an evolving energy market. </p>
</div>
<a href="" class="button split-panel__button">Connect with a Kiwi Power team member</a>
</div>
</div>
<div class="split-panel__figure">
<div class="split-panel__figure-inner">
<span class="split-panel__figure-label">
<span class="split-panel__figure-label-copy">1GW of DERs under management in over</span>
<span class="split-panel__figure-divider"></span>
</span>
<div class="split-panel__figure-box bg-white">
<figure class="stat-image">
<img src="/wp-content/uploads/images-home-stat-10.png" alt="ALT TEXT">
<figcaption class="label secondary">Countries</figcaption>
</figure>
</div>
<img src="assets/images/elements/images-global-angle-accent.svg" class="split-panel--angle" alt="">
</div>
</div>
</div>
</div>
</section>
Callout Block
Apply to join the Kiwi Power team
Kiwi Power is seeking outstanding professionals who are excited to build a clean and distributed energy future.
Explore OpportunitiesUnlock the value of your distributed energy assets
Learn how Kiwi Power can help you take your business to the next level.
Get a customized white paper with insights for your industry.
<section class="callout-section callout-section--top-quarter bg-off-white">
<div class="row row-site column">
<div class="callout-section__inner bg-white center">
<h2 class="h1 callout-section__headline">Apply to join the Kiwi Power team</h2>
<p class="callout-section__overview mb0">Kiwi Power is seeking outstanding professionals who are excited to build a clean and distributed energy future.</p>
<a href="" class="button">Explore Opportunities</a>
</div>
</div>
</section>
<section class="callout-section callout-section--download-select callout-section--top-quarter bg-off-white">
<div class="row row-site column">
<div class="callout-section__inner bg-white center">
<h2 class="h1 callout-section__headline">Unlock the value of your distributed energy assets</h2>
<p class="callout-section__overview mb0">Learn how Kiwi Power can help you take your business to the next level. <br> Get a customized white paper with insights for your industry.</p>
<div class="download-popup__wrapper">
<form class="download-popup flex">
<select name="download-options" id="">
<option value="" disabled selected>Download Content For</option>
<option value="option">Option</option>
</select>
<button type="submit" class="button">Download</button>
</form>
</div>
</div>
</div>
</section>
Customer Slider Section - Split Panel
<section class="logo-slider-section logo-slider-section--customers ">
<div class="logo__row">
<div class="slider-split-panel__row flex">
<div class="slider-split-panel__body flex flex--center matchheight-me">
<div class="slider-split-panel__body-inner">
<h2 class="h1 slider-split-panel__headline">Working together with other energy industry leaders</h2>
<p class="slider-split-panel__overview">Kiwi Power is working with a strong network of partners to make the energy on our grids cleaner and more affordable for everyone.</p>
<a href="" class="button">Customers</a>
</div>
</div>
<div class="slider-split-panel__slide-wrap matchheight-me">
<div class="slider-split-panel__slide-inner">
<h3 class="slider-split-panel__slider-headline gray">Kiwi leverages the demand for flexibility to build an efficient, affordable energy market globally</h3>
<div class="slider-split-panel__slider">
<div class="logo-carousel__slide">
<div class="logo-carousel__logo">
<a href="">
<img src="/wp-content/uploads/next-flex-logo-copy.png" alt="">
</a>
</div>
</div>
<div class="logo-carousel__slide">
<div class="logo-carousel__logo">
<a href="">
<img src="/wp-content/uploads/next-flex-logo-copy.png" alt="">
</a>
</div>
</div>
<div class="logo-carousel__slide">
<div class="logo-carousel__logo">
<a href="">
<img src="/wp-content/uploads/next-flex-logo-copy.png" alt="">
</a>
</div>
</div>
<div class="logo-carousel__slide">
<div class="logo-carousel__logo">
<a href="">
<img src="/wp-content/uploads/next-flex-logo-copy.png" alt="">
</a>
</div>
</div>
</div>
<div class="slider-actions flex flex--center">
<span class="slider-actions-divider"></span>
<button class="slider-actions-next-customers" aria-label="Next Slide">
<span class="slider-actions-label__value">BROWSE CUSTOMERS</span>
<span class="slider-actions-btn"></span>
</button>
</div>
</div>
<img src="assets/images/elements/images-global-angle-accent.svg" class="logo-slider--angle" alt="">
</div>
</div>
</div>
</section>
Partner Slider - Split Panel
Resource Timeline
Featured or Recent
Featured or Recent Title Lorem Ipsum Dolor
Featured or Recent Title Lorem Ipsum Dolor Sit Amet Adipiscing Elit
Featured or Recent Title Lorem Ipsum Dolor
Content Block
Ten years of software development tested in-market with our own assets
The world’s number one VPP platform for execution
A strong paragraph describing Kiwi Core and its global USP. The world’s leading VPP platform for execution, Kiwi Core enables organisations across the energy sector to make best use of their distributed energy resources. The world’s leading VPP platform for execution, Kiwi Core enables organisations across the energy sector to make best use of their distributed energy resources.
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Mauris accumsan eros eget libero posuere vulputate.
A strong paragraph describing Kiwi Core and its global USP. The world’s leading VPP platform for execution, Kiwi Core enables organisations across the energy sector to make best use of their distributed energy resources. The world’s leading VPP platform for execution, Kiwi Core enables organisations across the energy sector to make best use of their distributed energy resources.
Today’s energy landscape is evolving from a centralized system of coal and gas plants owned by few to a decentralized system of diverse, clean and distributed energy resources owned by many. Kiwi Power’s platform, Kiwi Core, is a simple, automated energy-as-a-service technology solution which can easily integrate with power generation and storage assets as well as buildings with large power loads. Kiwi Core connects these assets to virtual power plants so distributed energy resource owners can participate and succeed in the new energy market.
Featured List
Compel users with the software’s key features
Define the product and the breadth of opportunities to visualize all assets and data in one location to optimize their DER management.
Automate and optimise your flexible asset management
- A universal solution with open API [Asp1] [AW2] [AW3] to develop to your exact specifications
- Automatic revenue optimisation, forecasting, scheduling and dispatch
- Built with customer insight, making the platform intuitive to use without time-consuming training.
Automate and optimise your flexible asset management
- A universal solution with open API [Asp1] [AW2] [AW3] to develop to your exact specifications
- Automatic revenue optimisation, forecasting, scheduling and dispatch
- Built with customer insight, making the platform intuitive to use without time-consuming training.
Automate and optimise your flexible asset management
- A universal solution with open API [Asp1] [AW2] [AW3] to develop to your exact specifications
- Automatic revenue optimisation, forecasting, scheduling and dispatch
- Built with customer insight, making the platform intuitive to use without time-consuming training.
Card Slider
Card Blocks
Join Kiwi Power
We’re proud to be recognized by Guidehouse Insights as a top 10 virtual power plant provider and #1 for execution. With a decade of business growth behind us, we’re looking for outstanding professionals to join our team. We offer an attractive benefits package and the opportunity to grow your career in one of the most important and fast-evolving industries on the planet: the power sector.
Career opportunities with Kiwi
Job Title Dolor Sit Amet
DEPARTMENT LABEL
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.
Job Title Dolor Sit Amet large title that breaks
DEPARTMENT LABEL
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. sunt in culpa qui officia deserunt mollit anim id est laborum.
Job Title Dolor Sit Amet
DEPARTMENT LABEL
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.
Team Section
Connect with the Kiwi Power team
Our leadership team offers unique perspectives from all corners of the energy sector, spearheading advanced virtual power plant technology in energy markets globally.
First Name Last Name
Title dolor sit amet
First Name Last Name
Title dolor sit amet
Long First Name Last Name
Title dolor sit amet title title
Long First Name Last Name
Title dolor sit amet title title
Resource Section
Though Leadership
Tempor quam et dolor sit
Though Leadership
Tempor quam et dolor sit
Though Leadership
Tempor quam et dolor sit
Full Logo Slider
Success Stories
Success Stories
See how Kiwi Power is helping customers seize new opportunities in the dynamic energy landscape globally.
Demand response management
DNO
Body text to provide context around the relationship between this customer and Kiwi Power alongside a high level introduction to the benefit/impact of working with Kiwi.
Local energy markets
ISO
Body text to provide context around the relationship between this customer and Kiwi Power alongside a high level introduction to the benefit/impact of working with Kiwi.
Quote Slider
Quote Headline
Video
Video
Highlight the Kiwi Power team’s years of experience and expertise as a key differentiator that situates Kiwi as the optimal partner and solution provider for those looking to successfully participate in this energy marketplace with the right guidance and data to optimize their assets. Connect with users who know or have met someone from the Kiwi team and give them the ease and personal outreach opportunity through your team page.
Full Image
Full Width Image
This is an overview
Label
Full Image Narrow
test
Table
Label
Table headline
Overview
Headline Label | Headline Label | Headline Label | Headline Label |
---|---|---|---|
Et lacinia sapien | Et lacinia sapien | Et lacinia sapien | Et lacinia sapien |
Mauris accumsan eros | Mauris accumsan eros | Mauris accumsan eros | Mauris accumsan eros |
Mauris accumsan eros | Mauris accumsan eros | Mauris accumsan eros | Mauris accumsan eros |
Mauris accumsan eros | Mauris accumsan eros | Mauris accumsan eros | Mauris accumsan eros |
Inset Image
Label
Inset Image
Overview