2021-02-05 15:48:38 +03:00
|
|
|
<section class="gh-canvas">
|
|
|
|
<GhCanvasHeader class="gh-canvas-header">
|
|
|
|
<h2 class="gh-canvas-title" data-test-screen-title>
|
|
|
|
Components
|
|
|
|
</h2>
|
|
|
|
</GhCanvasHeader>
|
|
|
|
|
2021-02-08 23:16:41 +03:00
|
|
|
<section class="view-container gh-ds">
|
2021-02-05 15:48:38 +03:00
|
|
|
<h2 class="">Buttons</h2>
|
|
|
|
<ul class="nostyle">
|
2022-02-02 19:09:43 +03:00
|
|
|
<li><button class="gh-btn gh-btn-primary" type="button"><span>Primary button</span></button></li>
|
|
|
|
<li><button class="gh-btn" type="button"><span>Regular button</span></button></li>
|
|
|
|
<li><button class="gh-btn gh-btn-blue" type="button"><span>Blue button</span></button></li>
|
|
|
|
<li><button class="gh-btn gh-btn-green" type="button"><span>Green button</span></button></li>
|
|
|
|
<li><button class="gh-btn gh-btn-red" type="button"><span>Red button</span></button></li>
|
|
|
|
<li><button class="gh-btn gh-btn-outline" type="button"><span>Outline button</span></button></li>
|
|
|
|
<li><button class="gh-btn gh-btn-primary gh-btn-large" type="button"><span>Large button</span></button></li>
|
2021-02-05 15:48:38 +03:00
|
|
|
</ul>
|
|
|
|
|
|
|
|
<h2 class="">Lists</h2>
|
|
|
|
|
|
|
|
<div class="gh-list">
|
|
|
|
<div class="gh-list-row header">
|
|
|
|
<div class="gh-list-header">Column 1</div>
|
|
|
|
<div class="gh-list-header">Column 2</div>
|
|
|
|
<div class="gh-list-header">Column 3</div>
|
|
|
|
</div>
|
|
|
|
<div class="gh-list-row">
|
|
|
|
<div class="gh-list-data">
|
|
|
|
<h3>Data</h3>
|
|
|
|
</div>
|
|
|
|
<div class="gh-list-data">
|
|
|
|
<span>Data</span>
|
|
|
|
</div>
|
|
|
|
<div class="gh-list-data">
|
|
|
|
<span>Data</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="gh-list-row">
|
|
|
|
<div class="gh-list-data">
|
|
|
|
<h3>Data</h3>
|
|
|
|
</div>
|
|
|
|
<div class="gh-list-data">
|
|
|
|
<span>Data</span>
|
|
|
|
</div>
|
|
|
|
<div class="gh-list-data">
|
|
|
|
<span>Data</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="gh-list-row">
|
|
|
|
<div class="gh-list-data">
|
|
|
|
<h3>Data</h3>
|
|
|
|
</div>
|
|
|
|
<div class="gh-list-data">
|
|
|
|
<span>Data</span>
|
|
|
|
</div>
|
|
|
|
<div class="gh-list-data">
|
|
|
|
<span>Data</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2021-02-16 20:12:24 +03:00
|
|
|
<h2 class="mt8">Sections</h2>
|
|
|
|
|
|
|
|
<section class="gh-main-section">
|
|
|
|
<h4 class="gh-main-section-header small bn">Single column</h4>
|
|
|
|
<div class="gh-main-section-block">
|
|
|
|
<div class="gh-main-section-content">
|
|
|
|
<div>Column 1</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<section class="gh-main-section">
|
|
|
|
<h4 class="gh-main-section-header small bn">Section heading</h4>
|
|
|
|
<div class="gh-main-section-block">
|
|
|
|
<div class="gh-main-section-content columns-2">
|
|
|
|
<div>Column 1</div>
|
|
|
|
<div>Column 2</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<section class="gh-main-section columns-2">
|
|
|
|
<div class="gh-main-section-block">
|
|
|
|
<h4 class="gh-main-section-header small bn">Block 1</h4>
|
|
|
|
<div class="gh-main-section-content grey">Contents</div>
|
|
|
|
</div>
|
|
|
|
<div class="gh-main-section-block">
|
|
|
|
<h4 class="gh-main-section-header small bn">Block 2</h4>
|
|
|
|
<div class="gh-main-section-content grey">Contents</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
2021-02-10 15:00:07 +03:00
|
|
|
<h2 class="mt8">Setting area</h2>
|
|
|
|
|
|
|
|
<div class="gh-main-section">
|
2021-02-16 20:12:24 +03:00
|
|
|
<h4 class="gh-main-section-header small bn">Section heading</h4>
|
2021-02-10 15:00:07 +03:00
|
|
|
<div class="gh-expandable">
|
|
|
|
<div class="gh-expandable-block">
|
|
|
|
<div class="gh-expandable-header">
|
|
|
|
<div>
|
|
|
|
<h4 class="gh-expandable-title">Title</h4>
|
|
|
|
<p class="gh-expandable-description">Description</p>
|
|
|
|
</div>
|
|
|
|
<div>[ACTION]</div>
|
|
|
|
</div>
|
|
|
|
<div>[CONTENT - OPTIONAL / HIDDEN FOR EXPANDABLE]</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="gh-expandable-block">
|
|
|
|
<div class="gh-expandable-header">
|
|
|
|
<div>
|
|
|
|
<h4 class="gh-expandable-title">Title</h4>
|
|
|
|
<p class="gh-expandable-description">Description</p>
|
|
|
|
</div>
|
|
|
|
<div>[ACTION]</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="gh-expandable-block">
|
|
|
|
<div class="gh-expandable-header">
|
|
|
|
<div>
|
|
|
|
<h4 class="gh-expandable-title">Title</h4>
|
|
|
|
<p class="gh-expandable-description">Description</p>
|
|
|
|
</div>
|
|
|
|
<div>[ACTION]</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2021-02-05 15:48:38 +03:00
|
|
|
</section>
|
|
|
|
</section>
|