Faq

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <div class="vi-faq-filters vi-faq-layout vi-faq-layout--filters">
    <div class="vi-faq-filters__title">Filter by category</div>
    <!-- Button type: link  -->
    <button type="button" class="vi-faq-filters__clear vi-btn-link vi-btn-link--inversed vi-btn">Clear filters</button>
    <div class="vi-faq-filters__categories">
      <div class="vi-multiple-select-v3" data-placeholder-format="{0} filters selected">
        <button class="vi-multiple-select-v3__toggle custom-select custom-select-sm">
          All
        </button>
        <div class="vi-multiple-select-v3__content">
          <!-- Form (mods: --accent) -->
          <form action="#form-70b901" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
            <div class="form-group">
              <div class="custom-control custom-checkbox">
                <input class="custom-control-input" id="faq-0" name="faq-0" type="checkbox">
                <label class="custom-control-label" for="faq-0">Disrupt cleanse yr.</label>
              </div>
              <div class="custom-control custom-checkbox">
                <input class="custom-control-input" id="faq-1" name="faq-1" type="checkbox">
                <label class="custom-control-label" for="faq-1">Tilde vinyl farm-to-table.</label>
              </div>
              <div class="custom-control custom-checkbox">
                <input class="custom-control-input" id="faq-2" name="faq-2" type="checkbox">
                <label class="custom-control-label" for="faq-2">Twee gastropub 90's.</label>
              </div>
              <div class="custom-control custom-checkbox">
                <input class="custom-control-input" id="faq-3" name="faq-3" type="checkbox">
                <label class="custom-control-label" for="faq-3">Semiotics slow-carb aesthetic.</label>
              </div>
            </div>
            <!-- Button type: outline (mods: --cancel) -->
            <button type="reset" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn vi-btn--cancel">Reset</button>
          </form>
        </div>
      </div>
    </div>
    <div class="vi-faq-filters__search">
      <!-- Search Box (mods: --inversed) -->
      <div class="vi-search-box vi-search-box--inversed">
        <div class="vi-search-box__main">
          <form class="vi-search-box__form" action="#search-6b2b59" method="get" role="search" novalidate="novalidate">
            <fieldset class="vi-search-box__set">
              <label class="sr-only" for="sg-9e1b9e">Search</label>
              <input autocomplete="off" class="vi-search-box__input" id="sg-9e1b9e" name="search" placeholder="What are you searching for?" required="" title="Search" type="search" value="">
              <div class="vi-search-box__btn">
                <!-- Button type: search  -->
                <button type="submit" class="vi-btn-search vi-btn">Search</button>
              </div>
            </fieldset>
            <div class="vi-search-box__clear">
              <div class="vi-search-box__clear-inset">
                <div class="vi-search-box__clear-btn">
                  <!-- Button type: search  -->
                  <button type="reset" class="vi-btn-search vi-btn-search--clear vi-btn">Clear</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
      <!-- Button type: solid  -->
      <button type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn-solid--no-pointer vi-btn">Search</button>
    </div>
  </div>
  <h2 class="vi-faq-collection-title vi-faq-collection-title--results">
    9 Results
  </h2>
  <div class="vi-faq-layout">
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">sustainable
              hella
              organic
              williamsburg
            </h3>
            <p>
              Williamsburg literally tattooed cliche lo-fi keytar bespoke taxidermy cronut hoodie.
              Goth chillwave migas organic truffaut tousled crucifix biodiesel poutine leggings.
              ...
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">phlogiston
              selfies
              gastropub
              poutine
            </h3>
            <p>
              Aesthetic chillwave marfa tilde tattooed artisan iphone disrupt taxidermy 8-bit.
              Master bitters migas cliche sustainable yolo neutra squid chillwave fixie.
              ...
            </p>
          </div>
          <a class="vi-card-faq__trigger vi-card__trigger" href="#">
            <!-- Button type: arrow  -->
            <div class="vi-btn-arrow vi-btn-arrow--nested vi-btn">Williamsburg austin</div>
          </a>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">normcore
              celiac
              flexitarian
              bespoke
            </h3>
            <p>
              Letterpress master 8-bit readymade hoodie butcher everyday biodiesel chia locavore.
              <a href="#">Lorem ipsum</a>
              Quinoa diy pabst park tacos organic cleanse swag migas 90's.
              ...
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">crucifix
              listicle
              franzen
              sartorial
            </h3>
            <p>
              Skateboard intelligentsia mixtape poutine yr tilde tacos etsy biodiesel loko.
              <a href="#">Lorem ipsum</a>
              Xoxo beard lumbersexual celiac letterpress leggings shoreditch ennui heirloom twee.
              ...
            </p>
          </div>
          <a class="vi-card-faq__trigger vi-card__trigger" href="#">
            <!-- Button type: arrow  -->
            <div class="vi-btn-arrow vi-btn-arrow--nested vi-btn">Mixtape blog</div>
          </a>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">hammock
              ramps
              sustainable
              biodiesel
            </h3>
            <p>
              Everyday narwhal squid wayfarers beard echo paleo gluten-free meditation sriracha.
              Keffiyeh pinterest taxidermy leggings lumbersexual kogi vegan listicle tousled mustache.
              ...
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">humblebrag
              kombucha
              readymade
              typewriter
            </h3>
            <p>
              Cardigan shoreditch pour-over banjo forage ethical polaroid pinterest pitchfork yuccie.
              Phlogiston microdosing tofu portland stumptown tilde sustainable meh fingerstache meggings.
              ...
            </p>
          </div>
          <a class="vi-card-faq__trigger vi-card__trigger" href="#">
            <!-- Button type: arrow  -->
            <div class="vi-btn-arrow vi-btn-arrow--nested vi-btn">Tofu crucifix</div>
          </a>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">loko
              VHS
              sustainable
              venmo
            </h3>
            <p>
              Hashtag bitters typewriter blog banjo post-ironic wolf iphone chillwave +1.
              <a href="#">Lorem ipsum</a>
              Tousled pbr&amp;b stumptown pabst taxidermy goth pinterest ethical fixie readymade.
              ...
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">cliche
              chillwave
              lumbersexual
              everyday
            </h3>
            <p>
              Street hammock listicle aesthetic wayfarers yuccie gluten-free godard meh vice.
              <a href="#">Lorem ipsum</a>
              Meggings organic yuccie chillwave typewriter tousled retro pop-up diy letterpress.
              ...
            </p>
          </div>
          <a class="vi-card-faq__trigger vi-card__trigger" href="#">
            <!-- Button type: arrow  -->
            <div class="vi-btn-arrow vi-btn-arrow--nested vi-btn">Etsy crucifix</div>
          </a>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">ugh
              whatever
              health
              DIY
            </h3>
            <p>
              Church-key skateboard quinoa loko meditation squid vinyl austin salvia phlogiston.
              Kombucha fixie pitchfork cronut paleo ethical organic keytar blog dreamcatcher.
              ...
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Pagination  -->
  <div class="vi-pagination">
    <ul class="vi-pagination__list">
      <li class="vi-pagination__item">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn-pagination--prev vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn__label">Previous</span></a>
      </li>
      <!-- .d-none and .d-md-block are Bootstrap Display classes -->
      <li class="vi-pagination__item d-none d-md-block">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">1</span></a>
      </li>
      <!-- .d-none and .d-md-block are Bootstrap Display classes -->
      <li class="vi-pagination__item d-none d-md-block">
        <!-- Button type: pagination  -->
        <span class="vi-btn-pagination vi-btn-pagination--gap vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--gap vi-btn__label">…</span></span>
      </li>
      <li class="vi-pagination__item">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">27</span></a>
      </li>
      <li class="vi-pagination__item">
        <!-- Button type: pagination  -->
        <span aria-current="page" class="active vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">28</span></span>
      </li>
      <li class="vi-pagination__item">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">29</span></a>
      </li>
      <!-- .d-none and .d-md-block are Bootstrap Display classes -->
      <li class="vi-pagination__item d-none d-md-block">
        <!-- Button type: pagination  -->
        <span class="vi-btn-pagination vi-btn-pagination--gap vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--gap vi-btn__label">…</span></span>
      </li>
      <!-- .d-none and .d-md-block are Bootstrap Display classes -->
      <li class="vi-pagination__item d-none d-md-block">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">999</span></a>
      </li>
      <li class="vi-pagination__item">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn-pagination--next vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn__label">Next</span></a>
      </li>
    </ul>
  </div>
</div>

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <div class="vi-faq-filters vi-faq-layout vi-faq-layout--filters" data-manual="true">
    <div class="vi-faq-filters__title">Filter by category</div>
    <!-- Button type: link  -->
    <button type="button" class="vi-faq-filters__clear vi-btn-link vi-btn-link--inversed vi-btn">Clear filters</button>
    <div class="vi-faq-filters__categories">
      <div class="vi-multiple-select-v3" data-placeholder-format="{0} filters selected">
        <button class="vi-multiple-select-v3__toggle custom-select custom-select-sm">
          All
        </button>
        <div class="vi-multiple-select-v3__content">
          <!-- Form (mods: --accent) -->
          <form action="#form-c01b93" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
            <div class="form-group">
              <div class="custom-control custom-checkbox">
                <input class="custom-control-input" id="faq-0" name="faq-0" type="checkbox">
                <label class="custom-control-label" for="faq-0">Disrupt cleanse yr.</label>
              </div>
              <div class="custom-control custom-checkbox">
                <input class="custom-control-input" id="faq-1" name="faq-1" type="checkbox">
                <label class="custom-control-label" for="faq-1">Tilde vinyl farm-to-table.</label>
              </div>
              <div class="custom-control custom-checkbox">
                <input class="custom-control-input" id="faq-2" name="faq-2" type="checkbox">
                <label class="custom-control-label" for="faq-2">Twee gastropub 90's.</label>
              </div>
              <div class="custom-control custom-checkbox">
                <input class="custom-control-input" id="faq-3" name="faq-3" type="checkbox">
                <label class="custom-control-label" for="faq-3">Semiotics slow-carb aesthetic.</label>
              </div>
            </div>
            <!-- Button type: outline (mods: --cancel) -->
            <button type="reset" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn vi-btn--cancel">Reset</button>
          </form>
        </div>
      </div>
    </div>
    <div class="vi-faq-filters__search">
      <!-- Search Box (mods: --inversed) -->
      <div class="vi-search-box vi-search-box--inversed">
        <div class="vi-search-box__main">
          <form class="vi-search-box__form" action="#search-b668dc" method="get" role="search" novalidate="novalidate">
            <fieldset class="vi-search-box__set">
              <label class="sr-only" for="sg-c26141">Search</label>
              <input autocomplete="off" class="vi-search-box__input" id="sg-c26141" name="search" placeholder="What are you searching for?" required="" title="Search" type="search" value="">
              <div class="vi-search-box__btn">
                <!-- Button type: search  -->
                <button type="submit" class="vi-btn-search vi-btn">Search</button>
              </div>
            </fieldset>
            <div class="vi-search-box__clear">
              <div class="vi-search-box__clear-inset">
                <div class="vi-search-box__clear-btn">
                  <!-- Button type: search  -->
                  <button type="reset" class="vi-btn-search vi-btn-search--clear vi-btn">Clear</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
      <!-- Button type: solid  -->
      <button type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn-solid--no-pointer vi-btn">Search</button>
    </div>
  </div>
  <h2 class="vi-faq-collection-title vi-faq-collection-title--results">
    9 Results
  </h2>
  <div class="vi-faq-layout">
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">brunch
              swag
              franzen
              swag
            </h3>
            <p>
              Bushwick godard cold-pressed microdosing truffaut pitchfork marfa 90's occupy sustainable.
              Beard narwhal cray everyday sustainable yr mustache normcore yuccie cliche.
              ...
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">wayfarers
              gentrify
              goth
              locavore
            </h3>
            <p>
              Diy irony aesthetic intelligentsia mixtape carry waistcoat beard gluten-free selvage.
              Taxidermy chambray pabst mustache poutine loko bespoke seitan pug street.
              ...
            </p>
          </div>
          <a class="vi-card-faq__trigger vi-card__trigger" href="#">
            <!-- Button type: arrow  -->
            <div class="vi-btn-arrow vi-btn-arrow--nested vi-btn">Pug offal</div>
          </a>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">whatever
              flexitarian
              fingerstache
              plaid
            </h3>
            <p>
              Microdosing humblebrag try-hard keytar salvia church-key mustache etsy skateboard cred.
              <a href="#">Lorem ipsum</a>
              Actually forage loko franzen drinking etsy listicle retro flannel normcore.
              ...
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">organic
              drinking
              beard
              scenester
            </h3>
            <p>
              Pabst disrupt forage truffaut authentic heirloom paleo church-key blog waistcoat.
              <a href="#">Lorem ipsum</a>
              Sustainable skateboard portland pbr&amp;b carry chillwave microdosing kinfolk pinterest asymmetrical.
              ...
            </p>
          </div>
          <a class="vi-card-faq__trigger vi-card__trigger" href="#">
            <!-- Button type: arrow  -->
            <div class="vi-btn-arrow vi-btn-arrow--nested vi-btn">Semiotics skateboard</div>
          </a>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">chia
              DIY
              portland
              literally
            </h3>
            <p>
              Leggings chia cronut schlitz bushwick truffaut disrupt thundercats yolo chillwave.
              Lomo wolf xoxo 90's umami listicle cronut banjo tofu squid.
              ...
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">etsy
              bespoke
              mlkshk
              listicle
            </h3>
            <p>
              Actually yuccie godard tilde hashtag schlitz cold-pressed poutine banjo loko.
              Loko fixie waistcoat tacos austin twee hammock distillery celiac organic.
              ...
            </p>
          </div>
          <a class="vi-card-faq__trigger vi-card__trigger" href="#">
            <!-- Button type: arrow  -->
            <div class="vi-btn-arrow vi-btn-arrow--nested vi-btn">Quinoa +1</div>
          </a>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">dreamcatcher
              pug
              umami
              cornhole
            </h3>
            <p>
              Twee waistcoat banjo normcore austin pop-up schlitz meh yolo williamsburg.
              <a href="#">Lorem ipsum</a>
              Squid gluten-free diy hashtag slow-carb banjo portland chicharrones heirloom pop-up.
              ...
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">sriracha
              offal
              semiotics
              mlkshk
            </h3>
            <p>
              Kinfolk twee diy thundercats cardigan banjo taxidermy goth neutra irony.
              <a href="#">Lorem ipsum</a>
              Celiac etsy vegan cray brunch helvetica taxidermy knausgaard squid squid.
              ...
            </p>
          </div>
          <a class="vi-card-faq__trigger vi-card__trigger" href="#">
            <!-- Button type: arrow  -->
            <div class="vi-btn-arrow vi-btn-arrow--nested vi-btn">Biodiesel typewriter</div>
          </a>
        </div>
      </div>
    </div>
    <!-- Card type: faq -->
    <div class="vi-card-faq vi-card">
      <div class="vi-card-faq__body vi-card__body">
        <div class="vi-card-faq__main vi-card__main">
          <div class="vi-card-faq__content  vi-typesystem vi-card__content">
            <!-- Use h1-h6 depending page hierarchy -->
            <h3 class="vi-card-faq__title vi-card__title">pickled
              asymmetrical
              portland
              everyday
            </h3>
            <p>
              Pitchfork echo retro iphone stumptown pickled twee migas literally sustainable.
              Plaid locavore keytar master godard slow-carb vegan cray keffiyeh chia.
              ...
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Pagination  -->
  <div class="vi-pagination">
    <ul class="vi-pagination__list">
      <li class="vi-pagination__item">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn-pagination--prev vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn__label">Previous</span></a>
      </li>
      <!-- .d-none and .d-md-block are Bootstrap Display classes -->
      <li class="vi-pagination__item d-none d-md-block">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">1</span></a>
      </li>
      <!-- .d-none and .d-md-block are Bootstrap Display classes -->
      <li class="vi-pagination__item d-none d-md-block">
        <!-- Button type: pagination  -->
        <span class="vi-btn-pagination vi-btn-pagination--gap vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--gap vi-btn__label">…</span></span>
      </li>
      <li class="vi-pagination__item">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">27</span></a>
      </li>
      <li class="vi-pagination__item">
        <!-- Button type: pagination  -->
        <span aria-current="page" class="active vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">28</span></span>
      </li>
      <li class="vi-pagination__item">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">29</span></a>
      </li>
      <!-- .d-none and .d-md-block are Bootstrap Display classes -->
      <li class="vi-pagination__item d-none d-md-block">
        <!-- Button type: pagination  -->
        <span class="vi-btn-pagination vi-btn-pagination--gap vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--gap vi-btn__label">…</span></span>
      </li>
      <!-- .d-none and .d-md-block are Bootstrap Display classes -->
      <li class="vi-pagination__item d-none d-md-block">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">999</span></a>
      </li>
      <li class="vi-pagination__item">
        <!-- Button type: pagination  -->
        <a href="#" class="vi-btn-pagination vi-btn-pagination--next vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn__label">Next</span></a>
      </li>
    </ul>
  </div>
</div>