<div class="h-container">
<div class="grid">
<div class="grid__col grid__col--xs-20 grid__col--md-12 grid__col--gutter-xs-2">
<div class="text">
<p>
Text styles 600+ px devices<br/> All texts/styles can be any colour from the styleguide.<br/> Defaults are white, black and main green
</p>
<h1>H1 Gordita Light</h1>
<h2>H2 Gordita Light</h2>
<h3>H3 Gordita Regular</h3>
<h4>H4 Gordita Regular</h4>
<h4 class="medium">H4 can be medium</h4>
<h5>H5 All caps, medium weight</h5>
</div>
<div class="text">
<p>
<b>Text</b><br/>
<b>Bold and</b> regular weights<br/>
<a href="#">Text link is always bold</a>
</p>
</div>
<div class="text text--small">
<p>
<b>Text small</b><br/>
<b>Bold and</b> regular weights
</p>
</div>
<div class="text text--xsmall">
<p>
<b>Text extra small</b><br/>
<b>Bold and</b> regular weights
</p>
</div>
</div>
<div class="grid__col grid__col--xs-20 grid__col--md-12 grid__col--left-gutter-xs-2 grid__col--right-gutter-xs-2 grid__col--bottom-gutter-xs-2">
<div class="text">
<blockquote>
VKG väärtused esindavad parimal viisil meie vaimsust ja energiat, aidates meil seada sihte ning juhtides meie otsuseid, tegevusi ja suhtlusviise. Väärtused väljendavad ideaale, mille poole igapäevaselt pürgime.
</blockquote>
</div>
</div>
<div class="grid__col grid__col--xs-20 grid__col--md-12 grid__col--left-gutter-xs-2 grid__col--right-gutter-xs-2 grid__col--bottom-gutter-xs-2">
<div class="text">
<blockquote class="small">
<p class="author">Ahti Asmann</p>
<p class="title">Kontserni juhatuse esimees</p>
</blockquote>
</div>
</div>
</div>
<div class="grid">
<div class="grid__col grid__col--xs-20 grid__col--md-8 grid__col--left-gutter-xs-2 grid__col--right-gutter-xs-2 grid__col--bottom-gutter-xs-2">
<div class="text">
<p>Ordered list</p>
<ol>
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
<li>ordered list item</li>
</ol>
</div>
</div>
<div class="grid__col grid__col--xs-20 grid__col--md-8 grid__col--left-gutter-xs-2 grid__col--right-gutter-xs-2 grid__col--bottom-gutter-xs-2">
<div class="text">
<p>Unordered list</p>
<ul>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
</ul>
</div>
</div>
</div>
<div class="grid">
<div class="grid__col grid__col--xs-20 grid__col--md-8 grid__col--left-gutter-xs-2 grid__col--right-gutter-xs-2 grid__col--bottom-gutter-xs-2">
<div class="text">
<p>Unordered list with arrow icons</p>
<ul class="list list--arrow">
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
</ul>
</div>
</div>
<div class="grid__col grid__col--xs-20 grid__col--md-8 grid__col--left-gutter-xs-2 grid__col--right-gutter-xs-2 grid__col--bottom-gutter-xs-2">
<div class="text">
<p>Unordered list with pdf icons</p>
<ul class="list list--pdf">
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
</ul>
</div>
</div>
</div>
<div class="grid">
<div class="grid__col grid__col--xs-20 grid__col--md-20 grid__col--left-gutter-xs-2 grid__col--right-gutter-xs-2 grid__col--bottom-gutter-xs-2">
<div class="text">
<p>Colors</p>
</div>
<div class="grid">
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #000000"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-black<br/> #000000
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #333333"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-grey-1<br/> #333333
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #505050"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-grey-2<br/> #505050
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #666666"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-grey-3<br/> #666666
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #999999"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-grey-4<br/> #999999
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #cccccc"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-grey-5<br/> #cccccc
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #eeeeee"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-grey-6<br/> #eeeeee
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #f6f6f6"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-grey-7<br/> #f6f6f6
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #ffffff"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-white<br/> #ffffff
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #33b13f"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-main-green<br/> #33b13f
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #0e9037"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-dark-green<br/> #0e9037
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #f68b1f"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-orange<br/> #f68b1f
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #f6eee4"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-light-orange<br/> #f6eee4
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #fffcf1"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-light-yellow<br/> #fffcf1
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #f2f7eb"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-light-green-1<br/> #f2f7eb
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #ebefe5"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-light-green-2<br/> #ebefe5
</p>
</div>
</div>
<div class="grid__col grid__col--xs grid__col--bottom-gutter-xs-1 grid__col--right-gutter-xs-1">
<div class="color-box" style="background: #eff3f6"></div>
<div class="text text--xsmall">
<p style="white-space: nowrap">
color-light-blue<br/> #eff3f6
</p>
</div>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"colors": [
{
"class": "color-black",
"hex": "#000000"
},
{
"class": "color-grey-1",
"hex": "#333333"
},
{
"class": "color-grey-2",
"hex": "#505050"
},
{
"class": "color-grey-3",
"hex": "#666666"
},
{
"class": "color-grey-4",
"hex": "#999999"
},
{
"class": "color-grey-5",
"hex": "#cccccc"
},
{
"class": "color-grey-6",
"hex": "#eeeeee"
},
{
"class": "color-grey-7",
"hex": "#f6f6f6"
},
{
"class": "color-white",
"hex": "#ffffff"
},
{
"class": "color-main-green",
"hex": "#33b13f"
},
{
"class": "color-dark-green",
"hex": "#0e9037"
},
{
"class": "color-orange",
"hex": "#f68b1f"
},
{
"class": "color-light-orange",
"hex": "#f6eee4"
},
{
"class": "color-light-yellow",
"hex": "#fffcf1"
},
{
"class": "color-light-green-1",
"hex": "#f2f7eb"
},
{
"class": "color-light-green-2",
"hex": "#ebefe5"
},
{
"class": "color-light-blue",
"hex": "#eff3f6"
}
]
}