Components

Navigation

    <div class="navside-btn">
      <span class="icon">H</span>
    </div>
    <div class="navside">
      <a class="user-action" href="#logout">Log out</a>
      <a class="user-login" href="#profile">Username</a>

      <a class="open" href="#1">Item 1</a>
      <a href="#2">Item 2</a>
      <a href="#3">Item 3</a>
      <a class="last" href="#4">Item 4</a>
      <p>Item 5</p>
      <div class="sub">
        <a href="#5">Sub item 1</a>
        <a href="#6">Sub item 2</a>
        <a href="#2">Sub item 3</a>
      </div>
      <a class="last" href="#4">Item 6</a>
      <a href="#5">Item 7</a>
      <a href="#6">Item 8</a>
    </div>
    

Popup

Try to open

Popup has simple syntax listed below but we are recommending to use your JavaScript library which is implementing many variations of a popup.

    <div class="popup-bg"></div>
    <div class="popup">
      <div class="popup-close">X</div>
      <h3>Title</h3>
      <p>Content text.</p>
    </div>
    

Tabs

  • MapTiler
  • Georeferencer
  • MapRank Search

Fast maps for the web and mobile. Drop images of maps into MapTiler and with a couple of clicks the software prepares HTML files with viewers based on Google Maps API, Leaflet and OpenLayers. Enjoy the maps on your mobile phone or tablet even while offline.

Turn scans into maps. Collaboratively. Georeferencer is an online tool that creates real maps from scanned images.

Choose a place, select the time range, search and get the most relevant results. Welcome to the MapRank Search, a unique technology to explore collections of maps in time and space faster then ever before.

Social icons

    <div class="social">
      <a>G</a>
      <a>T</a>
      <a>F</a>
      <a>P</a>
      <a>L</a>
    </div>

Colored

    <div class="social">
      <p>Share on</p>
      <a class="G">G</a>
      <a class="T">T</a>
      <a class="F">F</a>
      <a class="P">P</a>
      <a class="L">L</a>
    </div>

Circles

    <div class="social circles">
      <p>Share on</p>
      <a class="G">G</a>
      <a class="T">T</a>
      <a class="F">F</a>
      <a class="P">P</a>
      <a class="L">L</a>
    </div>

Labels

This is text info URGENT bug @siemens Data processing and text after labels.

Messages

You can use hideMessages(seconds); (def. 2 sec.) for hidden all messages via javascript.

Nam a massa et massa tempus gravida
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam a massa et massa tempus gravida. Suspendisse placerat, enim et hendrerit suscipit, nibh nunc tempor.
class="message error"
Message error

This is the box

And text in a box is also there!