With Sidebar
Place two containers side by side. The main content (data-grow) has a min size and will grow, the aside content (data-aside) a target size. If there is no more space for the min size, it will wrap.
Link to section titled: Component
Component
With Sidebar
- html<!-- COMPONENT-START: nc-with-sidebar -->
<div class="nc-with-sidebar">
<aside class="example-block" data-aside>Aside</aside>
<main class="example-block" data-grow>Main</main>
</div>
<!-- COMPONENT-END: nc-with-sidebar --> Link to section titled: Usage notes
Usage notes
- Use it for standard image text sections or sidebar navigations.
Link to section titled: Modifiers
Modifiers
- data-direction=rtl
- Flip the main and aside content.
- -centered
- Align the content horizontally centered.
- -tiny
- Sets gap to --spacing-tiny
- -nearest
- Sets gap to --spacing-nearest
- -near
- Sets gap to --spacing-near
- -base
- Sets gap to --spacing-base
- -far
- Sets gap to --spacing-far
- -farthest
- Sets gap to --spacing-farthest
- -nogap
- Sets gap to 0
Link to section titled: CSS Variables
CSS Variables
- --with-sidebar-gap
- Set the gap between the main and aside content. Defaults to --spacing-far
- --with-sidebar-target-width
- Control the target size of the aside. Defaults to
20rem - --with-sidebar-min-size
- Control the min size of the main. Defaults to
50%