Illustrations

This section lists the component you need to use a basic media to convey more meanings or emotions.

Aside from the map style that you can find in _map.scss, the below components use the utility classes offered by the Bootstrap 4 framework.




Headband

The headband component highlights the purpose of a website or a page, and generally stresses the main call-to-action to direct the user. The h1 title and the btn are deliberately specific to this very component.

Since the headband is a full-width component, do not use it within a section or any block with a .container behaviour.

Web Design Without Question

Since text is the primary and most essential way to convey informations and values to the users, it's important to grant typography a primordial attention. This section stresses the typographic guidelines that should be used on all manitou websites.

Getting Started

v1.0.0

<div class="headband">
  <img src="/assets/im/headband-bckg.jpg" class="headband-bkg">
  <div class="headband-content">
    <h1>Web Design Without Question</h1>
    <p class="lg">Since text is the primary and most essential way to convey informations and values to the users, it's important to grant typography a primordial attention. This section stresses the typographic guidelines that should be used on all manitou websites.</p>
    <a href="getting-started" class="btn btn-outline-inverse">Getting Started</a>
    <p class="version">v1.0.0</p>
  </div>
</div>



Image responsive

The .img-responsive class helps you to make your image responsive-friendly. This class applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

<img src="http://manitou.cdn.prismic.io/manitou/dad13aefbd4469b52e63d107dff2ebb084fbebbf_12502910514_21763ad7af_k.jpg" alt="" class="img-responsive">



Video

The .embed-responsive class helps you to make your video (<iframe>, <embed>, <video> or <object>) responsive-friendly. You can also help browsers to determine the video dimensions and ratio by adding a .embed-responsive-16by9 or .embed-responsive-4by3 class.

<div class="bloc">
	<div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" allowfullscreen="" src="http://www.youtube.com/embed/34jqNMoFZzA?rel=0&amp;amp;showinfo=0"></iframe>
    </div>
</div>



Map

The map component allows the users to quickly see a location in a map, such as to identify a dealer. On the map, you can display one or serveral markers, with pre-opened or not tooltips displaying informations.

Manitou

430 route de l'Aubinière
44150
Ancenis
France
<div class="map-container" ng-controller="MapCtrl">
  <ui-gmap-google-map
    center='map.center'
    zoom='map.zoom'
    class="mapAngular">
    <ui-gmap-markers
      models="markers"
      idkey="'id'"
      coords="'self'"
      click="onClick()">
      <ui-gmap-windows
        options="windowOptions"
        closeClick="closeClick()">
        <div>
          <h4 ng-non-bindable>Manitou</h4>
          <div ng-non-bindable>430 route de l'Aubinière</div>
          <div ng-non-bindable>44150</div>
          <div ng-non-bindable></div>
          <div ng-non-bindable>Ancenis</div>
          <div ng-non-bindable>France</div>
        </div>
      </ui-gmap-windows>
    </ui-gmap-markers>
  </ui-gmap-google-map>
</div>

With the previous map and a nav tabs(see section Navigations) you can thus build a contact block.

Notice that the nav tabs is aligned on its right here, since all the informations are in the right of the view.

Manitou

430 route de l'Aubinière
44150
Ancenis
France

Select a dealer

To get in touch with a dealer, click on one of the indicators. If you don't currently see any indicators, trying zooming out on the map.

<div class="contact">
  <article class="bloc">
    <ul class="nav nav-tabs hidden-xs" role="tablist">
      <li class="nav-item">
        <a href="#" class="nav-link" role="tab" title="Contact one of our service teams at the Manitou head office">Head office</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" role="tab" title="Get in touch with a Manitou subsidiary">Subsidiaries</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link active" role="tab" title="Get in touch with a Manitou network dealer">Dealers</a>
      </li>
    </ul>
    <div class="container-fluid">
      <div class="row">
        <div class="map-container" ng-controller="MapCtrl">
          <!-- Insert the ui-gmap-google-map here. -->
        </div>
        <div class="contact-info">
          <h3>Select a dealer</h3>
          <p>To get in touch with a dealer, click on one of the indicators. If you don't currently see any indicators, trying zooming out on the map.</p>
        </div>
      </div>
    </div>
  </article>
</div>

<div class="contact">
  <article class="bloc">
    <ul class="nav nav-tabs hidden-xs" role="tablist">
      <li class="nav-item">
        <a href="#" class="nav-link" role="tab" title="Contact one of our service teams at the Manitou head office">Head office</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" role="tab" title="Get in touch with a Manitou subsidiary">Subsidiaries</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link active" role="tab" title="Get in touch with a Manitou network dealer">Dealers</a>
      </li>
    </ul>
    <div class="container-fluid">
      <div class="row">
        <div class="map-container" ng-controller="MapCtrl">
          <!-- Insert the ui-gmap-google-map here. -->
        </div>
        <div class="contact-info" ng-controller="ContactCtrl">
          <div>
            <h2>Marcantoni Fils Agence Ajaccio</h2>
            <address>
              <div>R.N 193 ZI Baléone</div>
              <div>20167</div>
              <div></div>
              <div>Sarrola</div>
              <div>France</div>
            </address>
            <a href="#" class="btn btn-primary" title="Send your request and it will be processed shortly.">
              <i class="fa fa-envelope"></i>
              <span>Send a request</span>
            </a>
            <a href="" class="btn btn-default" title="View contact details" ng-hide="clickedCoordinates" ng-click="clickCoordinates()">
              <i class="fa fa-map-marker"></i>
              <span>View contact details</span>
            </a>
            <div class="contact-coordinate" ng-show="clickedCoordinates">
              <a href="mailto:direction@marcantoni.fr">
                <i class="fa fa-envelope"></i>
                direction@marcantoni.fr
              </a>
              <br>
              <a href="tel:+33495204930">
                <i class="fa fa-phone"></i>
                + 33 4 95 20 49 30
              </a>
              <br>
              <a href="http://www.marcantonifils.com" target="_blank" rel="nofollow">
                <i class="fa fa-globe"></i>
                www.marcantonifils.com
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </article>
</div>

Manitou

430 route de l'Aubinière
44150
Ancenis
France

Select a country

Manitou France

430 route de l'Aubinière
44150
Ancenis
France
Send a request
<div class="contact">
  <article class="bloc">
    <ul class="nav nav-tabs hidden-xs" role="tablist">
      <li class="nav-item">
        <a href="#" class="nav-link" role="tab" title="Contact one of our service teams at the Manitou head office">Head office</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" role="tab" title="Get in touch with a Manitou subsidiary">Subsidiaries</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link active" role="tab" title="Get in touch with a Manitou network dealer">Dealers</a>
      </li>
    </ul>
    <div class="container-fluid">
      <div class="row">
        <div class="map-container" ng-controller="MapCtrl">
          <!-- Insert the ui-gmap-google-map here. -->
        </div>
        <div class="contact-info">
          <h3>Select a country</h3>
          <div class="form-group">
            <label for=""></label>
            <select class="form-control">
              <option value="0" selected="selected" label="France">France</option>
              <option value="1" label="French Guiana">French Guiana</option>
              <option value="2" label="French Polynesia">French Polynesia</option>
              <option value="3" label="Gabon">Gabon</option>
              <option value="4" label="Gambia">Gambia</option>
              ...
            </select>
          </div>
          <h2>Manitou France</h2>
          <address>
            <div>430 route de l'Aubinière</div>
            <div>44150</div>
            <div></div>
            <div>Ancenis</div>
            <div>France</div>
          </address>
          <div id="tab-photos" class="contact-photo">
            <div class="contact-photo-col">
              <img class="img-responsive" alt="" src="http://manitou.cdn.prismic.io/manitou/038947eb4b171fe81342a40bae1cf96503e8ca76_usine_manitou_ancenis_002.jpg">
            </div>
            <div class="contact-photo-col">
              <img class="img-responsive" alt="" src="http://manitou.cdn.prismic.io/manitou/f7c4b1848262e27705681c51f86cc1326358970e_img_04811.jpg">
            </div>
          </div>
          <a href="" class="btn btn-primary" title="Send your request and it will be processed shortly.">
            <i class="fa fa-envelope"></i>
            <span>Send a request</span>
          </a>
        </div>
      </div>
    </div>
  </article>
</div>

<div class="contact">
  <article class="bloc">
    <ul class="nav nav-tabs hidden-xs" role="tablist">
      <li class="nav-item">
        <a href="#" class="nav-link active" role="tab" title="Contact one of our service teams at the Manitou head office">Head office</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" role="tab" title="Get in touch with a Manitou subsidiary">Subsidiaries</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" role="tab" title="Get in touch with a Manitou network dealer">Dealers</a>
      </li>
    </ul>
    <div class="container-fluid">
      <div class="row">
        <div class="map-container" ng-controller="MapCtrl">
          <!-- Insert the ui-gmap-google-map here. -->
        </div>
        <div class="contact-info">
          <h2>Manitou France</h2>
          <address>
            <div>430 route de l'Aubinière</div>
            <div>44150</div>
            <div></div>
            <div>Ancenis</div>
            <div>France</div>
          </address>
          <div id="tab-photos" class="contact-photo">
            <div class="contact-photo-col">
              <img class="img-responsive" alt="" src="http://manitou.cdn.prismic.io/manitou/038947eb4b171fe81342a40bae1cf96503e8ca76_usine_manitou_ancenis_002.jpg">
            </div>
            <div class="contact-photo-col">
              <img class="img-responsive" alt="" src="http://manitou.cdn.prismic.io/manitou/f7c4b1848262e27705681c51f86cc1326358970e_img_04811.jpg">
            </div>
          </div>
          <a href="" class="btn btn-primary" title="Send your request and it will be processed shortly.">
            <i class="fa fa-envelope"></i>
            <span>Send a request</span>
          </a>
        </div>
      </div>
    </div>
  </article>
</div>