Gallery

Component

Gallery

- html

<!-- COMPONENT-START: nc-gallery -->
<div class="nc-gallery">
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
    <div class="example-block"></div>
</div>
<!-- COMPONENT-END: nc-gallery -->

Link to section titled: Modifiers

Modifiers

-custom-scrollbar: Enable a styled custom scrollbar. See CSS Variables for customization.
-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

--gallery-size: Set the max block size of the gallery. Defaults to auto, so it will take on the size of the largest child.
--gallery-scrollbar-padding: Set the padding at the block end, between the children and the scrollbar. Defaults to --spacing-base.
--gallery-scroll-padding-inline: Set the inline padding, controls the scroll snap position. Defaults to --spacing-base.
--gallery-item-size: Set the target size of the children. Defaults to auto, so each child will have its own size based on its contents.
--gallery-scrollbar-fg: Set the scrollbar foreground color. Defaults to --color-text-on-emphasis.
--gallery-scrollbar-bg: Set the scrollbar background color. Defaults to --color-surface-emphasis.
--gallery-scrollbar-height: Set the scrollbar height. Defaults to --spacing-base.
--gallery-gap: Set the gap bwteen th children. Defaults to --spacing-base.