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


Buttons

Primary button

 <button type="button" class="btn bc-c-btn-primary">Primary</button> 

 <button type="button" class="btn bc-c-btn-primary" disabled>Primary</button> 

 <button type="button" class="btn bc-c-btn-primary--outline">Primary outline</button> 

 <button type="button" class="btn bc-c-btn-primary--outline" disabled>Primary outline</button> 

 <button type="button" class="btn bc-c-btn-primary--ghost">Primary ghost</button> 

 <button type="button" class="btn bc-c-btn-primary--ghost" disabled>Primary ghost</button> 
Primary link
 <a href="" class="btn bc-c-btn-primary--link">Primary link</a> 
Primary link
 <a href="" class="btn bc-c-btn-primary--link bc-is-link--disabled">Primary link</a> 

 <button type="button" class="btn bc-c-btn-primary bc-c-btn--only-icon"> <img src="/assets/icon/standard/Search.svg" alt="" class="bc-c-icon--white"> </button> 
Secondary button


 <button type="button" class="btn bc-c-btn-secondary">Secondary</button> 

 <button type="button" class="btn bc-c-btn-secondary" disabled>Secondary</button> 

 <button type="button" class="btn bc-c-btn-secondary--outline">Secondary outline</button> 

 <button type="button" class="btn bc-c-btn-secondary--outline" disabled>Secondary outline</button> 

 <button type="button" class="btn bc-c-btn-secondary--ghost">Secondary ghost</button> 

 <button type="button" class="btn bc-c-btn-secondary--ghost" disabled>Secondary ghost</button> 
Secondary link
 <a href="" class="btn bc-c-btn-secondary--link">Secondary link</a> 
Secondary link
 <a href="" class="btn bc-c-btn-secondary--link bc-is-link--disabled">Secondary link</a> 

 <button type="button" class="btn bc-c-btn-secondary bc-c-btn--only-icon"> <img src="/assets/icon/standard/Search.svg" alt="" class="bc-c-icon--white"> </button> 

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

Navigation


Step 1
Step 2
Step 3
Step 4
Step 5