menu

Startup has styled some basic elements to be more cohesive with the design. There are also some additional basic elements that are more specific to this theme's usecase.

Buttons



  <!-- Light -->
  <a href="#!" class="btn">Light Button</a>
  <a href="#!" class="btn"><i class="material-icons left">cloud</i>Light Button</a>
  <a href="#!" class="btn-large">Light Large Button</a>
  <a href="#!" class="btn-floating"><i class="material-icons">add</i></a>

  <!-- Dark -->
  <a href="#!" class="btn dark">Dark Button</a>
  <a href="#!" class="btn dark"><i class="material-icons left">settings</i>Light Button</a>
  <a href="#!" class="btn-large dark">Dark Large Button</a>
  <a href="#!" class="btn-floating dark"><i class="material-icons">edit</i></a>

Clients

This component is great for showcasing client logos.



  <div class="clients">
    <div class="row">
      <a href="#!" class="col s12 m6 l4 client white">
        <img class="logo" src="http://placehold.it/128x128" alt="google">
        <span class="title">Google</span>
      </a>
      <a href="#!" class="col s12 m6 l4 client yellow">
        <img class="logo" src="http://placehold.it/128x128" alt="snapchat">
        <span class="title">Snapchat</span>
      </a>
      <a href="#!" class="col s12 m6 l4 client light-blue lighten-4">
        <img class="logo" src="http://placehold.it/128x128" alt="messenger">
        <span class="title">Messenger</span>
      </a>
      <a href="#!" class="col s12 m6 l4 client red lighten-4">
        <img class="logo" src="http://placehold.it/128x128" alt="pinterest">
        <span class="title">Pinterest</span>
      </a>
      <a href="#!" class="col s12 m6 l4 client pink accent-1">
        <img class="logo" src="http://placehold.it/128x128" alt="dribbble">
        <span class="title">Dribbble</span>
      </a>
      <a href="#!" class="col s12 m6 l4 client green accent-3">
        <img class="logo" src="http://placehold.it/128x128" alt="medium">
        <span class="title">Medium</span>
      </a>
    </div>
  </div>

Avatar

Showcase users, team members, or any element that needs to show an identifying picture of a person.



  <!-- Basic -->
  <div class="avatar-wrapper">
    <span class="avatar">
      <img src="http://placehold.it/128x128" alt="">
    </span>
  </div>

  <!-- Team -->
  <div class="team">
    <div class="avatar-wrapper">
      <span class="avatar">
        <img src="http://placehold.it/128x128" alt="">
      </span>
    </div>
  </div>

Google Maps

Themed Google Maps styles. Here is the HTML markup:


  <div class="section google-map"></div>

Here is the script for the Google Maps API. Remember, to use the Google Map APIs you need your own API key. Read more about getting an API key


  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>

Below is the javascript initialization of the Google Map embed.


  // Google Maps
  function initMap(mapEl, roadColor, landColor, lat, lng, tooltip) {

    // Specify features and elements to define styles.
    var styleArray = [
      { "featureType": "all", stylers: [{ saturation: -80 }] },
      { "featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#bae8e4" }] },
      { "featureType": "poi", "elementType": "geometry", "stylers": [{ "visibility": "off" }] },
      { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#fff" }] },
      { "featureType": "poi", "stylers": [{ "visibility": "off" }] },
      { "featureType": "administrative", "stylers": [{ "visibility": "off" }] },
      { "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "color": roadColor }, { "saturation": "-30" }, { "lightness": "30" }] },
      { "featureType": "road", "elementType": "geometry.stroke", "stylers": [{ "color": roadColor }, { "saturation": "-30" }, { "lightness": "30" }] },
      { "featureType": "landscape", "stylers": [{ "color": landColor }] },
      { "featureType": "transit", "stylers": [{ "color": landColor }] },
      { "elementType": "labels", "stylers": [{ "visibility": "off" }] },
      { "elementType": "labels.text", "stylers": [{ "visibility": "on" }] },
      { "elementType": "labels.icon", "stylers": [{ "visibility": "on" }] }
    ];

    // Create a map object and specify the DOM element for display.
    var map = new google.maps.Map(mapEl, {
      center: {lat: lat, lng: lng},
      scrollwheel: false,
      // Apply the map style array to the map.
      styles: styleArray,
      zoom: 11
    });

    // Create a marker and set its position.
    var marker = new google.maps.Marker({
      map: map,
      position: {lat: lat, lng: lng},
      animation: google.maps.Animation.DROP,
      title: 'Our Location!'
    });

    // Marker tooltip.
    var infowindow = new google.maps.InfoWindow({
      content: tooltip
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
    window.setTimeout(function() {
      infowindow.open(map,marker);
    }, 1000);
  }

  // Map variables
  var lat = 37.7576793;
  var lng = -122.4;
  var roadColor = "#7CFFE6";
  var landColor = "#fafafa";
  var tooltip = "123 Main Street, San Francisco, CA 94110"
  var map = $('.google-map').first();
  if (map.length) {
    initMap(map[0], roadColor, landColor, lat, lng, tooltip);
  }
            

Icon Features

This is a cool feature about your product! It really separates you from the crowd.

This is a cool feature about your product! It really separates you from the crowd.

This is a cool feature about your product! It really separates you from the crowd.

This is a cool feature about your product! It really separates you from the crowd.

This is a cool feature about your product! It really separates you from the crowd.

This is a cool feature about your product! It really separates you from the crowd.



  <iv class="row">
    <div class="col s12 m6 l4">
      <h4><i class="icon-light-bulb"></i></h4>
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
    <div class="col s12 m6 l4">
      <h4><i class="icon-bolt"></i></h4>
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
    <div class="col s12 m6 l4">
      <h4><i class="icon-rocket"></i></h4>
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
    <div class="col s12 m6 l4">
      <h4><i class="icon-settings"></i></h4>
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
    <div class="col s12 m6 l4">
      <h4><i class="icon-umbrella"></i></h4>
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
    <div class="col s12 m6 l4">
      <h4><i class="icon-compass"></i></h4>
      <p class="caption">This is a cool feature about your product! It really separates you from the crowd.</p>
    </div>
  </div>