Stad Brugge

Design system 1.0

Example

Example text block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus.

Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.

Example text block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus. Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.

link to google

Example text block

Nam sagittis leo id urna fringilla, quis dapibus erat feugiat. Suspendisse iaculis ligula quis ligula tempor placerat.

Nunc vitae fermentum massa. Nam porttitor quam quis odio gravida tincidunt. Pellentesque eget tincidunt lorem. Aenean porta rutrum tellus placerat pharetra. Pellentesque vel consequat mauris. Proin ac iaculis ipsum. Mauris at condimentum enim. Donec cursus facilisis euismod. Nam iaculis eros eu mi sagittis tristique. Integer blandit neque ut mattis luctus.

Example text block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus.

Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.

Markup: lib/components/styleguide/organisms/tabs.html
<div class="app-body">
  <section class="paragraph--tabs pt-medium pb-medium">
    <div class="row">
      <div class="col-12">
        <div class="tabs-vb tabs-vb--services js-tabs">
          <div class="tabs-vb__menu row">
            <div class="col-lg-3">
              <button class="tabs-vb__menu__btn js-tabs-menu-btn js-active" data-id="tab-1">
                <span>Tab Item 1</span>
                <span class="line"></span>
              </button>
            </div>
            <div class="col-lg-3">
              <button class="tabs-vb__menu__btn js-tabs-menu-btn" data-id="tab-2">
                <span>Tab Item 2</span>
                <span class="line"></span>
              </button>
            </div>
            <div class="col-lg-3">
              <button class="tabs-vb__menu__btn js-tabs-menu-btn" data-id="tab-3">
                <span>Tab Item 3</span>
                <span class="line"></span>
              </button>
            </div>
            <div class="col-lg-3">
              <button class="tabs-vb__menu__btn js-tabs-menu-btn" data-id="tab-4">
                <span>Tab Item 4</span>
                <span class="line"></span>
              </button>
            </div>
          </div>
          <div class="tabs-vb__menu--mobile select__wrapper js-select-wrapper">
            <select aria-label="tabs-vb" id="tomselect-1" class="tomselected ts-hidden-accessible">
              <option value="tab-2">Tab Item 2</option>
              <option value="tab-3">Tab Item 3</option>
              <option value="tab-4">Tab Item 4</option>
              <option value="tab-1">Tab Item 1</option>
            </select>
            <span class="select__wrapper__icon">
            <i class="fa-solid fa-chevron-down icon icon--chevron-down"></i>
          </span>
          </div>
          <div class="tabs-vb__list">
            <div class="tabs-vb__list__item js-tabs-list-item js-visible" data-id="tab-1">
              <section id="anchor-101" class="paragraph--text pt-large pb-large">
                <div class="row">
                  <div class="col-12">
                    <h3 class="pb-small">
                      Example text block
                    </h3>
                    <div class="wysiwyg">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus.</p>
                      <p>Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.</p>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            <div class="tabs-vb__list__item js-tabs-list-item" data-id="tab-2">
              <section id="anchor-103" class="section paragraph--text pt-large pb-large">
                <div class="row">
                  <div class="col-12">
                    <h3 class="pb-small">
                      Example text block
                    </h3>
                    <div class="wysiwyg">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus. Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.</p>
                      <a href="https://www.google.be" target="_blank">link to google</a>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            <div class="tabs-vb__list__item js-tabs-list-item" data-id="tab-3">
              <section id="anchor-105" class="section paragraph--text pt-large pb-large">
                <div class="row">
                  <div class="col-12">
                    <h3 class="pb-small">
                      Example text block
                    </h3>
                    <div class="wysiwyg">
                      <p>Nam sagittis leo id urna fringilla, quis dapibus erat feugiat. Suspendisse iaculis ligula quis ligula tempor placerat.</p>
                      <p>Nunc vitae fermentum massa. Nam porttitor quam quis odio gravida tincidunt. Pellentesque eget tincidunt lorem. Aenean porta rutrum tellus placerat pharetra. Pellentesque vel consequat mauris. Proin ac iaculis ipsum. Mauris at condimentum enim. Donec cursus facilisis euismod. Nam iaculis eros eu mi sagittis tristique. Integer blandit neque ut mattis luctus.</p>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            <div class="tabs-vb__list__item js-tabs-list-item" data-id="tab-4">
              <div data-quickedit-field-id="paragraph/108/field_blocks/en/default" data-once="quickedit">
                <section id="anchor-107" class="section paragraph--text pt-large pb-large">
                  <div class="row">
                    <div class="col-12">
                      <h3 class="pb-small">
                        Example text block
                      </h3>
                      <div class="wysiwyg">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus.</p>
                        <p>Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.</p>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
Source: ../client/lib/components/tabs/_tabs.scss, line 1