Uihub

Appearance

Layouts ​

Usage ​

See design usage guidelines

A dashboard layout example with preview


Content goes here

html
<div class="layout dashboard preview">
  <aside title="Sidebar">
    <p>Sidebar goes here</p>
  </aside>
  <main title="Main Body">
    <p>Content goes here</p>
  </main>
</div>

Collapse the aside at any point in time. collapse-sm, collapse-md, collapse-lg, collapse-xlg representing the viewport 579px, 768px, 900px and 1200px respectively. Remove it by adding no-aside

NB: Don't worry, you can bring it back by toggling the show-aside class

html
<div class="layout dashboard preview collapse-lg show-aside">
  <aside title="Sidebar">
    <p>Sidebar goes here</p>
  </aside>
  <main title="Main Body">
    <p>Content goes here</p>
  </main>
</div>

Flex ​

html
<div class="layout flex">
  <p>Sidebar goes here</p>
  <p>Content goes here</p>
</div>

Grid ​

html
<div class="layout grid">
  <p>Sidebar goes here</p>
  <p>Content goes here</p>
</div>

Customisation ​

css
.layout {
  --aside-width: 16rem;
  --max-aside-width: 50%;
  --aside-background-color: #ffffff;
  --aside-collapse-background-color: #ffffff;
  --aside-collapse-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

Usage Guidelines ​