The Kickstand UI gallery component is a a horizontal scrolling component. This is incredibly useful on mobile to help reduce the vertical height of dense pages.
The gallery component is designed to work well on both desktop and mobile. The scrolling behavior can be triggered using the arrow buttons above as well as with standard scrolling behavior on track pads, scroll wheels, and swiping.
<ks-gallery heading="Costume Contest" item-width="250px"> <ks-card img-src="/images/demo/costumes/lady_gaga.jpg" alt="Gabe dressed as Lady Gaga"> <h3>Lady Gaga</h3> </ks-card> <ks-card img-src="/images/demo/costumes/black_widow.jpg" alt="Merideth dressed as Black Widow"> <h3>Black Widow</h3> </ks-card> <ks-card img-src="/images/demo/costumes/dwight_joker.jpg" alt="Dwight dressed as The Joker"> <h3>The Joker</h3> </ks-card> <ks-card img-src="/images/demo/costumes/dracula.jpg" alt="Darrel dressed as Dracula"> <h3>Dracula</h3> </ks-card> <ks-card img-src="/images/demo/costumes/nancy_reagan.jpg" alt="Angela dressed as Nancy Reagan"> <h3>Nancy Reagan</h3> </ks-card> </ks-gallery>
You can control the hading text above the gallery using the
heading property. If you would like the heading to link to another page, you can do so by adding the URL to the
<ks-gallery heading="Costume Contest" src="/pages/all-costumes"> ... </ks-gallery>
gutter property is used to control the distance between the gallery items. The available options consist of
xxxl and correlate with the spacing design tokens. The default gutter size is
<ks-gallery gutter="xxl"> ... </ks-gallery>
# Item Width
item-width property is used to make the width of each of the gallery items consistent in one easy place. You always have the option of setting it in CSS, but not all developers and content creators have access to the CSS files.
<ks-gallery item-width="250px"> ... </ks-gallery>
| || ||controls the space between gallery items|| |
| || ||The heading displayed above the gallery items|| |
| || ||the width of the gallery items|| |