Reusable Components

Use this for the default layout file.

For pre-login pages that doesn't need sidebar, add classhiddento theaside tag

CheckLoading Screensection.

Use this if logo is provided

Show code

Use this if logo is not provided

Show code

Make sure that the checkboxid=""matches the label'sfor=""for items with sub list.

Show code

Lorem ipsum dolor sit amet consectetur adipisicing elit. A similique quaerat, ipsam sunt deserunt libero officiis? Distinctio, fugit magni. Consectetur corporis corrupti optio quibusdam ex odit voluptatibus praesentium similique omnis provident? Ratione dolor reprehenderit modi deserunt inventore nihil. Eos, fuga.

Show code

Lorem ipsum dolor sit amet consectetur adipisicing elit. A similique quaerat, ipsam sunt deserunt libero officiis? Distinctio, fugit magni. Consectetur corporis corrupti optio quibusdam ex odit voluptatibus praesentium similique omnis provident? Ratione dolor reprehenderit modi deserunt inventore nihil. Eos, fuga.

Show code

Lorem ipsum dolor sit amet consectetur adipisicing elit. A similique quaerat, ipsam sunt deserunt libero officiis? Distinctio, fugit magni. Consectetur corporis corrupti optio quibusdam ex odit voluptatibus praesentium similique omnis provident? Ratione dolor reprehenderit modi deserunt inventore nihil. Eos, fuga.

Show code

Lorem ipsum dolor sit amet consectetur adipisicing elit. A similique quaerat, ipsam sunt deserunt libero officiis? Distinctio, fugit magni. Consectetur corporis corrupti optio quibusdam ex odit voluptatibus praesentium similique omnis provident? Ratione dolor reprehenderit modi deserunt inventore nihil. Eos, fuga.

Show code

The "js-card-toggle" class will toggle the "card--collapse" class to open and close the card

Left

<div class="flex-center-start">
  <button class="button"><i class="fa-solid fa-chevron-left"></i>Back</button>
  <button class="button">Next<i class="fa-solid fa-chevron-right"></i></button>
</div>

Right

<div class="flex-center-end">
  <button class="button"><i class="fa-solid fa-chevron-left"></i>Back</button>
  <button class="button">Next<i class="fa-solid fa-chevron-right"></i></button>
</div>

Center

<div class="flex-center-center">
  <button class="button"><i class="fa-solid fa-chevron-left"></i>Back</button>
  <button class="button">Next<i class="fa-solid fa-chevron-right"></i></button>
</div>

Between

<div class="flex-center-between">
  <button class="button"><i class="fa-solid fa-chevron-left"></i>Back</button>
  <button class="button">Next<i class="fa-solid fa-chevron-right"></i></button>
</div>

Between (Multiple elements)

Accordion Title

This is the content

Accordion Title 2

This is the content

Accordion Title 3

This is the content

Accordion Title 4

This is the content

Show code

Class to be used	Output
text-5xl	This text is 48px.
text-4xl	This text is 36px.
text-3xl	This text is 30px.
text-2xl	This text is 24px.
text-xl	This text is 20px.
text-lg	This text is 18px.
text-base	This text is 16px.
text-sm	This text is 14px.
text-xs	This text is 12px.
font-normal	Normal
font-medium	Medium
font-bold	Bold
truncate	Add ellipsis (one line). Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, soluta!
line-clamp-2	Add ellipsis after two lines. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, soluta!

For contents that are from API or rich-text editor, you can use this to apply default styling to typography

<div class="prose">{{ Content Here }}</div>

Sample Link

<a href="#" class="link">Sample Link</a>

Sample Link with Underline

<a href="#" class="link link--underlined">Sample Link with Underline</a>

CheckButtonssection for more button classes

This is a link

<a href="#" class="button">This is a link</a>

If no width is set alongside .image-container class, it will stretch to 100% width.

See more Tailwindcss width classes

Using object-fit: contain

<div class="image-container w-1/2">
  <img src="{{ img source }}" alt="{{ img description }}">
</div>

Using object-fit: cover

<div class="image-container image-container--cover w-1/2">
  <img src="{{ img source }}" alt="{{ img description }}">
</div>

No border

<div class="image-container w-1/2 !border-0">
  <img src="{{ img source }}" alt="{{ img description }}">
</div>

Form Input*

This is a sample form note.

Form Password

This is a sample form validation error.

Form Disabled and Has max-width

You can add max-width classes to any form inputs excluding checkboxes and radio buttons.

Form DateTime Picker

`js-datetimepicker` class is used in javascript

Form Date Picker

`js-datepicker` class is used in javascript

Form Time Picker

`js-timepicker` class is used in javascript

Form Checkbox

Option 1

Option 2

Option 3

Option Disabled

Form Radio

Option 1

Option 2

Option 3

Option Disabled

Form Select

Form Textarea

You can control height of textarea using the `rows` attribute

Form File

`js-upload-button` class is used in javascript

Choose File

Form File (Multiple)

`js-upload-button` class is used in javascript

Choose Files

Form File (Image Upload with Preview)

`js-upload-preview` class is used in javascript

Upload Filesor Drag and Drop

Show code

Form Input*	This is a sample form note.
Form Password	This is a sample form validation error.
Form Disabled and Has max-width	You can add max-width classes to any form inputs excluding checkboxes and radio buttons.
Form DateTime Picker	`js-datetimepicker` class is used in javascript
Form Date Picker	`js-datepicker` class is used in javascript	Form Time Picker	`js-timepicker` class is used in javascript
Form Checkbox	Option 1 Option 2 Option 3 Option Disabled
Form Radio	Option 1 Option 2 Option 3 Option Disabled
Form Select (Disabled)
Form Textarea (Disabled)	You can control height of textarea using the `rows` attribute
Form File	`js-upload-button` class is used in javascript Choose File
Form File (Multiple)	`js-upload-button` class is used in javascript Choose Files
Form File (Image Upload with Preview)	`js-upload-preview` class is used in javascript Upload Filesor Drag and Drop

Show code

Primary	`<button class="button">Button</button>`
Blue	`<button class="button button--blue">Button</button>`
Red	`<button class="button button--red">Button</button>`
Light	`<button class="button button--light">Button</button>`
Dark	`<button class="button button--dark">Button</button>`
Outline	`<button class="button button--outline">Button</button>`
Small	`<button class="button button--sm">Button</button>`
Disabled	`<button class="button" disabled="disabled">Button</button>`
Disabled (via class)	`<button class="button button--disabled">Button</button>`
With icons	`<div class="flex-center-start"> <button class="button"><i class="fa-solid fa-chevron-left"></i>Back</button> <button class="button">Next<i class="fa-solid fa-chevron-right"></i></button> </div>` You can check Containersection for common layouts

First Name

Juan

Last Name

Dela Cruz

Age

30

Gender

Male

Address

A Mabini St. Poblacion, Makati City

About

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint dignissimos deleniti libero delectus et hic ad, aliquid optio, iste corrupti voluptatum adipisci accusantium officiis neque! Neque alias, aut voluptatum repudiandae deleniti facilis deserunt, libero ut, est incidunt officiis. Rerum.

Multiple Values

Lorem ipsum dolor sit amet.

Multiple Values (Inline)

Lorem ipsum

Dolor sit

amet

Lorem ipsum dolor sit amet.

Files

Sample.pdf

Sample.png

qwertyasdfghzxcvbnmqwertyasdfghzxcvbnmqwertyasdfghzxcvbnmqwertyasdfghzxcvbnm.jpg

Images with preview

ed9859a31bdaad70774bfeca8f81c5a0.jpg

garden-peonies.jpg

lotus-in-vietnam.jpg

Cancel

Show code

First Name	Juan	Last Name	Dela Cruz
Age	30	Gender	Male
Address	A Mabini St. Poblacion, Makati City
About	Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint dignissimos deleniti libero delectus et hic ad, aliquid optio, iste corrupti voluptatum adipisci accusantium officiis neque! Neque alias, aut voluptatum repudiandae deleniti facilis deserunt, libero ut, est incidunt officiis. Rerum.
Multiple Values	Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Multiple Values (Inline)	Lorem ipsum Dolor sit amet Lorem ipsum dolor sit amet.
Files	Sample.pdf Sample.png qwertyasdfghzxcvbnmqwertyasdfghzxcvbnmqwertyasdfghzxcvbnmqwertyasdfghzxcvbnm.jpg
Images with preview	ed9859a31bdaad70774bfeca8f81c5a0.jpg garden-peonies.jpg lotus-in-vietnam.jpg

Show code

Modal (Default)

Modal (Small)

Modal (Large)

Show code for modal design (Default)

Show code for modal design (Small)

Show code for modal design (Large)

Show code for toggling modal

When using class method for opening modal, add"js-open-modal"class to the button and supply the id of the target modal in the"data-modal"attribute.
When using class method for closing modal, add"js-close-modal"class to the element.

When using js method for opening modal, use the"openModal(modalID)"function and pass the id of the target modal in the modalId parameter.
When using js method for closing modal, use the"closeModal(modalID)"function and pass the id of the target modal in the modalId parameter.

Default - Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus explicabo officia molestiae harum unde ratione et amet libero sequi necessitatibus.

Success - Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus explicabo officia molestiae harum unde ratione et amet libero sequi necessitatibus.

Error - Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus explicabo officia molestiae harum unde ratione et amet libero sequi necessitatibus.

Show code

All toasts will close after 5s.

Default

Success

Error

Show code

Show code for toggling toast

When opening modal, use the"openToast(toastId)"function and pass the id of the target toast in the toastId parameter.

Fixed

Header 1	Header 2	Header 3	Header 4
Data 1	Data 2	Data 3	Data 4
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, ipsum.	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, ipsum.	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, ipsum.	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, ipsum.
Data (Centered)	Data (Centered)	Data (Centered)	Data (Centered)

Prev
1
2
3
4
5
6
7
8
9
10
Next

Show code

With Scroll

Header 1	Header 2	Header 3	Header 4
Data 1	Data 2	Data 3	Data 4
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, ipsum.	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, ipsum.	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, ipsum.	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, ipsum.
Data (Centered)	Data (Centered)	Data (Centered)	Data (Centered)

Prev
1
2
3
4
5
6
7
8
9
10
Next

Show code

This loading screen will automatically close after 5s.

To open loading screen, use the functionshowLoadingScreen()

To hide loading screen, use the functionhideLoadingScreen()

Layout

Header

Show code

Show code

Sidebar

Show code

Footer

Card (Default)

Show code

Card (Medium)

Show code

Card (Small)

Show code

Card (Toggle)

Show code

Containers

Left

Right

Center

Between

Between (Multiple elements)

Accordion

Accordion Title

Accordion Title 2

Accordion Title 3

Accordion Title 4

Show code

Typography

Links

Image and Image Containers

Form Layout v.1

Show code

Form Layout v.2

Show code

Buttons

Details Layout v.1

Show code

Details Layout v.2

Show code

Modals

Modal (Default)

Modal (Small)

Modal (Large)

Show code for modal design (Default)

Show code for modal design (Small)

Show code for modal design (Large)

Show code for toggling modal

Modal Title

Modal Title

Modal Title

Flash messages

Show code

Toasts

Default

Success

Error

Show code

Show code for toggling toast

Tables and Pagination

Fixed

Show code

With Scroll

Show code

Loading Screen

Show code

Modal Title

Modal Title

Modal Title