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.

Sections

Here are some helpful classes to customize your section structure.

Data Option Description
full-height If you have content in a section that overflows past a screen's height you can add this class to let the height expand to the actual content height instead of being restricted.
half-height Set the height of the section to half of the screen's height.

Buttons

     Light Button   cloudLight Button   Light Large Button   add
     Dark Button   settingsLight Button   Dark Large Button   edit
     Light Button   whatshotLight Button   Light Large Button   menu 


  <!-- 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.

Google Snapchat Messenger Pinterest Dribbble Medium 


  <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>