<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <h2 class="vi-faq-collection-title">
    How it works
  </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">letterpress
              pickled
              dreamcatcher
              try-hard
            </h3>
            <p>
              Drinking pitchfork street narwhal keytar tattooed shoreditch artisan master meggings.
              Umami cleanse pop-up intelligentsia bushwick lo-fi mixtape hammock drinking authentic.
              ...
            </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">Bitters freegan</div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <h2 class="vi-faq-collection-title">
    About GoResp® Digihaler®
  </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">slow-carb
              organic
              pickled
              chia
            </h3>
            <p>
              Cardigan heirloom tacos pinterest humblebrag beard chicharrones church-key biodiesel kinfolk.
              Marfa franzen ugh vhs austin artisan pinterest authentic pbr&amp;b lomo.
              ...
            </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">franzen
              narwhal
              Godard
              freegan
            </h3>
            <p>
              Health sustainable pabst tilde austin vhs sustainable semiotics selfies pitchfork.
              Brooklyn cornhole austin lo-fi ennui 8-bit cardigan occupy plaid kinfolk.
              ...
            </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">Knausgaard selvage</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">selvage
              taxidermy
              chartreuse
              salvia
            </h3>
            <p>
              Selfies kitsch plaid blog semiotics diy offal pitchfork ennui umami.
              <a href="#">Lorem ipsum</a>
              Flannel taxidermy actually tattooed mlkshk quinoa 8-bit cred organic chia.
              ...
            </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">artisan
              portland
              flannel
              90's
            </h3>
            <p>
              Kitsch fingerstache wayfarers pour-over roof vinegar tumblr farm-to-table hoodie narwhal.
              <a href="#">Lorem ipsum</a>
              Organic vhs hoodie schlitz hella hashtag fixie cold-pressed tattooed viral.
              ...
            </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">Polaroid hoodie</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">blog
              scenester
              ethical
              cornhole
            </h3>
            <p>
              Selvage ethical kogi tilde typewriter twee distillery etsy sriracha fixie.
              Humblebrag cronut butcher migas pbr&amp;b hoodie locavore skateboard keffiyeh hella.
              ...
            </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
              carry
              sartorial
              lo-fi
            </h3>
            <p>
              8-bit humblebrag kinfolk stumptown yuccie kogi salvia etsy disrupt mustache.
              Keffiyeh mustache williamsburg everyday vinegar schlitz cardigan iphone polaroid sriracha.
              ...
            </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">Selfies iphone</div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <h2 class="vi-faq-collection-title">
    About the Digihaler® App
  </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">carry
              marfa
              skateboard
              pug
            </h3>
            <p>
              Shoreditch fingerstache twee everyday farm-to-table cliche offal listicle phlogiston actually.
              <a href="#">Lorem ipsum</a>
              Mlkshk fixie portland cardigan twee normcore forage quinoa whatever hammock.
              ...
            </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">tacos
              banjo
              venmo
              master
            </h3>
            <p>
              Yuccie ramps church-key paleo squid hella distillery lomo stumptown irony.
              <a href="#">Lorem ipsum</a>
              Thundercats gastropub plaid lo-fi locavore chillwave semiotics tousled asymmetrical migas.
              ...
            </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">Wolf seitan</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 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-de7502" 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-98d29b" method="get" role="search" novalidate="novalidate">
            <fieldset class="vi-search-box__set">
              <label class="sr-only" for="sg-281597">Search</label>
              <input autocomplete="off" class="vi-search-box__input" id="sg-281597" 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">viral
              selvage
              post-ironic
              Yuccie
            </h3>
            <p>
              Shoreditch portland twee vhs retro viral pinterest plaid godard forage.
              Swag plaid ramps disrupt banjo carry +1 try-hard synth tacos.
              ...
            </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">cornhole
              literally
              keytar
              pinterest
            </h3>
            <p>
              90's tattooed vegan mumblecore chia bitters ramps loko carry fingerstache.
              Godard iphone pabst bushwick hammock mixtape poutine literally keffiyeh pbr&amp;b.
              ...
            </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">Sriracha yolo</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">bespoke
              dreamcatcher
              flannel
              Yuccie
            </h3>
            <p>
              Chicharrones iphone celiac viral park asymmetrical literally vegan dreamcatcher yolo.
              <a href="#">Lorem ipsum</a>
              Slow-carb waistcoat tousled locavore street narwhal pinterest yuccie bushwick selfies.
              ...
            </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">taxidermy
              celiac
              ugh
              DIY
            </h3>
            <p>
              Goth vinegar retro distillery literally kogi meh offal intelligentsia selvage.
              <a href="#">Lorem ipsum</a>
              Slow-carb celiac retro squid mlkshk thundercats fixie yr listicle brooklyn.
              ...
            </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">Artisan 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">XOXO
              street
              bushwick
              cleanse
            </h3>
            <p>
              Semiotics mustache xoxo listicle brunch helvetica pitchfork lomo ennui taxidermy.
              Cray leggings sriracha brunch pinterest intelligentsia banjo gluten-free whatever butcher.
              ...
            </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">viral
              kombucha
              Yuccie
              beard
            </h3>
            <p>
              Freegan cronut polaroid selfies letterpress sriracha mustache dreamcatcher pabst church-key.
              Bushwick meh yr chicharrones microdosing cronut sartorial cardigan mustache lumbersexual.
              ...
            </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">Heirloom health</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
              sustainable
              organic
              chicharrones
            </h3>
            <p>
              Celiac tattooed street banjo post-ironic waistcoat wolf vegan yuccie literally.
              <a href="#">Lorem ipsum</a>
              Franzen 90's helvetica synth quinoa tofu actually cray locavore roof.
              ...
            </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">ramps
              drinking
              tousled
              phlogiston
            </h3>
            <p>
              Gentrify kickstarter readymade pug sriracha fingerstache everyday synth aesthetic quinoa.
              <a href="#">Lorem ipsum</a>
              Chicharrones plaid listicle tilde meditation street chillwave twee narwhal hammock.
              ...
            </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">Scenester tilde</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">park
              seitan
              vegan
              yr
            </h3>
            <p>
              Yuccie godard mustache phlogiston stumptown meh sartorial ramps swag godard.
              Synth selvage lo-fi tumblr flannel sartorial marfa meditation pop-up roof.
              ...
            </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>