@fastwork/turbine
Version:
Turbine UI
750 lines (715 loc) • 34.1 kB
HTML
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Kanit:300,400,500,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/fontawesome-pro-5.5.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.min.css">
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/theme.css">
<link rel="stylesheet" href="dist/layout.css">
<link rel="stylesheet" href="dist/component.css">
<link rel="stylesheet" href="dist/utility.css">
<style>
section {
padding: 64px 24px;
background-color: white;
border-bottom: 1px solid var(--color-gray-200);
}
body {
display: flex;
justify-content: center;
background-image: url(assets/banner3.jpg);
background-size: 100%, 300px;
background-position: top center;
background-repeat: no-repeat;
background-color: #0e1a1d;
backface-visibility: hidden;
}
.panel {
width: 100%;
max-width: 1200px;
margin: 10rem 0 6rem 0;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.16);
}
</style>
</head>
<body>
<div class="panel">
<section class="_tal-ct _pdt-64px _pdbt-128px">
<!-- <img src="assets/turbine-spinning-linear.svg" alt="Turbine UI" width="100" draggable="false"> -->
<br>
<br>
<br>
<h1>Turbine@2.0.0 – Draft 1</h1>
<br>
<code>https://unpkg.com/@fastwork/turbine/dist/turbine.css</code>
<br>
<br>
<code>yarn add @fastwork/turbine</code>
<br>
<br>
<a href="https://www.npmjs.com/package/@fastwork/turbine">
<img src="https://badge.fury.io/js/%40fastwork%2Fturbine.svg" alt="npm version" target="_blank" height="18">
</a>
<a href="https://bundlephobia.com/result?p=@fastwork/turbine">
<img src="https://badgen.net/bundlephobia/minzip/@fastwork/turbine" alt="bundle size" target="_blank" height="18">
</a>
<br>
<br>
<br>
<!-- <strong>dependencies</strong>
<br>
<code>fontawesome-pro@latest</code> -->
</section>
<section>
<h3>Table of contents 🍭</h3>
<br>
<br>
<h5>Foundation / Tokens</h5>
<ul class="_lh-paragraph">
<li><a href="#token-breakpoint" class="tb-link -primary">Breakpoint</a></li>
<li><a href="#token-color" class="tb-link -primary">Color</a></li>
<li><a href="#token-typography" class="tb-link -primary">Typography</a></li>
</ul>
<h5>Components</h5>
<ul class="_lh-paragraph">
<li><a href="#component-avatar" class="tb-link -primary">Avatar</a></li>
<li><a href="#component-button" class="tb-link -primary">Button</a></li>
<li><a href="#component-card-product" class="tb-link -primary">Card product</a></li>
<li><a href="#component-form" class="tb-link -primary">Form</a></li>
<li><a href="#component-label" class="tb-link -primary">Label</a></li>
<li><a href="#component-link" class="tb-link -primary">Link</a></li>
<li><a href="#component-message" class="tb-link -primary">Message</a></li>
</ul>
</section>
<!--
Tokens
===================================-->
<section id="token-breakpoint">
<h3>Breakpoint</h3>
<br>
<div class="tb-table-container">
<table class="tb-table -ruled">
<thead>
<tr>
<th>Token</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">breakpoint-xs</span></td>
<td>768px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">breakpoint-sm</span></td>
<td>1024px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">breakpoint-md</span></td>
<td>1280px</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="token-color">
<h3>Color</h3>
<br>
<div class="lo-12 _gg-16px">
<div class="lo-6 lo-3-sm _gg-24px _fw-strong">
<div class="_bdrd-16px _ovf-hd _alit-st">
<div class="_bgcl-primary-500 _h-64px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">Primary</div>
<div class="_bgcl-primary-900 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">primary-900</div>
<div class="_bgcl-primary-800 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">primary-800</div>
<div class="_bgcl-primary-700 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">primary-700</div>
<div class="_bgcl-primary-600 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">primary-600</div>
<div class="_bgcl-primary-500 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">primary-500</div>
<div class="_bgcl-primary-400 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">primary-400</div>
<div class="_bgcl-primary-300 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">primary-300</div>
<div class="_bgcl-primary-200 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">primary-200</div>
<div class="_bgcl-primary-100 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">primary-100</div>
</div>
<div class="_bdrd-16px _ovf-hd">
<div class="_bgcl-gray-500 _h-64px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">Gray</div>
<div class="_bgcl-gray-900 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">gray-900</div>
<div class="_bgcl-gray-800 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">gray-800</div>
<div class="_bgcl-gray-700 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">gray-700</div>
<div class="_bgcl-gray-600 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">gray-600</div>
<div class="_bgcl-gray-500 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">gray-500</div>
<div class="_bgcl-gray-400 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">gray-400</div>
<div class="_bgcl-gray-300 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">gray-300</div>
<div class="_bgcl-gray-200 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">gray-200</div>
<div class="_bgcl-gray-100 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">gray-100</div>
</div>
<div>
<div class="_bgcl-golden-poppy _h-64px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">golden-poppy</div>
<div class="_bgcl-dark-cerulean _h-64px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">dark-cerulean</div>
<div class="_bgcl-bittersweet _h-64px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">bittersweet</div>
<div class="_bgcl-facebook _h-64px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">facebook</div>
</div>
</div>
<div class="lo-6 lo-3-sm _gg-24px _fw-strong">
<div class="_bdrd-16px _ovf-hd">
<div class="_bgcl-positive-500 _h-64px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">Positive</div>
<div class="_bgcl-positive-900 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">positive-900</div>
<div class="_bgcl-positive-800 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">positive-800</div>
<div class="_bgcl-positive-700 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">positive-700</div>
<div class="_bgcl-positive-600 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">positive-600</div>
<div class="_bgcl-positive-500 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">positive-500</div>
<div class="_bgcl-positive-400 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">positive-400</div>
<div class="_bgcl-positive-300 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">positive-300</div>
<div class="_bgcl-positive-200 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">positive-200</div>
<div class="_bgcl-positive-100 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">positive-100</div>
</div>
<div class="_bdrd-16px _ovf-hd">
<div class="_bgcl-negative-500 _h-64px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">Negative</div>
<div class="_bgcl-negative-900 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">negative-900</div>
<div class="_bgcl-negative-800 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">negative-800</div>
<div class="_bgcl-negative-700 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">negative-700</div>
<div class="_bgcl-negative-600 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">negative-600</div>
<div class="_bgcl-negative-500 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">negative-500</div>
<div class="_bgcl-negative-400 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">negative-400</div>
<div class="_bgcl-negative-300 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">negative-300</div>
<div class="_bgcl-negative-200 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">negative-200</div>
<div class="_bgcl-negative-100 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">negative-100</div>
</div>
<div class="_bdrd-16px _ovf-hd">
<div class="_bgcl-warning-500 _h-64px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">Warning</div>
<div class="_bgcl-warning-900 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">warning-900</div>
<div class="_bgcl-warning-800 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">warning-800</div>
<div class="_bgcl-warning-700 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">warning-700</div>
<div class="_bgcl-warning-600 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">warning-600</div>
<div class="_bgcl-warning-500 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">warning-500</div>
<div class="_bgcl-warning-400 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">warning-400</div>
<div class="_bgcl-warning-300 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">warning-300</div>
<div class="_bgcl-warning-200 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">warning-200</div>
<div class="_bgcl-warning-100 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">warning-100</div>
</div>
<div class="_bdrd-16px _ovf-hd">
<div class="_bgcl-info-500 _h-64px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">Info</div>
<div class="_bgcl-info-900 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">info-900</div>
<div class="_bgcl-info-800 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">info-800</div>
<div class="_bgcl-info-700 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">info-700</div>
<div class="_bgcl-info-600 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">info-600</div>
<div class="_bgcl-info-500 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">info-500</div>
<div class="_bgcl-info-400 _h-48px _pdh-12px _tal-r _cl-light u-valign-center u-halign-right _fw-600">info-400</div>
<div class="_bgcl-info-300 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">info-300</div>
<div class="_bgcl-info-200 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">info-200</div>
<div class="_bgcl-info-100 _h-48px _pdh-12px _tal-r u-valign-center u-halign-right _fw-600">info-100</div>
</div>
</div>
</div>
</section>
<section id="token-typography">
<h3>Typography</h3>
<br>
<div class="tb-table-container">
<table class="tb-table -ruled">
<thead>
<tr>
<th>Token</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-1200</span></td>
<td>48px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-1100</span></td>
<td>40px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-1000</span></td>
<td>36px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-900</span></td>
<td>32px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-800</span></td>
<td>28px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-700</span></td>
<td>24px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-600</span></td>
<td>20px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-500</span></td>
<td>18px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-400</span></td>
<td>16px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-300</span></td>
<td>14px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-200</span></td>
<td>12px</td>
</tr>
<tr>
<td><span class="_bgcl-primary-100 _pdv-4px _pdh-8px _bdrd-2px">font-size-100</span></td>
<td>11px</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="lo-12 _gg-24px">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p class="paragraph-big _pd-16px _bgcl-primary-100 _cl-primary-700">
<strong>Paragraph big</strong><br><br>
ปัจจุบัน Fastwork.co มี freelance คุณภาพที่คัดเฉพาะกว่า 7,500 คน มีหมวดหมู่งานทั้งหมดกว่า 70 หมวดหมู่ ผ่านการจ้างงานมาแล้วกว่า 150,000 งาน มีการบริการผู้ว่าจ้างและ freelance อย่างครบวงจร ตอบโจทย์เจ้าของกิจการ, ธุรกิจ SME, แม่ค้าออนไลน์ หรือแม้แต่บุคคลทั่วไป ที่ต้องการหา freelance ดี ๆ มีคุณภาพ มาช่วยให้งานสำเร็จตามต้องการ การันตีงานคุณภาพโดยทีมงานมืออาชีพ ที่ได้รับความไว้วางใจจากลูกค้ากว่า 300,000 ราย
</p>
<p class="_pd-16px _bgcl-primary-100 _cl-primary-700">
<strong>Paragraph default</strong><br><br>
ปัจจุบัน Fastwork.co มี freelance คุณภาพที่คัดเฉพาะกว่า 7,500 คน มีหมวดหมู่งานทั้งหมดกว่า 70 หมวดหมู่ ผ่านการจ้างงานมาแล้วกว่า 150,000 งาน มีการบริการผู้ว่าจ้างและ freelance อย่างครบวงจร ตอบโจทย์เจ้าของกิจการ, ธุรกิจ SME, แม่ค้าออนไลน์ หรือแม้แต่บุคคลทั่วไป ที่ต้องการหา freelance ดี ๆ มีคุณภาพ มาช่วยให้งานสำเร็จตามต้องการ การันตีงานคุณภาพโดยทีมงานมืออาชีพ ที่ได้รับความไว้วางใจจากลูกค้ากว่า 300,000 ราย
</p>
<p class="paragraph-small _pd-16px _bgcl-primary-100 _cl-primary-700">
<strong>Paragraph small</strong><br><br>
ปัจจุบัน Fastwork.co มี freelance คุณภาพที่คัดเฉพาะกว่า 7,500 คน มีหมวดหมู่งานทั้งหมดกว่า 70 หมวดหมู่ ผ่านการจ้างงานมาแล้วกว่า 150,000 งาน มีการบริการผู้ว่าจ้างและ freelance อย่างครบวงจร ตอบโจทย์เจ้าของกิจการ, ธุรกิจ SME, แม่ค้าออนไลน์ หรือแม้แต่บุคคลทั่วไป ที่ต้องการหา freelance ดี ๆ มีคุณภาพ มาช่วยให้งานสำเร็จตามต้องการ การันตีงานคุณภาพโดยทีมงานมืออาชีพ ที่ได้รับความไว้วางใจจากลูกค้ากว่า 300,000 ราย
</p>
</div>
<pre><code class="language-html"><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p class="paragraph-big">
...
</p>
<p>
...
</p>
<p class="paragraph-small">
...
</p>
</code></pre>
</section>
<!--
Component
===================================-->
<section id="component-avatar">
<h3>Avatar</h3>
<br>
<div class="_dp-g _gatf-cl _alit-ct _jtfct-st _gg-12px">
<img src="https://storage.googleapis.com/fastwork-static/fdc8f43b-b9ab-449f-a4d6-e266a3bfa2ff.jpg" alt="avatar" class="tb-avatar">
<img src="https://storage.googleapis.com/fastwork-static/fdc8f43b-b9ab-449f-a4d6-e266a3bfa2ff.jpg" alt="avatar" class="tb-avatar -small">
<img src="https://storage.googleapis.com/fastwork-static/fdc8f43b-b9ab-449f-a4d6-e266a3bfa2ff.jpg" alt="avatar" class="tb-avatar -tiny">
</div>
<pre><code class="language-html"><img src="..." class="tb-avatar">
<img src="..." class="tb-avatar -small">
<img src="..." class="tb-avatar -tiny">
</code></pre>
</section>
<section id="component-button">
<h3>Button</h3>
<br>
<div class="lo-12 _gg-12px">
<div class="_dp-g _gatf-cl _alit-ct _jtfct-st _gg-12px">
<button class="tb-button -white -small">Button</button>
<button class="tb-button -white -secondary">Button</button>
<button class="tb-button -small">Button</button>
<button class="tb-button">Button</button>
<button class="tb-button -big">Button</button>
<button class="tb-button -loading">Button</button>
<button class="tb-button -disabled" disabled>Button</button>
<button class="tb-button -loading -disabled" disabled>Button</button>
</div>
<div class="_dp-g _gatf-cl _alit-ct _jtfct-st _gg-12px">
<button class="tb-button -secondary -small">Button</button>
<button class="tb-button -secondary">Button</button>
<button class="tb-button -secondary -big">Button</button>
<button class="tb-button -secondary -loading">Button</button>
<button class="tb-button -secondary -disabled" disabled>Button</button>
<button class="tb-button -secondary -loading -disabled" disabled>Button</button>
</div>
<div class="_dp-g _gatf-cl _alit-ct _jtfct-st _gg-12px">
<button class="tb-button -positive">Button</button>
<button class="tb-button -negative">Button</button>
<button class="tb-button -secondary -positive">Button</button>
<button class="tb-button -secondary -negative">Button</button>
</div>
</div>
<pre><code class="language-html"><button class="tb-button -small">Button</button>
<button class="tb-button">Button</button>
<button class="tb-button -big">Button</button>
<button class="tb-button -loading">Button</button>
<button class="tb-button -disabled" disabled>Button</button>
<button class="tb-button -loading -disabled" disabled>Button</button>
<button class="tb-button -secondary -small">Button</button>
<button class="tb-button -secondary">Button</button>
<button class="tb-button -secondary -big">Button</button>
<button class="tb-button -secondary -loading">Button</button>
<button class="tb-button -secondary -disabled" disabled>Button</button>
<button class="tb-button -secondary -loading -disabled" disabled>Button</button>
<button class="tb-button -positive">Button</button>
<button class="tb-button -negative">Button</button>
<button class="tb-button -secondary -positive">Button</button>
<button class="tb-button -secondary -negative">Button</button>
</code></pre>
</section>
<section id="component-card-product">
<h3>Card Product</h3>
<br>
<div class="_dp-g _gatf-cl">
<div class="tb-card-product">
<div class="slot-avatar">
<img src="https://storage.googleapis.com/fastwork-static/fdc8f43b-b9ab-449f-a4d6-e266a3bfa2ff.jpg" alt="Avatar" class="tb-avatar -small">
</div>
<div class="slot-seller-name">usernamelongggg</div>
<div class="slot-online">ออนไลน์เมื่อ 2 ชั่วโมงที่แล้ว</div>
<div class="slot-favorite"><i class="fal fa-heart"></i> 1,690</div>
<div class="slot-image"><img src="https://storage.googleapis.com/fastwork-static/ab6109a8-b54d-42d3-b355-b55c2f27680d.jpg" alt="Image"></div>
<div class="slot-title">บริการออกแบบโลโก้ที่แฝงด้วยความหมาย บริการออกแบบโลโก้ที่แฝงด้วยความหมาย</div>
<div class="slot-rating">
<small class="_dp-g _gatf-cl">
<i class="fas fa-star _cl-golden-poppy"></i>
<i class="fas fa-star _cl-golden-poppy"></i>
<i class="fas fa-star _cl-golden-poppy"></i>
<i class="fas fa-star _cl-golden-poppy"></i>
<i class="fas fa-star _cl-gray-300"></i>
</small>
<div class="_cl-mute _mgt-4px">
4.9(39)
</div>
</div>
<div class="slot-label">
<span class="tb-label -dark-cerulean">
Pro
</span>
</div>
<div class="slot-price">
<div class="_cl-mute _fs-200">เริ่มต้น</div>
<div class="_cl-primary-500">Rp1,000,000</div>
</div>
</div>
</div>
<pre><code class="language-html"><div class="tb-card-product">
<div class="slot-avatar">
<img src="..." alt="Avatar" class="tb-avatar -small">
</div>
<div class="slot-seller-name">usernamelonggg</div>
<div class="slot-online">ออนไลน์เมื่อ 2 ชั่วโมงที่แล้ว</div>
<div class="slot-favorite"><i class="fal fa-heart"></i> 1,690</div>
<div class="slot-image">
<img src="..." alt="Image">
</div>
<div class="slot-title">บริการออกแบบโลโก้ที่แฝงด้วยความหมาย</div>
<div class="slot-rating">
<!-- Example of rating slot -->
<small class="_dp-g _gatf-cl">
<i class="fas fa-star _cl-golden-poppy"></i>
<i class="fas fa-star _cl-golden-poppy"></i>
<i class="fas fa-star _cl-golden-poppy"></i>
<i class="fas fa-star _cl-golden-poppy"></i>
<i class="fas fa-star _cl-gray-300"></i>
</small>
<div class="_cl-mute _mgt-4px">
4.9(39)
</div>
</div>
<div class="slot-label">
<div class="tb-label">
Pro
</div>
</div>
<div class="slot-price">
<!-- Example of price slot -->
<div class="_cl-mute _fs-200">เริ่มต้น</div>
<div class="_cl-primary-500">Rp12,000,000</div>
</div>
</div></code></pre>
</section>
<section id="component-form">
<h3>Form</h3>
<br>
<h4>Text input</h4>
<br>
<div class="lo-12 _gg-24px" style="max-width: 400px;">
<div class="tb-field">
<label for="input1">Username</label>
<div class="tb-input -has-icon-right">
<input id="input1" placeholder="Enter text">
<div class="icon -is-right">
<i class="fas fa-search"></i>
</div>
</div>
<small class="_cl-mute">คำอธิบาย 1234</small>
</div>
<div class="tb-field -disabled">
<div class="tb-input">
<input placeholder="Disabled" disabled>
</div>
</div>
<div class="tb-field -negative">
<div class="tb-input">
<input placeholder="Negative" value="Error">
</div>
</div>
<div class="tb-field -positive">
<div class="tb-input">
<input placeholder="Positive" value="Look good">
</div>
</div>
<div class="tb-field -big">
<div class="tb-input">
<input placeholder="Big!!">
</div>
</div>
<div class="tb-field -small">
<div class="tb-input">
<input placeholder="Small">
</div>
</div>
</div>
<pre><code class="language-html"><div class="tb-field">
<label for="input-normal">Username</label>
<div class="tb-input">
<input id="input-normal" placeholder="Enter text">
</div>
<small class="_cl-mute">คำอธิบาย 1234</small>
</div>
<div class="tb-field -disabled">
<div class="tb-input">
<input id="input-normal" placeholder="Disabled" disabled>
</div>
</div>
<div class="tb-field -negative">
<div class="tb-input">
<input id="input-normal" placeholder="Negative" value="Error">
</div>
</div>
<div class="tb-field -positive">
<div class="tb-input">
<input id="input-normal" placeholder="Positive" value="Look good">
</div>
</div>
<div class="tb-field -big">
<div class="tb-input">
<input id="input-normal" placeholder="Big!!">
</div>
</div>
<div class="tb-field -small">
<div class="tb-input">
<input id="input-normal" placeholder="Small">
</div>
</div></code></pre>
<br>
<h4>Textarea</h4>
<br>
<div class="lo-12 _gg-24px" style="max-width: 400px;">
<div class="tb-field">
<label for="textarea1">Your detail</label>
<div class="tb-textarea">
<textarea id="textarea1" rows="4" placeholder="Enter detail..."></textarea>
</div>
</div>
<div class="tb-field -disabled">
<div class="tb-textarea">
<textarea id="textarea1" rows="4" placeholder="Disabled textarea..." disabled></textarea>
</div>
</div>
</div>
<pre><code class="language-html"><div class="tb-field">
<label for="textarea1">Your detail</label>
<div class="tb-textarea">
<textarea id="textarea1" rows="4" placeholder="Enter detail..."></textarea>
</div>
</div>
<div class="tb-field -disabled">
<div class="tb-textarea">
<textarea id="textarea1" rows="4" placeholder="Disabled textarea..." disabled></textarea>
</div>
</div></code></pre>
<br>
<h4>Radio</h4>
<br>
<div class="lo-12 _gg-24px" style="max-width: 400px;">
<div class="tb-field">
<div class="tb-radio">
<input type="radio" name="rg1" id="r1">
<label for="r1">Radio 1</label>
</div>
<div class="tb-radio">
<input type="radio" name="rg1" id="r2">
<label for="r2">Radio 2</label>
</div>
<div class="tb-radio">
<input type="radio" name="rg1" id="r3">
<label for="r3">Radio 3</label>
</div>
</div>
<div class="tb-field -disabled">
<div class="tb-radio">
<input type="radio" name="rg1" id="r4" disabled>
<label for="r4">Radio 1</label>
</div>
<div class="tb-radio">
<input type="radio" name="rg1" id="r5" disabled>
<label for="r5">Radio 2</label>
</div>
</div>
</div>
<pre><code class="language-html"><div class="tb-field">
<div class="tb-radio">
<input type="radio" name="rg1" id="r1">
<label for="r1">Radio 1</label>
</div>
<div class="tb-radio">
<input type="radio" name="rg1" id="r2">
<label for="r2">Radio 2</label>
</div>
<div class="tb-radio">
<input type="radio" name="rg1" id="r3">
<label for="r3">Radio 3</label>
</div>
</div>
<div class="tb-field -disabled">
<div class="tb-radio">
<input type="radio" name="rg1" id="r4" disabled>
<label for="r4">Radio 1</label>
</div>
<div class="tb-radio">
<input type="radio" name="rg1" id="r5" disabled>
<label for="r5">Radio 2</label>
</div>
</div></code></pre>
<h4>Checkbox</h4>
<br>
<div class="lo-12 _gg-24px" style="max-width: 400px;">
<div class="tb-field">
<div class="tb-checkbox">
<input type="checkbox" name="rg1" id="c1">
<label for="c1">Checkbox 1</label>
</div>
<div class="tb-checkbox">
<input type="checkbox" name="rg1" id="c2">
<label for="c2">Checkbox 2</label>
</div>
<div class="tb-checkbox">
<input type="checkbox" name="rg1" id="c3">
<label for="c3">Checkbox 3</label>
</div>
</div>
<div class="tb-field -disabled">
<div class="tb-checkbox">
<input type="checkbox" name="rg1" id="c4" disabled>
<label for="c4">Checkbox 1</label>
</div>
<div class="tb-checkbox">
<input type="checkbox" name="rg1" id="c5" disabled>
<label for="c5">Checkbox 2</label>
</div>
</div>
</div>
<pre><code class="language-html"><div class="tb-field">
<div class="tb-checkbox">
<input type="checkbox" name="rg1" id="c1">
<label for="c1">Checkbox 1</label>
</div>
<div class="tb-checkbox">
<input type="checkbox" name="rg1" id="c2">
<label for="c2">Checkbox 2</label>
</div>
<div class="tb-checkbox">
<input type="checkbox" name="rg1" id="c3">
<label for="c3">Checkbox 3</label>
</div>
</div>
<div class="tb-field -disabled">
<div class="tb-checkbox">
<input type="checkbox" name="rg1" id="c4" disabled>
<label for="c4">Checkbox 1</label>
</div>
<div class="tb-checkbox">
<input type="checkbox" name="rg1" id="c5" disabled>
<label for="c5">Checkbox 2</label>
</div>
</div></code></pre>
</section>
<section id="component-label">
<h3>Label</h3>
<br>
<div class="_dp-g _gatf-cl _alit-ct _jtfct-st _gg-12px">
<span class="tb-label -dark-cerulean">Dark cerulean</span>
<span class="tb-label -bittersweet">Bittersweet</span>
<span class="tb-label -positive">Positive</span>
<span class="tb-label -negative">Negative</span>
<span class="tb-label -golden-poppy">Goldenpoppy</span>
</div>
<pre><code class="language-html"><span class="tb-label -dark-cerulean">Dark cerulean</span>
<span class="tb-label -bittersweet">Bittersweet</span>
<span class="tb-label -positive">Positive</span>
<span class="tb-label -negative">Negative</span>
<span class="tb-label -golden-poppy">Goldenpoppy</span>
</code></pre>
</section>
<section id="component-link">
<h3>Link</h3>
<br>
<div class="lo-12 _gg-12px _jtfit-st">
<a href="#" class="tb-link">This is a link</a>
<a href="#" class="tb-link -primary">This is a link</a>
<a href="#" class="tb-link -primary -fancy">This is a link</a>
</div>
<pre><code class="language-html"><a href="#" class="tb-link">This is a link</a>
<a href="#" class="tb-link -primary">This is a link</a>
<a href="#" class="tb-link -primary -fancy">This is a link</a>
</code></pre>
</section>
<section id="component-message">
<h3>Message</h3>
<br>
<div class="lo-12 _gg-12px">
<div class="tb-message">
Hello. this is message content
</div>
<div class="tb-message -negative">
<strong>ERROR</strong> – Something gone wrong
</div>
<div class="tb-message -positive">
<strong>Success</strong> – You did good!
</div>
<div class="tb-message -warning">
<strong>Warning</strong> – Don't touch it
</div>
<div class="tb-message -info">
<strong>Info</strong> – This is a good information
</div>
</div>
<pre><code class="language-html"><div class="tb-message">
Hello. this is message content
</div>
<div class="tb-message -negative">
<strong>ERROR</strong> – Something gone wrong
</div>
<div class="tb-message -positive">
<strong>Success</strong> – You did good!
</div>
<div class="tb-message -warning">
<strong>Warning</strong> – Don't touch it
</div>
<div class="tb-message -info">
<strong>Info</strong> – This is a good information
</div></code></pre>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script>
</body>
</html>