Footer

<footer class="footer">
  <div class="footer-groups">
    <section class="footer-group">
      <h2 class="footer-heading">This site</h2>
      <nav class="nav nav-vertical nav-bare" aria-label="This site">
        <ul class="nav-list">
          <li><a class="nav-link" href="#sources">Sources</a></li>
          <li><a class="nav-link" href="#about">How it is made</a></li>
          <li><a class="nav-link" href="#feed">Feed</a></li>
        </ul>
      </nav>
    </section>

    <section class="footer-group">
      <h2 class="footer-heading">The data</h2>
      <p class="footer-text">Published by the city as open data, downloaded nightly. The
        timetable in force is the one on the platform sign.</p>
    </section>

    <section class="footer-group">
      <h2 class="footer-heading">Preferences</h2>
      <div class="footer-actions">
        <label class="field-label" for="demo-footer-theme">Theme</label>
        <select class="select select-sm" id="demo-footer-theme">
          <option value="system" selected>System</option>
          <option value="light">Light</option>
          <option value="dark">Dark</option>
        </select>
      </div>
    </section>
  </div>

  <div class="footer-bottom">
    <p class="footer-note">Everything happens in your browser: no data leaves this device.</p>
  </div>
</footer>