Table of contents 🍭

Foundation / Tokens

• Breakpoint
• Color
• Typography

Components

• Avatar
• Button
• Card product
• Form
• Label
• Link
• Message

Breakpoint

Color

Typography

<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>

Avatar

<img src="..." class="tb-avatar">
<img src="..." class="tb-avatar -small">
<img src="..." class="tb-avatar -tiny">

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>

<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>

Card Product

usernamelongggg

ออนไลน์เมื่อ 2 ชั่วโมงที่แล้ว

 1,690

บริการออกแบบโลโก้ที่แฝงด้วยความหมาย บริการออกแบบโลโก้ที่แฝงด้วยความหมาย

4.9(39)

Pro

เริ่มต้น

Rp1,000,000

<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>

Form

Text input

<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>

Textarea

<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>

Radio

<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>

Checkbox

<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>

Label

<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>

Link

<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>

Message

<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>