Slider Card preset

v0.0.0

This page shows examples of displaying Cards in a slider, using the Card preset.

Cards are centered and will loop if there are enough cards to fill the available space. On bigger screens the middle cards align equal to a Container with modifier --column.

The footer is very specific to this preset mode. It can contain a button and always contains the navigation controls. The footer is wrapped by a Container with modifier --column.

This is a preset mode. All other slider options are unavailable when using this preset. Only options described on this page will work. Please regard this as an element on its own.

Enable preset #

To enter the preset mode:

set data-attribute data-slider-card to true
add modifier --card to elements with class .vi-slider__slide
use footer markup from examples.

polaroid occupy
narwhal lo-fi

Pop-up meggings organic tacos aesthetic hammock selfies microdosing authentic street

Pbr&b scenester

synth ennui
wayfarers crucifix

Wayfarers lumbersexual narwhal austin yuccie diy

Xoxo normcore

<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider (mods: ) -->
  <div class="vi-slider" data-slider-card="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
      </div>
    </div>
    <!-- Container (mods: --column, --) -->
    <div class="vi-container vi-container--column vi-container--">
      <div class="vi-slider__footer">
        <div class="vi-slider__trigger">
          <!-- Button type: underline  -->
          <a href="#" class="vi-btn-underline vi-btn">Knausgaard schlitz</a>
        </div>
        <div class="vi-slider__controls">
          <div class="vi-slider__navigation vi-slider__navigation--prev">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
          </div>
          <div class="vi-slider__navigation vi-slider__navigation--next">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

When the total card width does not exceed the width of the slider, it will disable.

crucifix master
church-key butcher

Viral keytar twee cold-pressed organic

Flexitarian venmo

aesthetic austin
everyday yuccie

Forage xoxo ethical flexitarian retro vegan brunch crucifix gentrify banjo

Quinoa cold-pressed

artisan farm-to-table
bespoke dreamcatcher

Slow-carb iphone polaroid lumbersexual literally banjo

Meditation xoxo

[visual alignment test]

<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider (mods: ) -->
  <div class="vi-slider" data-slider-card="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
      </div>
    </div>
    <!-- Container (mods: --column, --) -->
    <div class="vi-container vi-container--column vi-container--">
      <div class="vi-slider__footer">
        <div class="vi-slider__trigger">
          <!-- Button type: underline  -->
          <a href="#" class="vi-btn-underline vi-btn">Cardigan lo-fi</a>
        </div>
        <div class="vi-slider__controls">
          <div class="vi-slider__navigation vi-slider__navigation--prev">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
          </div>
          <div class="vi-slider__navigation vi-slider__navigation--next">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Autoplay #

To enable autoplay:

data-slider-autoplay [milliseconds] when set, starts autoplay of slides.
data-slider-autoplay-inactivity [milliseconds] when set, starts an inactivity timer that makes autoplay enabled if user does not interact with the slider for the given period.
data-slider-direction [rtl*|ltr] sets the slide-direction of the autoplay.

Note that this will only work when no alignment is applied

Aligned #

To align the cards:

set data-attribute data-slider-card-alignment [left|right]
add modifier .vi-slider--left-aligned and .vi-container--slider-left-aligned.
add modifier --left-aligned to element with class .vi-slider.
add modifier --slider-left-aligned to the Container wrapping the footer.

The slider will not loop and de cards will not be centered.

organic chambray
asymmetrical authentic

+1 8-bit selfies pour-over chicharrones

Cornhole seitan

cray hammock
chartreuse offal

Post-ironic freegan butcher vegan synth flexitarian xoxo chillwave kinfolk brooklyn mlkshk

Bespoke post-ironic

yolo normcore
tousled mlkshk

Lumbersexual pitchfork vegan humblebrag yolo

Vinyl ethical

pug gluten-free
dreamcatcher yolo

Pinterest butcher vice truffaut lumbersexual diy celiac knausgaard pabst post-ironic

Hoodie etsy

microdosing tousled
normcore literally

Xoxo twee vegan gluten-free cardigan

90's gluten-free

[visual alignment test]

heirloom pickled
park pabst

Hoodie gentrify hammock freegan meggings

Farm-to-table sriracha

heirloom actually
lomo seitan

Paleo humblebrag sriracha park cold-pressed yolo yuccie sustainable etsy semiotics

Poutine xoxo

roof selfies
pour-over mumblecore

Cleanse listicle brunch crucifix fingerstache

Plaid yr

aesthetic ethical
plaid hammock

Lomo tilde semiotics banjo seitan thundercats hashtag yolo leggings kinfolk beard

Iphone beard

occupy post-ironic
neutra chambray

Intelligentsia authentic ethical pug marfa

Irony sartorial

<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider (mods: --align-left) -->
  <div class="vi-slider vi-slider--align-left" data-slider-card-alignment="left" data-slider-card="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
      </div>
    </div>
    <!-- Container (mods: --column, --slider-align-left) -->
    <div class="vi-container vi-container--column vi-container--slider-align-left">
      <div class="vi-slider__footer">
        <div class="vi-slider__trigger">
          <!-- Button type: underline  -->
          <a href="#" class="vi-btn-underline vi-btn">Cleanse authentic</a>
        </div>
        <div class="vi-slider__controls">
          <div class="vi-slider__navigation vi-slider__navigation--prev">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
          </div>
          <div class="vi-slider__navigation vi-slider__navigation--next">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider (mods: --align-right) -->
  <div class="vi-slider vi-slider--align-right" data-slider-card-alignment="right" data-slider-card="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
      </div>
    </div>
    <!-- Container (mods: --column, --slider-align-right) -->
    <div class="vi-container vi-container--column vi-container--slider-align-right">
      <div class="vi-slider__footer">
        <div class="vi-slider__trigger">
          <!-- Button type: underline  -->
          <a href="#" class="vi-btn-underline vi-btn">Keffiyeh tofu</a>
        </div>
        <div class="vi-slider__controls">
          <div class="vi-slider__navigation vi-slider__navigation--prev">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
          </div>
          <div class="vi-slider__navigation vi-slider__navigation--next">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Centered #

To align the cards:

remove modifier --column from the Container wrapping the footer.

The slider will loop and de cards will fit the --column Container wrapping the whole slider.

bitters chicharrones
loko cronut

Taxidermy beard occupy cold-pressed hoodie typewriter

Pug polaroid

cold-pressed master
everyday etsy

Cliche lo-fi heirloom locavore mlkshk poutine mlkshk helvetica yuccie cleanse vinegar

Quinoa yuccie

diy twee
austin artisan

Phlogiston diy xoxo squid cold-pressed

Vegan tilde

hammock mumblecore
post-ironic vinyl

Cornhole tumblr banjo mumblecore cardigan kogi ennui skateboard mixtape vinegar

Viral sustainable

chia franzen
xoxo sriracha

Semiotics pinterest celiac bitters ramps

Artisan migas

[visual alignment test]

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Wrapped in container for this example -->
  <!-- Slider (mods: ) -->
  <div class="vi-slider" data-slider-card="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
      </div>
    </div>
    <!-- Container (mods: ) -->
    <div class="vi-container">
      <div class="vi-slider__footer">
        <div class="vi-slider__trigger">
          <!-- Button type: underline  -->
          <a href="#" class="vi-btn-underline vi-btn">Yuccie retro</a>
        </div>
        <div class="vi-slider__controls">
          <div class="vi-slider__navigation vi-slider__navigation--prev">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
          </div>
          <div class="vi-slider__navigation vi-slider__navigation--next">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

When cards fit container (unregarding the gap), the slider will disable.

stumptown occupy
semiotics health

Cleanse cliche skateboard typewriter etsy dreamcatcher

Banjo whatever

pitchfork freegan
freegan chicharrones

Flexitarian park marfa humblebrag fingerstache artisan etsy occupy whatever ramps everyday

Yr vegan

lumbersexual bushwick
xoxo freegan

Kogi vice lo-fi taxidermy meggings

Disrupt truffaut

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Wrapped in container for this example -->
  <!-- Slider (mods: ) -->
  <div class="vi-slider" data-slider-card="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
      </div>
    </div>
    <!-- Container (mods: ) -->
    <div class="vi-container">
      <div class="vi-slider__footer">
        <div class="vi-slider__trigger">
          <!-- Button type: underline  -->
          <a href="#" class="vi-btn-underline vi-btn">Literally kinfolk</a>
        </div>
        <div class="vi-slider__controls">
          <div class="vi-slider__navigation vi-slider__navigation--prev">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
          </div>
          <div class="vi-slider__navigation vi-slider__navigation--next">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Less than 3 items align correctly

hella ramps
cliche kitsch

Pitchfork fingerstache kogi keffiyeh freegan

Salvia literally

xoxo tacos
heirloom drinking

Poutine bespoke hammock banjo authentic heirloom +1 chia kickstarter ethical

Paleo kitsch

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Wrapped in container for this example -->
  <!-- Slider (mods: ) -->
  <div class="vi-slider" data-slider-card="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
      </div>
    </div>
    <!-- Container (mods: ) -->
    <div class="vi-container">
      <div class="vi-slider__footer">
        <div class="vi-slider__trigger">
          <!-- Button type: underline  -->
          <a href="#" class="vi-btn-underline vi-btn">Knausgaard vinegar</a>
        </div>
        <div class="vi-slider__controls">
          <div class="vi-slider__navigation vi-slider__navigation--prev">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
          </div>
          <div class="vi-slider__navigation vi-slider__navigation--next">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

With data-slider-loop [true*|false] you can disable the loop mode on the card preset. Note that this will also disable centering of the cards (it can not work without loop), which can be fine when cards are centered by the container.

microdosing yolo
neutra keffiyeh

Intelligentsia ramps kogi forage yolo

Portland mlkshk

locavore meggings
gluten-free quinoa

Hammock vinyl neutra whatever meggings intelligentsia bitters cleanse crucifix plaid typewriter

Williamsburg schlitz

austin cardigan
church-key ennui

Tilde whatever slow-carb butcher asymmetrical shoreditch

90's offal

+1 mustache
disrupt literally

Twee phlogiston pour-over flannel austin fixie pug cray lomo selfies everyday

Plaid plaid

freegan squid
pabst williamsburg

Cold-pressed master salvia retro pinterest

Schlitz offal

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Wrapped in container for this example -->
  <!-- Slider (mods: ) -->
  <div class="vi-slider" data-slider-card="true" data-slider-loop="false">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
        <div class="vi-slider__slide vi-slider__slide--card">
          <!-- Card type: story -->
          ...
        </div>
      </div>
    </div>
    <!-- Container (mods: ) -->
    <div class="vi-container">
      <div class="vi-slider__footer">
        <div class="vi-slider__trigger">
          <!-- Button type: underline  -->
          <a href="#" class="vi-btn-underline vi-btn">Taxidermy post-ironic</a>
        </div>
        <div class="vi-slider__controls">
          <div class="vi-slider__navigation vi-slider__navigation--prev">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></button>
          </div>
          <div class="vi-slider__navigation vi-slider__navigation--next">
            <!-- Button type: pagination  -->
            <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascript is required to display this component.

Download Slider JavaScript

The following additional javascripts are used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  26 Mar 2025 - feat(slider): add data-slider-loop to card preset.
  26 Mar 2025 - fix(slider): correctly disable navigation when centered by container and 3 or less cards.
  18 Feb 2025 - fix(slider): fix accessibility messages
  05 Feb 2025 - fix(slider): improve centered slides calculation to work on all zoomlevels
  16 Jan 2025 - fix(slider): set aria-current attributes for pagination controls to improve accessibility
  16 Jan 2025 - fix(slider): ensure navigation controls are enabled when loop and centeredSlides are enabled
  11 Nov 2024 - fix(slider): incorrect margin hero footer
  16 Nov 2023 - Autoplay on hover stop fix
  15 Sep 2023 - Hide pagination when cards total size is less than container.
  01 Mar 2023 - Glitch in crossfade when controlled via pagination.
  hero footer position.
  Workaround browser pixel rounding issues.
  Prevent text selection next text-node after rapidly clicking the disabled next button.
  Create room for box shadow component overlap
  A11y outline issue button-element not receiving focus outline
  A11y: Navigation aria attributes set to the correct element.
  Pause/Play buttons not reflecting pause state. (js only)
  Positioning Controls Slider with video buttons.
  A11y slide containing element with keyboard focus scrolled into view.
  Hero preset documentation.


Changed

  Small change to allow usages outside .vi-container on Full Width Page Layout
  Disabled forced load of images.
  A11y: Optimised tab-behaviour card preset.
  A11y: Navigation buttons are buttons now.
  Ability to detect video mode. (js only)
  Add ‘next slide’ as argument to slide ‘change’ event.
  Pause autoplay when playing video in slider.
  Accessibility: Apply ‘the’ focus outline on pagination (css)
  Use Rectangular Image –custom in basic slider examples to prevent incorrect use.
  Added .vi-slider__slides element as root of slider. Not using this element will be frowned upon.
  Deprecated .vi-slider__navigation-card, .vi-slider__navigation-card--prev and .vi-slider__navigation-card--next. Use .vi-slider__navigation, .vi-slider__navigation--prev and .vi-slider__navigation--next instead.


Added

  23 Nov 2023 - Added inactivity start for slider when used does not interact with it.
  09 Nov 2022 - `.vi-slider__footer–centered modifier. (awaiting use case for documentation)
  25 Oct 2022 - Example of Centered Card Preset
  PBS support
  Optional Pause/Play button. Also example of Hero with Pause/Play button.
  RTL support
  Hero preset.
  Basic Slider video example
  Basic Slider and documentation
  Initial draft

Slider Card preset

Enable preset #

Heirloom chambray celiac pop-up tousled vinyl

Franzen +1 wolf pickled listicle migas diy chillwave artisan williamsburg

Cold-pressed franzen ugh ethical marfa

Pop-up meggings organic tacos aesthetic hammock selfies microdosing authentic street

Wayfarers lumbersexual narwhal austin yuccie diy

Viral keytar twee cold-pressed organic

Forage xoxo ethical flexitarian retro vegan brunch crucifix gentrify banjo

Slow-carb iphone polaroid lumbersexual literally banjo

Autoplay #

Aligned #

+1 8-bit selfies pour-over chicharrones

Post-ironic freegan butcher vegan synth flexitarian xoxo chillwave kinfolk brooklyn mlkshk

Lumbersexual pitchfork vegan humblebrag yolo

Pinterest butcher vice truffaut lumbersexual diy celiac knausgaard pabst post-ironic

Xoxo twee vegan gluten-free cardigan

Hoodie gentrify hammock freegan meggings

Paleo humblebrag sriracha park cold-pressed yolo yuccie sustainable etsy semiotics

Cleanse listicle brunch crucifix fingerstache

Lomo tilde semiotics banjo seitan thundercats hashtag yolo leggings kinfolk beard

Intelligentsia authentic ethical pug marfa

Centered #

Taxidermy beard occupy cold-pressed hoodie typewriter

Cliche lo-fi heirloom locavore mlkshk poutine mlkshk helvetica yuccie cleanse vinegar

Phlogiston diy xoxo squid cold-pressed

Cornhole tumblr banjo mumblecore cardigan kogi ennui skateboard mixtape vinegar

Semiotics pinterest celiac bitters ramps

Cleanse cliche skateboard typewriter etsy dreamcatcher

Flexitarian park marfa humblebrag fingerstache artisan etsy occupy whatever ramps everyday

Kogi vice lo-fi taxidermy meggings

Pitchfork fingerstache kogi keffiyeh freegan

Poutine bespoke hammock banjo authentic heirloom +1 chia kickstarter ethical

Intelligentsia ramps kogi forage yolo

Hammock vinyl neutra whatever meggings intelligentsia bitters cleanse crucifix plaid typewriter

Tilde whatever slow-carb butcher asymmetrical shoreditch

Twee phlogiston pour-over flannel austin fixie pug cray lomo selfies everyday

Cold-pressed master salvia retro pinterest

Stylesheets #

JavaScript #

Usage documentation #

Changelog #

Changelog

Fix

Changed

Added