Style sheet Guidelines
Color scheme
Primary
#003185
Default
class="bc-u-bg--primary-100"
#4066b9
75%
class="bc-u-bg--primary-75"
#BACBF0
50%
class="bc-u-bg--primary-50"
#E8EBFC
25%
class="bc-u-bg--primary-25"
#F5F8FF
5%
class="bc-u-bg--primary-5"
Secondary
#FCAF17
Default
class="bc-u-bg--secondary-100"
#FFCD67
50%
class="bc-u-bg--secondary-50"
#FFE5B0
25%
class="bc-u-bg--secondary-25"
#FFF8EB
5%
class="bc-u-bg--secondary-5"
Care
#5A9468
Default
class="bc-u-bg--care-100"
#90C79D
50%
class="bc-u-bg--care-50"
#CBE1DB
25%
class="bc-u-bg--care-25"
#EEF8F0
5%
class="bc-u-bg--care-5"
Semantic
Positive
#1FAE86
Default
class="bc-u-bg--positive-100"
#91E2B4
50%
class="bc-u-bg--positive-50"
#C6F2D9
25%
class="bc-u-bg--positive-25"
#E6F5ED
5%
class="bc-u-bg--positive-5"
Negative
#EF4444
Default
class="bc-u-bg--negative-100"
#FF7171
50%
class="bc-u-bg--negative-50"
#FBC8C8
25%
class="bc-u-bg--negative-25"
#FEE2E2
5%
class="bc-u-bg--negative-5"
Warning
#FFC400
Default
class="bc-u-bg--warning-100"
#FFD340
50%
class="bc-u-bg--warning-50"
#FFE5A7
25%
class="bc-u-bg--warning-25"
#FEEFCD
5%
class="bc-u-bg--warning-5"
Text
#232323
Headline/Subtitle/Boby
class="bc-u-bg--black-100"
#454249
Detail
class="bc-u-bg--black-50"
#8D8D94
Caption/Overline
class="bc-u-bg--black-25"
#B3B5C0
Placeholder/Disable
class="bc-u-bg--black-5"
#285FD8
Link
class="bc-u-bg--link"
Theme
#FFFFFF
Container
class="bc-u-bg--white"
#E0E3EB
Caption/Overline
class="bc-u-bg--theme-2"
#F3F3F3
Disable
class="bc-u-bg--theme-3"
Typography
Headline 1 (หัวข้อ 1)
<h1 class="bc-u-headline-1">Headline 1 (หัวข้อ 1)</h1>
Headline 2 (หัวข้อ 2)
<h2 class="bc-u-headline-2">Headline 2 (หัวข้อ 2)</h2>
Headline 3 (หัวข้อ 3)
<h3 class="bc-u-headline-3">Headline 3 (หัวข้อ 3)</h3>
Headline 4 (หัวข้อ 4)
<h4 class="bc-u-headline-4">Headline 4 (หัวข้อ 4)</h4>
Title 1 (หัวข้อ 1)
<h5 class="bc-u-title-1">Title 1 (หัวข้อ 1)</h5>
Title 2 (หัวข้อ 2)
<h6 class="bc-u-title-2">Title 2 (หัวข้อ 2)</h6>
Body (ทั่วไป)
<p class="bc-u-body--bold">Body (ทั่วไป)</p>
Body (ทั่วไป)
<p class="bc-u-body">Body (ทั่วไป)</p>
Subbody 1 (ตัวรอง 1)
<p class="bc-u-subbody-1--bold">Subbody 1 (ตัวรอง 1)<p>
Subbody 1 (ตัวรอง 1)
<p class="bc-u-subbody-1">Subbody 1 (ตัวรอง 1)</p>
Subbody 2 (ตัวรอง 2)
<p class="bc-u-subbody-2--bold">Subbody 2 (ตัวรอง 2)</p>
Subbody 2 (ตัวรอง 2)
<p class="bc-u-subbody-2">Subbody 2 (ตัวรอง 2)</p>
Subbody 2 smallest (ตัวรอง 2 )
<p class="bc-u-subbody-2--bold">Subbody 2 smallest (ตัวรอง 2 )</p>
Subbody 2 smallest (ตัวรอง 2 )
<p class="bc-u-subbody-2">Subbody 2 smallest (ตัวรอง 2 )</p>
Text color
bc-u-text-color--primary-100
bc-u-text-color--primary-75
bc-u-text-color--primary-50
bc-u-text-color--primary-25
bc-u-text-color--primary-5
bc-u-text-color--secondary-100
bc-u-text-color--secondary-50
bc-u-text-color--secondary-25
bc-u-text-color--secondary-5
bc-u-text-color--care-100
bc-u-text-color--care-50
bc-u-text-color--care-25
bc-u-text-color--care-5
bc-u-text-color--positive-100
bc-u-text-color--positive-50
bc-u-text-color--positive-25
bc-u-text-color--positive-5
bc-u-text-color--negative-100
bc-u-text-color--negative-50
bc-u-text-color--negative-25
bc-u-text-color--negative-5
bc-u-text-color--warning-100
bc-u-text-color--warning-50
bc-u-text-color--warning-25
bc-u-text-color--warning-5
bc-u-text-color--black-100
bc-u-text-color--black-50
bc-u-text-color--black-25
bc-u-text-color--black-5
bc-u-text-color--link
bc-u-text-color--white
bc-u-text-color--theme-2
bc-u-text-color--theme-3
Form
Input Type
<label for="inputText1" class="col-2 col-form-label bc-c-form-label text-end">Input</label> <div class="col-10"> <input type="text" class="form-control bc-c-form-input" id="inputText1" placeholder="Placeholder"> </div>
<label for="inputText2" class="col-2 col-form-label bc-c-form-label text-end">Input with Helper Text</label> <div class="col-10"> <input type="text" class="form-control bc-c-form-input" id="inputText2" placeholder="Placeholder"> </div> <div id="textHelpBlock" class="form-text col-10 offset-2"> Helper Text </div>
<label for="inputText3" class="col-2 col-form-label bc-c-form-label text-end">Dropdown</label> <div class="col-10"> <select class="form-select bc-c-form-select" id="autoSizingSelect"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div>
<label for="inputText4" class="col-2 col-form-label bc-c-form-label text-end">Search</label> <div class="col-10"> <input type="text" class="form-control bc-c-form-input bc-is-icon-search" id="inputText4" placeholder="Search..."> </div>
<label for="inputText5" class="col-2 col-form-label bc-c-form-label text-end">Date Picker</label> <div class="col-10"> <input type="text" class="form-control bc-c-form-input bc-is-icon-calendar" id="inputText5" placeholder="DD/MM/YYYY"> </div>
<label for="inputText6" class="col-2 col-form-label text-end">Text Area</label> <div class="col-10"> <textarea class="form-control bc-c-form-textarea" id="exampleFormControlTextarea1" rows="3" placeholder="Placeholder"> </div>
Form with Label
States
Checkbox and Radio Button
Checkbox with Text
<input class="form-check-input bc-c-form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label bc-c-form-check-label" for="flexCheckDefault"> Default checkbox </label>
Radio Button with Text
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"> <label class="form-check-label" for="flexRadioDefault1"> Default radio </label>