Full page

Overview

Link to section
These pages can be used as boilerplate to start new pages. Inspired by www.example.com
The interactives elements in the examples here may not work due to JS conflicts. They should work when being served on their own.
Uses

Link to section
Use this pattern to quickly get a full webpage set up with styling etc from the BAS Style kit.
These pages do not include Google Analytics code or Cookie consent code.
Variants

Link to section
Live
Added in version 0.6.0
Last updated in version 0.7.4
Link to section
BAS Style Kit - Basic - simple menu
Example page

Use this page as a template to start building new pages.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title>BAS Style Kit - Basic - simple menu</title>
  <link rel="stylesheet" href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" media="screen" type="text/css">
  <link rel="stylesheet" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/css/bas-style-kit.min.css" integrity="" media="screen" type="text/css">
  <meta name="apple-mobile-web-app-title" content="">
  <meta name="application-name" content="">
  <meta name="theme-color" content="#222222">
  <meta name="msapplication-TileColor" content="#222222">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="en_GB">
  <link rel="mask-icon" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/images/bas-favicon/safari-pinned-tab.svg" color="#222222">
  <meta name="msapplication-config" content="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/images/bas-favicon/browserconfig.xml">
  <link rel="shortcut icon" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/images/bas-favicon/favicon.ico">
  <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/images/bas-favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/images/bas-favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/images/bas-favicon/favicon-16x16.png">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#222222">
  <link rel="shortcut icon" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/images/bas-favicon/favicon.ico"> 
  <meta name="msapplication-config" content="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/images/bas-favicon/browserconfig.xml">
</head>
<body>        
  <button type="button" id="btn-back-to-top" 
      class="
          !fixed bottom-5
          end-5
          z-50
          p-2
          opacity-0
          cursor-pointer
          transition-opacity
          duration-300
          rounded-full
          bsk-bg-blue
          outline-2
          outline-white
          text-white 
          shadow-md
          ">
      <span class="[&>svg]:w-4">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
          </svg>
      </span>
  </button>
  <nav class="text-neutral-50 bsk-bg-blue pb-4 xlmenu:py-10">
      <div class="container mx-auto px-6 fhd:px-16">
          <div class="flex justify-between h-6">
              <!-- LEFT (desktop) -->
              <div class="sm:block xlmenu:flex space-x-2 items-center">
                  <!-- Brand -->
                  <a href="/" class="hidden xlmenu:block"><img class="bsk-brand-logo py-6" src="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/images/bas-logo/bas-logo-23.png"></a>
                  <a href="/" class="block xlmenu:hidden py-6 md:py-5 text:xl md:text-2xl">BAS Style Kit - Basic - simple page</a>
                  <!-- Desktop nav items -->
                  <div class="hidden xlmenu:flex px-4">                        
                      <a href="/" class="px-2 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
                      <a href="/" class="px-2 py-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
                      <a href="/" class="px-2 py-2 rounded hover:bsk-bg-blue-hover">Item 2</a>
                      <a href="/" class="px-2 py-2 rounded hover:bsk-bg-blue-hover">Item 3</a>
                  </div>
              </div>
              <!-- RIGHT (desktop) -->
              <div data-dropdown-wrapper class="hidden xlmenu:flex items-center">
                  <div class="relative menu-wrapper ml-4">
                      <button data-dropdown-toggle class="inline-flex items-center px-3 py-2 rounded hover:underline hover:bsk-bg-blue-hover">
                          Part of British Antarctic Survey
                          <svg class="arrow transform transition-transform w-5 h-5 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                          </svg>
                      </button>
                      <div data-dropdown-menu class="hidden absolute right-0 mt-7 rounded-b-lg z-20 px-2 pb-1 bsk-bg-blue shadow-lg">                            
                          <a href="https://www.bas.ac.uk" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">BAS Home</a>                            
                          <a href="https://data.bas.ac.uk" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Discover BAS Data</a>                            
                      </div>
                  </div>
              </div>
          </div>
          <!-- MOBILE MENU -->
          <div class="flex justify-end xlmenu:hidden">
              <!-- Mobile toggle -->
              <button class="mobile-toggle focus:outline-none -translate-y-1">
                  <svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                  </svg>
                  <svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
              </button>
              <!-- Mobile menu dropdown -->
              <div id="main-menu" role="menu"
                  class="
                      menu-dropdown
                      z-20
                      hidden
                      absolute
                      flex
                      flex-col
                      left-0
                      right-0
                      mt-12
                      pt-2
                      pb-4
                      px-3
                      space-y-2
                      rounded-b-lg
                      shadow-lg
                      bsk-bg-blue
                      border-t-1
                      border-t-slate-950
                  ">
                  <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
                  <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
                  <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 2</a>
                  <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 3</a>
                  <hr>
                  <!-- Mobile dropdown -->                    
                  <div data-dropdown-wrapper>
                      <button data-dropdown-toggle class="flex items-center focus:outline-none hover:underline px-3 py-1 w-full h-8 rounded hover:bsk-bg-blue-hover">
                          Part of the British Antarctic Survey
                          <svg class="arrow transform transition-transform w-5 h-5 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                          </svg>
                      </button>
                      <div data-dropdown-menu class="hidden space-y-1 mt-2">                            
                          <a href="https://www.bas.ac.uk" class="block px-3 py-1 rounded hover:bsk-bg-blue-hover">BAS Home</a>                        
                          <a href="https://data.bas.ac.uk" class="block px-3 py-1 rounded hover:bsk-bg-blue-hover">Discover BAS Data</a>                            
                      </div>
                  </div>                        
                  <hr>                
              </div>
          </div>            
      </div>
  </nav>
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex flex-col-reverse xl:flex-col xl:flex-row gap-6">
          <main class="flex-1 min-w-0">
              <section>
                  <h1>Example page</h1>
                  <p>Use this page as a template to start building new pages.</p>
              </section>
          </main>
      </div>
  </div>
  <footer class="bg-black py-6 mt-10">
      <div class="container mx-auto px-6 fhd:px-16">
          <div class="flex flex-col md:flex-row justify-between items-center md:space-y-0">
              <!-- Left side -->
              <div class="flex space-x-2 text-sm">
                  <a href="/" class="px-3 py-1 rounded hover:bsk-bg-blue-hover">Privacy & Cookies</a>
                  <a href="/" class="px-3 py-1 rounded hover:bsk-bg-blue-hover">Copyright</a>
                  <a href="/" class="px-3 py-1 rounded hover:bsk-bg-blue-hover">Contact</a>
              </div>
              <!-- Right side -->
              <div>
                  <span>© 2026</span>
              </div>
          </div>
      </div>
  </footer>
  <script type="module" src="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/js/bas-style-kit.min.js"></script>
</body>
</html>