Layout
Container
The '.container' class defines the main grid layout of the application. By default, it includes only the 'main' area.
Adding the '.with-sidebar' class enables a two-column layout, including a 'sidebar' and 'main' region.
Use '.with-header' to add the navigation bar to the layout.
On screens 1199px or smaller, the '.sidebar' becomes an overlay (fixed position) that is hidden by default and can be toggled by adding the '.show' class.
On screens 1199px or smaller, the '.sidebar' becomes an overlay (fixed position) that is hidden by default and can be toggled by adding the '.show' class.
<div class="container with-header with-sidebar">
<div class="header">header</div>
<div class="sidebar">sidebar</div>
<div class="main">main</div>
</div>
Example without navigation:
<div class="container with-sidebar">
<div class="sidebar">sidebar</div>
<div class="main">main</div>
</div>
To change the width of the sidebar, you need to update the with of '.sidebar':
.container .sidebar {
width: 20rem;
}
The '.sidebar-right' is a specialized sidebar for the '.container' layout.
Unlike '.sidebar', it is hidden by default, and only appears when the '.show' class is added.
It is also positioned on the right side.
<div class="container">
<div class="main">main</div>
<div class="sidebar-right show">sidebar-right show</div>
</div>
To customize its width:
.main .sidebar-right {
width: 40rem;
}Main
The '.main' class can be used to create a nested grid layout.
It supports '.main-header', '.main-content', '.main-footer', and '.main-sidebar' (on the right side).
Use '.with-header', '.with-footer', and '.with-sidebar' classes on '.main' to enable these areas.
On screens 1199px or smaller, the '.main-sidebar' becomes an overlay (fixed position) that is hidden by default and can be toggled by adding the '.show' class.
On screens 1199px or smaller, the '.main-sidebar' becomes an overlay (fixed position) that is hidden by default and can be toggled by adding the '.show' class.
<div class="main with-header with-footer with-sidebar">
<div class="main-header">main-header</div>
<div class="main-content">main-content</div>
<div class="main-sidebar">main-sidebar</div>
<div class="main-footer">main-footer</div>
</div>
To change the width of the main sidebar, you need to update the width of '.main-sidebar':
.main .main-sidebar {
width: 40rem;
}
The '.main-footer' supports the same button system as '.modal-footer'.
You can use '.left', '.center', '.right', and '.stretch' to align buttons.
The '.margin-left' and '.margin-right' classes can be used on children to push adjacent elements.
<div class="main-footer bg-grey-300">
<button class="primary">Primary</button>
<button>Secondary 1</button>
<button>Secondary 2</button>
</div>
<div class="main-footer bg-grey-300 left">
<button class="primary">Primary</button>
<button>Secondary</button>
</div>
<div class="main-footer bg-grey-300 center">
<button class="primary">Primary</button>
<button>Secondary</button>
</div>
<div class="main-footer bg-grey-300 right">
<button class="primary">Primary</button>
<button>Secondary</button>
</div>
<div class="main-footer bg-grey-300 stretch">
<button class="primary">Primary</button>
<button>Secondary</button>
</div>
<div class="main-footer bg-grey-300">
<button class="primary">Primary</button>
<div class="spacer"></div>
<button>Secondary 1</button>
<button>Secondary 2</button>
</div>Main States
main success
State modifiers for '.main' allow adding internal borders for visual feedback.
<div class="main success">main success</div>
<div class="main warning">main warning</div>
<div class="main error">main error</div>
Use 'sticky' to hold the Navigation on top of the viewport.
Default behavior is fixed to the top of the viewport.
Default behavior is fixed to the top of the viewport.
<div class="nav">
<div class="toggle active">
<span class="icon-menu"></span>
</div>
<div class="module">module</div>
<div class="title">title</div>
<div class="col-auto right">
<div class="searchbox">
<input placeholder="Suchen..." name="SearchTerm" class="form-input">
</div>
</div>
<div class="user-toggle bg-primary">
<span class="">GL</span>
</div>
</div>
'toggle hidden' is used to hide the navigation toggle button.
<div class="nav">
<div class="toggle hidden">
<span class="icon-menu"></span>
</div>
</div><div id="full-menu" class="full-menu active">
<div class="menu-items">
<div class="menu-title">menu-title</div>
<a class="menu-item active" href="/">menu-item active</a>
<a class="menu-item" href="/">menu-item</a>
</div>
<div class="menu-items">
<div class="menu-title">menu-title</div>
<a class="menu-item" href="/">menu-item</a>
</div>
<div class="menu-items">
<div class="menu-title">menu-title</div>
<a class="menu-item" href="/">menu-item</a>
</div>
<div class="menu-items">
<div class="menu-title">menu-title</div>
<a class="menu-item" href="/">menu-item</a>
</div>
</div><div class="side-menu active">
<div class="menu-items">
<div class="menu-title">menu-title</div>
<a class="menu-item" href="/"><i class="icon-smile"></i>menu-item</a>
<a class="menu-title" href="/"><i class="icon-laugh"></i>menu-title</a>
</div>
</div>
<div class="side-menu monochrome active">
<div class="menu-items">
<div class="menu-title">menu-title</div>
<a class="menu-item" href="/"><i class="icon-smile"></i>menu-item</a>
<a class="menu-title" href="/"><i class="icon-laugh"></i>menu-title</a>
</div>
</div><div id="user-menu" class="user-menu active">
<div class="menu-items">
<a class="menu-item active" href="/">menu-item active</a>
<a class="menu-item" href="/">menu-item</a>
</div>
</div>List
Simple List
col-2 col-3-md
col-auto
col-2 col-3-md
col-auto
col-2 col-3-md
col-auto
col-2 col-3-md
col-auto
<div class="table">
<div class="row header">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row footer">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
</div>Paging
1
2
1
2
<div class="row paging">
<div class="col-25"><i class="icon-first"></i></div>
<div class="col-25"><i class="icon-left"></i></div>
<div class="col-25">1</div>
<div class="col-25">2</div>
<div class="col-auto"></div>
<div class="col-25"><i class="icon-right"></i></div>
<div class="col-25"><i class="icon-last"></i></div>
</div>
<div class="row paging bg-nav-background white-color">
<div class="col-25"><i class="icon-first bg-white"></i></div>
<div class="col-25"><i class="icon-left bg-white"></i></div>
<div class="col-25">1</div>
<div class="col-25">2</div>
<div class="col-auto"></div>
<div class="col-25"><i class="icon-right bg-white"></i></div>
<div class="col-25"><i class="icon-last bg-white"></i></div>
</div>Filtered List
col-12
col-6
col-6
col-2 col-3-md
col-auto
col-2 col-3-md
col-auto
col-2 col-3-md
col-auto
col-2 col-3-md
col-auto
Add the '.sticky' class to '.filter' to make the filter form sticky on scroll.
<div class="filtered-list">
<div class="filter sticky">
<div class="form">
<div class="row">
<div class="col-12">
<div class="form-input">col-12</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-6">
<div class="form-input">col-6</div>
</div>
<div class="col-6">
<div class="form-input">col-6</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="table">
<div class="row header">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row footer">
<div class="col-25 ml-5 center"><i class="icon-first"></i></div>
<div class="col-25 center"><i class="icon-left"></i></div>
<div class="col-25 center">1</div>
<div class="col-25 center">2</div>
<div class="col-auto"></div>
<div class="col-25 center"><i class="icon-right"></i></div>
<div class="col-25 mr-5 center"><i class="icon-last"></i></div>
</div>
</div>
</div>
</div>Filtered List with Detail
col-12
col-12
col-2 col-3-md
col-auto
col-2 col-3-md
col-auto
col-2 col-3-md
col-auto
col-2 col-3-md
col-auto
details
<div class="filtered-list-with-detail">
<div class="filter">
<div class="form">
<div class="row">
<div class="col-12">
<div class="form-input">col-12</div>
</div>
<div class="col-12">
<div class="form-input">col-12</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="table">
<div class="row header">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row">
<div class="col-2 col-3-md">col-2 col-3-md</div>
<div class="col-auto">col-auto</div>
</div>
<div class="row footer">
<div class="col-25 ml-5 center"><i class="icon-first"></i></div>
<div class="col-25 center"><i class="icon-left"></i></div>
<div class="col-25 center">1</div>
<div class="col-25 center">2</div>
<div class="col-auto"></div>
<div class="col-25 center"><i class="icon-right"></i></div>
<div class="col-25 mr-5 center"><i class="icon-last"></i></div>
</div>
</div>
</div>
<div class="details">
details
</div>
</div>Controls
Calendar
05/29/2026
<div class="row">
<div class="col-date middle">
<InputCalendar @bind-Value="TmpDateTime"/>
</div>
</div>Activities
activity-group
01.01.24 01:01 - Test User
activity
01.01.24 01:01 - Test User
activity success
activity-group
01.01.24 01:01 - Test User
activity warning
01.01.24 01:01 - Test User
activity error
<div class="activities">
<div class="tabs small">
<div class="tab full-width">activity-group</div>
<div class="activity-group">
<div class="activity">
<div class="activity-content">
<small> 01.01.24 01:01 - Test User</small>
activity
</div>
<div class="activity-icon">
<i class="icon-activities icon-invert"></i>
</div>
</div>
<div class="activity success">
<div class="activity-content">
<small> 01.01.24 01:01 - Test User</small>
activity success
</div>
<div class="activity-icon">
<i class="icon-todos icon-invert"></i>
</div>
</div>
</div>
</div>
<div class="tabs small">
<div class="tab full-width">activity-group</div>
<div class="activity-group">
<div class="activity warning">
<div class="activity-content">
<small> 01.01.24 01:01 - Test User</small>
activity warning
</div>
<div class="activity-icon">
<i class="icon-settings icon-invert"></i>
</div>
</div>
<div class="activity error">
<div class="activity-content">
<small> 01.01.24 01:01 - Test User</small>
activity error
</div>
<div class="activity-icon">
<i class="icon-bug icon-invert"></i>
</div>
</div>
</div>
</div>
</div>Notifications
Success
Message
Warning
Message
Error
Message
Durations:
countdown-5: 5s
countdown-10: 10s
countdown-20: 20s
countdown-30: 30s
countdown-5: 5s
countdown-10: 10s
countdown-20: 20s
countdown-30: 30s
<div class="notifications">
<div class="notification success">
<div class="notification-body">
<b>Success</b>
Message
</div>
<i class="icon-x hand"></i>
<div class="countdown-bar">
<div class="countdown-5"></div>
</div>
</div>
<div class="notification warning">
<div class="notification-body">
<b>Warning</b>
Message
</div>
<i class="icon-x hand"></i>
<div class="countdown-bar">
<div class="countdown-10"></div>
</div>
</div>
<div class="notification error">
<div class="notification-body">
<b>Error</b>
Message
</div>
<i class="icon-x hand"></i>
<div class="countdown-bar">
<div class="countdown-30"></div>
</div>
</div>
</div>Hints
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
<div class="hint">
<div class="hint-icon">
<i class="icon-activities"></i>
</div>
<div class="hint-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
</div>
<div class="hint success">
<div class="hint-icon">
<i class="icon-todos"></i>
</div>
<div class="hint-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
</div>
<div class="hint warning">
<div class="hint-icon">
<i class="icon-triangle-alert"></i>
</div>
<div class="hint-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
</div>
<div class="hint error">
<div class="hint-icon">
<i class="icon-bug"></i>
</div>
<div class="hint-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
</div>Grid
Simple Grid
col-2
col-4
col-6
<div class="row">
<div class="col-2 bg-blue">col-2</div>
<div class="col-4 bg-cyan">col-4</div>
<div class="col-6 bg-teal">col-6</div>
</div>Fixed Column/Auto Column
col-75
col-150
col-auto
col-10 to col-500 in 5 steps.
<div class="row">
<div class="col-75 bg-blue">col-75</div>
<div class="col-150 bg-cyan">col-150</div>
<div class="col-auto bg-teal">col-auto</div>
</div>Fixed Row Height
height-50
height-75
height-100
height-10 to height-250 in 5 steps.
<div class="row height-50">
<div class="col-12 bg-blue">height-50</div>
</div>
<div class="row height-75">
<div class="col-12 bg-cyan">height-75</div>
</div>
<div class="row height-100">
<div class="col-12 bg-teal">height-100</div>
</div>Endless Row
col-6 bg-blue
col-6 bg-cyan
col-6 bg-teal
no-wrap keeps the content in the same row.
col-auto won't work with endless rows.
col-auto won't work with endless rows.
<div class="row no-wrap overflow-auto pb-10">
<div class="col-6 bg-blue">col-6 bg-blue</div>
<div class="col-6 bg-cyan">col-6 bg-cyan</div>
<div class="col-6 bg-teal">col-6 bg-teal</div>
</div>Align Rows
col-6
col-6
col-6
col-4
col-4
col-4
<div class="row">
<div class="col-6 bg-blue">col-6</div>
</div>
<div class="row center">
<div class="col-6 bg-cyan">col-6</div>
</div>
<div class="row right">
<div class="col-6 bg-teal">col-6</div>
</div>
<div class="row align-rows">
<div class="col-4 top">
<div class="row">
<div class="col-12 bg-blue">col-4</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-12 bg-cyan">col-4</div>
</div>
</div>
<div class="col-4 bottom">
<div class="row">
<div class="col-12 bg-teal">col-4</div>
</div>
</div>
</div>Align Column
col-4 top center
col-4 middle left
col-4 bottom right
'left', 'center' and 'right' horizontal alignments are automatically aligned vertically to the middle.
<div class="row height-100">
<div class="col-4 top center bg-blue">col-4 top center</div>
<div class="col-4 middle left bg-cyan">col-4 middle left</div>
<div class="col-4 bottom right bg-teal">col-4 bottom right</div>
</div>Break Columns
col-auto
col-3
col-6
Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px
lg: 1200px
md: 992px
sm: 768px
xs: 576px
<div class="row">
<div class="col-auto bg-blue">col-auto</div>
<div class="row-break-sm"></div>
<div class="col-3 bg-cyan">col-3</div>
<div class="row-break"></div>
<div class="col-6 bg-teal">col-6</div>
</div>Grid Gap
col-6
col-auto
col-6
col-auto
col-6
col-auto
gap-5: 5rem gap
gap-10: 10rem gap
Warning! gap-5 and gap-10 only work, if there is a col-auto in the row.
gap-10: 10rem gap
Warning! gap-5 and gap-10 only work, if there is a col-auto in the row.
<div class="row gap-10">
<div class="col-6 bg-blue">col-6</div>
<div class="col-auto bg-blue">col-auto</div>
<div class="col-6 bg-cyan">col-6</div>
<div class="col-auto bg-cyan">col-auto</div>
<div class="col-6 bg-teal">col-6</div>
<div class="col-auto bg-teal">col-auto</div>
</div>Hide Columns
col-3 col-6-md
col-3 col-6-md
Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px
lg: 1200px
md: 992px
sm: 768px
xs: 576px
<div class="row">
<div class="col-3 col-6-md bg-blue">col-3 col-6-md</div>
<div class="col-3 col-6-md bg-cyan">col-3 col-6-md</div>
<div class="col-6 col-hide-md bg-teal">col-6 col-hide-md</div>
</div>Margin Columns
col-3 col-mr-2
col-2
col-3 col-ml-2
col-1 col-ml-auto col-mr-3
col-5 col-ml-2
Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px
lg: 1200px
md: 992px
sm: 768px
xs: 576px
<div class="row">
<div class="col-3 bg-blue col-mr-2">col-3 col-mr-2</div>
<div class="col-2 bg-cyan">col-2</div>
<div class="col-3 bg-teal col-ml-2">col-3 col-ml-2</div>
</div>
<div class="row">
<div class="col-1 bg-blue col-ml-auto col-mr-3">col-1 col-ml-auto col-mr-3</div>
<div class="col-5 bg-teal col-ml-2">col-5 col-ml-2</div>
</div>Responsive Columns
col-3 col-12-md
col-auto col-12-md
col-3 col-12-md
Breakpoints:
xxl: 1920px
xl: 1280px
lg: 1024px
md: 768px
sm: 568px
xs: 420px
xxl: 1920px
xl: 1280px
lg: 1024px
md: 768px
sm: 568px
xs: 420px
<div class="row">
<div class="col-3 col-12-md bg-blue">col-3 col-12-md</div>
<div class="col-auto col-12-md bg-cyan">col-auto col-12-md</div>
<div class="col-3 col-12-md bg-teal">col-3 col-12-md</div>
</div>Nested Columns
col-3 col-12-md
col-6 col-12-sm
col-6
col-6
col-12
<div class="row">
<div class="col-3 col-12-md bg-blue">col-3 col-12-md</div>
<div class="col-auto col-hide-md bg-green">col-auto col-hide-md</div>
<div class="col-12">
<div class="row bg-cyan">
<div class="col-6 col-12-sm">col-6 col-12-sm</div>
<div class="col-6 col-12-sm">
<div class="row bg-teal">
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
</div>
</div>
<div class="row bg-blue">
<div class="col-12">col-12</div>
</div>
</div>
</div>Form
Simple Form
Text Input
Number Input
<div class="row">
<div class="col-6 col-12-md">
<div class="form p-5">
<div class="row">
<div class="col-2">Text Input</div>
<div class="col-10"><input type="text" placeholder="Text Input"/></div>
<div class="col-2">Number Input</div>
<div class="col-10"><input type="number" placeholder="Number Input"/></div>
</div>
</div>
</div>
</div>Nested Form
Text Input
Number Input
Text Input
Number Input
<div class="row">
<div class="col-6 col-12-md">
<div class="form p-5 bg-blue">
<div class="row">
<div class="col-2">Text Input</div>
<div class="col-10"><input type="text" placeholder="Text Input"/></div>
<div class="col-2">Number Input</div>
<div class="col-10"><input type="number" placeholder="Number Input"/></div>
<div class="col-12 ">
<div class="row bg-cyan">
<div class="col-2">Text Input</div>
<div class="col-4"><input type="text" placeholder="Text Input"/></div>
<div class="col-2">Number Input</div>
<div class="col-4"><input type="number" placeholder="Number Input"/></div>
</div>
</div>
</div>
</div>
</div>
</div>Table
Simple Table
header
Test
Test
filter sticky
success
active/selected
disabled
<div class="table">
<div class="row header sticky">
<div class="col-2">header</div>
<div class="col-auto">Test</div>
<div class="col-2">Test</div>
</div>
<div class="row filter sticky">
<div class="col-12">filter sticky</div>
</div>
<div class="row">
<div class="col-2"><input type="number"/></div>
<div class="col-auto"><input type="text" placeholder="text"/></div>
<div class="col-2"><input type="number"/></div>
</div>
<div class="row success">
<div class="col-2">success</div>
<div class="col-auto"><input type="text"/></div>
</div>
<div class="row selected">
<div class="col-2">active/selected</div>
<div class="col-auto"><input type="text"/></div>
</div>
<div class="row disabled">
<div class="col-2">disabled</div>
<div class="col-auto"><input type="text"/></div>
</div>
<div class="row footer sticky">
<div class="col-2">footer</div>
<div class="col-auto"></div>
<div class="col-2 text-right"><span class="form-input">0</span></div>
</div>
</div>Colored Table
header
Test
Test
filter sticky
success
active/selected
disabled
Supported colors are
red,
pink,
purple,
deep-purple,
indigo,
blue,
light-blue,
cyan,
teal,
green,
light-green,
lime,
yellow,
amber,
orange,
deep-orange,
brown,
grey and
blue-grey
<div class="table red">
<div class="row header sticky">
<div class="col-2">header</div>
<div class="col-auto">Test</div>
<div class="col-2">Test</div>
</div>
<div class="row filter sticky">
<div class="col-12">filter sticky</div>
</div>
<div class="row">
<div class="col-2"><input type="number"/></div>
<div class="col-auto"><input type="text" placeholder="text"/></div>
<div class="col-2"><input type="number"/></div>
</div>
<div class="row success">
<div class="col-2">success</div>
<div class="col-auto"><input type="text"/></div>
</div>
<div class="row selected">
<div class="col-2">active/selected</div>
<div class="col-auto"><input type="text"/></div>
</div>
<div class="row disabled">
<div class="col-2">disabled</div>
<div class="col-auto"><input type="text"/></div>
</div>
<div class="row footer sticky">
<div class="col-2">footer</div>
<div class="col-auto"></div>
<div class="col-2 text-right"><span class="form-input">0</span></div>
</div>
</div>Modal
Simple Modal
Title
Body
<div class="modal active">
<div class="modal-overlay"></div>
<div class="modal-container">
<div class="modal-header">
<div class="modal-title">Title</div>
<i class="icon-x hand"></i>
</div>
<div class="modal-body">
Body
</div>
<div class="modal-footer">
<button>btn</button>
</div>
</div>
</div>Default
center
left
right
stretch
margin-left/margin-right
<div class="modal-footer">
<button class="primary">Primary</button>
<button>Secondary</button>
</div>
<div class="modal-footer center">
<button class="primary">Primary</button>
<button>Secondary</button>
</div>
<div class="modal-footer left">
<button class="primary">Primary</button>
<button>Secondary</button>
</div>
<div class="modal-footer right">
<button class="primary">Primary</button>
<button>Secondary</button>
</div>
<div class="modal-footer stretch">
<button class="primary">Primary</button>
</div>
<div class="modal-footer">
<button>Secondary 1</button>
<button class="margin-right">Secondary 2</button>
<button class="primary">Primary</button>
</div>
<div class="modal-footer">
<button>Secondary 1</button>
<button>Secondary 2</button>
<button class="primary margin-left">Primary</button>
</div>Modal Sizes
Title
width-50
Default width: 25rem
width-30: 30rem
width-40: 40rem
width-50: 50rem
width-75: 75rem
width-100: 100rem
width-max: 90vw
width-30: 30rem
width-40: 40rem
width-50: 50rem
width-75: 75rem
width-100: 100rem
width-max: 90vw
Title
height-30
Default height: auto
height-30: 30rem
height-40: 40rem
height-50: 50rem
height-75: 75rem
height-100: 100rem
height-max: 90vh
height-30: 30rem
height-40: 40rem
height-50: 50rem
height-75: 75rem
height-100: 100rem
height-max: 90vh
<div class="modal width-50 active">
<div class="modal-overlay"></div>
<div class="modal-container">
<div class="modal-header">
<div class="modal-title">Title</div>
<i class="icon-x hand"></i>
</div>
<div class="modal-body">
width-50
</div>
<div class="modal-footer">
<button>btn</button>
</div>
</div>
</div>
<div class="modal height-30 active">
<div class="modal-overlay"></div>
<div class="modal-container">
<div class="modal-header">
<div class="modal-title">Title</div>
<i class="icon-x hand"></i>
</div>
<div class="modal-body">
height-30
</div>
<div class="modal-footer">
<button>btn</button>
</div>
</div>
</div>Variables
Name
Value
modal-overlay
rgba(0, 0, 0, 0.5)
modal-background
#ffffff
Login
Glue
<div class="container">
<div class="main">
<div class="login width-30">
<div class="login-container">
<div class="login-header">
<div class="row">
<div class="col-12 center">
<div class="logo">
<h2 class="logo">Glue</h2>
</div>
</div>
</div>
</div>
<div class="login-body">
<div class="form">
<div class="row">
<div class="col-12">
<input type="text" class="form-input" placeholder="Username"/>
</div>
<div class="col-12 middle">
<input type="password" class="form-input" placeholder="Password"/>
</div>
</div>
</div>
</div>
<div class="login-footer">
<button class="primary">Login</button>
</div>
</div>
</div>
</div>
</div>Tabs
Simple Tabs
tab active
label
tab
tab
<div class="row p-10">
<div class="tabs">
<div class="tab active">tab active
<div class="label rounded ml-5">label</div>
</div>
<div class="tab">tab</div>
<div class="tab">tab</div>
</div>
</div>Tabs Small
tab active
label
tab
tab
<div class="row p-10">
<div class="tabs small">
<div class="tab active">tab active
<div class="label rounded ml-5">label</div>
</div>
<div class="tab">tab</div>
<div class="tab">tab</div>
</div>
</div>Tabs colors
tab active
label
tab
tab
Supported colors are
red,
pink,
purple,
deep-purple,
indigo,
blue,
light-blue,
cyan,
teal,
green,
light-green,
lime,
yellow,
amber,
orange,
deep-orange,
brown,
grey and
blue-grey
<div class="row p-10">
<div class="col-12 tabs red">
<div class="tab active">tab active
<div class="label rounded bg-red white-color ml-5">label</div>
</div>
<div class="tab">tab</div>
<div class="tab">tab</div>
</div>
</div>Individual Tab colors
tab red
tab blue
tab green
tab orange
<div class="row p-10">
<div class="col-12 tabs red">
<div class="tab red active">tab red</div>
<div class="tab blue">tab blue</div>
<div class="tab green">tab green</div>
<div class="tab orange">tab orange</div>
</div>
</div>
Alternative the Class .btn can be used instead of the HTML Tag button.
<div class="row bg-background pt-10 pr-10 pb-5 pl-10">
<div class="col-12 flex-wrap">
<button class="primary mr-5 mb-5">primary</button>
<button class="mr-5 mb-5">
<i class="icon-print"></i> with Icon
</button>
<button class="primary spinner mr-5 mb-5">primary spinner</button>
<button class="success mr-5 mb-5">success</button>
<button class="warning mr-5 mb-5">warning</button>
<button class="danger mr-5 mb-5">error</button>
<button class="error mr-5 mb-5">error</button>
<button class="transparent mr-5 mb-5">transparent</button>
<button class="disabled mr-5 mb-5">disabled</button>
<button class="btn-small mr-5 mb-5">btn-small</button>
<button class="btn-large mb-5">btn-large</button>
</div>
</div>Labels
label
label small
label rounded
label primary
label default
label success
label warning
label error
label bug
label priority-1
label priority-2
label priority-3
label priority-4
label disabled
<div class="row bg-background pt-10 pr-10 pb-5 pl-10">
<div class="col-12 flex-wrap">
<div class="label mr-5 mb-5">label</div>
<div class="label small mr-5 mb-5">label small</div>
<div class="label rounded mr-5 mb-5">label rounded</div>
<div class="label primary mr-5 mb-5">label primary</div>
<div class="label default mr-5 mb-5">label default</div>
<div class="label success mr-5 mb-5">label success</div>
<div class="label warning mr-5 mb-5">label warning</div>
<div class="label error mr-5 mb-5">label error</div>
<div class="label bug mr-5 mb-5">label bug</div>
<div class="label priority-1 mr-5 mb-5">label priority-1</div>
<div class="label priority-2 mr-5 mb-5">label priority-2</div>
<div class="label priority-3 mr-5 mb-5">label priority-3</div>
<div class="label priority-4 mr-5 mb-5">label priority-4</div>
<div class="label primary disabled mr-5 mb-5">label disabled</div>
</div>
</div>Switches
form-Switch
form-Switch active
<div class="row bg-background p-10">
<div class="col-6 middle">
<i class="form-switch"></i> form-Switch
</div>
<div class="col-6 middle">
<i class="form-switch active"></i> form-Switch active
</div>
</div>Utilities
Margins
m-0 to m-25 in 5 steps.
<div class="m-10">m-10 (margin)</div>
<div class="ml-10">ml-10 (margin-left)</div>
<div class="mr-10">mr-10 (margin-right)</div>
<div class="mt-10">mt-10 (margin-top)</div>
<div class="mb-10">mb-10 (margin-bottom)</div>Paddings
p-0 to p-50 in 5 steps.
<div class="p-10">p-10 (padding)</div>
<div class="pl-10">pl-10 (padding-left)</div>
<div class="pr-10">pr-10 (padding-right)</div>
<div class="pt-10">pt-10 (padding-top)</div>
<div class="pb-10">pb-10 (padding-bottom)</div>Typography
text-line-through
p-0 to p-50 in 5 steps.
<div class="text-line-through">text-line-through</div>https://glue.rocks/0.4/glue.min.css
Source code licensed MIT.
Website content licensed CC BY-NC-SA 4.0. Hosted in