Layout Examples
This page showcases the layout components available in the Casoon UI Library. These components help structure and organize content on your pages.
Grid system
The grid system allows you to create responsive layouts with rows and columns.
Basic Grid
html
<div class="grid">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>Column 1
Column 2
Column 3
Grid with Column Sizes
html
<div class="grid">
<div class="col-4">4 units</div>
<div class="col-8">8 units</div>
</div>4 units
8 units
Responsive Grid
html
<div class="grid">
<div class="col-12 col-md-6 col-lg-4">Responsive Column</div>
<div class="col-12 col-md-6 col-lg-4">Responsive Column</div>
<div class="col-12 col-md-12 col-lg-4">Responsive Column</div>
</div>Responsive Column
Responsive Column
Responsive Column
Container
Containers center your content horizontally and apply padding.
Basic Container
html
<div class="container">
<p>This content is in a container</p>
</div>This content is in a container
Fluid Container
html
<div class="container-fluid">
<p>This content is in a fluid container</p>
</div>This content is in a fluid container
Header
The header component is used for the top section of your page.
html
<header class="header">
<div class="header-logo">Logo</div>
<nav class="header-nav">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<div class="header-actions">
<button class="button primary small">Login</button>
</div>
</header>Logo
Footer
The footer component is used for the bottom section of your page.
html
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h4>About</h4>
<p>Company information</p>
</div>
<div class="footer-section">
<h4>Links</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Contact</h4>
<p>info@example.com</p>
<p>+1 234 567 890</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 Company Name. All rights reserved.</p>
</div>
</footer>Sidebar
The sidebar component is used for side navigation.
html
<div class="sidebar">
<div class="sidebar-header">
<h3>Dashboard</h3>
</div>
<nav class="sidebar-nav">
<a href="#" class="sidebar-item active">
<span class="sidebar-icon">📊</span>
<span>Dashboard</span>
</a>
<a href="#" class="sidebar-item">
<span class="sidebar-icon">👤</span>
<span>Profile</span>
</a>
<a href="#" class="sidebar-item">
<span class="sidebar-icon">⚙️</span>
<span>Settings</span>
</a>
<a href="#" class="sidebar-item">
<span class="sidebar-icon">📝</span>
<span>Reports</span>
</a>
</nav>
</div>Table
Tables are used to display data in a structured format.
html
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>Admin</td>
<td>
<button class="button small">Edit</button>
<button class="button small danger">Delete</button>
</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>User</td>
<td>
<button class="button small">Edit</button>
<button class="button small danger">Delete</button>
</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>bob@example.com</td>
<td>User</td>
<td>
<button class="button small">Edit</button>
<button class="button small danger">Delete</button>
</td>
</tr>
</tbody>
</table>| Name | Role | Actions | |
|---|---|---|---|
| John Doe | john@example.com | Admin | |
| Jane Smith | jane@example.com | User | |
| Bob Johnson | bob@example.com | User |
Tabs
Tabs allow you to organize content into different sections.
html
<div class="tabs">
<div class="tabs-nav">
<button class="tabs-nav-item active">Tab 1</button>
<button class="tabs-nav-item">Tab 2</button>
<button class="tabs-nav-item">Tab 3</button>
</div>
<div class="tabs-content">
<div class="tabs-panel active">
<p>Content for Tab 1</p>
</div>
<div class="tabs-panel">
<p>Content for Tab 2</p>
</div>
<div class="tabs-panel">
<p>Content for Tab 3</p>
</div>
</div>
</div>Content for Tab 1