Organisms

Navs

We have a few different navbars that we use in the application. One for regular front-facing pages, one for My Garage, and one for the Mechanic Dashboard.

Mechanic Dashboard navbar

The Mechanic Dashboard navbar is a bit more complicated. It has to help the mechanic get to the different areas of the Dashboard, and most of those have sub-areas that we also link to via sub-menus.

Also, if the user is a Super Mechanic, there's an addition to the navbar in the form of a select with all the mechanics that the Super Mechanic controls.

</div>
<!-- Regular Mechanic -->
<div class="navbar ab-navbar hidden-print">
  <div class="container">
    <div class="row">
      <div class="col-md-7">
        <ul class="nav nav-pills">
          <li class="active">
            <a class="with-sub-menu" href="/dashboard">
              <i class="fa fa-home fa-2x hidden-xs hidden-sm"></i>
              <span class="hidden-md hidden-lg">Forside</span>
            </a>
          </li>
          <li>
            <a class="with-sub-menu" data-sub-menu-toggle="new-jobs" href="/leads/incoming">Opgaver
              <span id="counter-incoming_leads" class="badge badge-important" data-padding="">18</span>
            </a>
          </li>
          <li>
            <a class="with-sub-menu" data-sub-menu-toggle="bids" href="/leads/pending">Bud
            </a>
          </li>
          <li>
            <a class="with-sub-menu" data-sub-menu-toggle="jobs" href="/leads/accepted">Sager
            </a>
          </li>
          <li>
            <a class="with-sub-menu" data-sub-menu-toggle="questions" href="/dashboard/offer_comments">Spørgsmål
            </a>
          </li>
          <li>
            <a class="with-sub-menu" href="/messages">Beskeder
            </a>
          </li>
          <li>
            <a class="with-sub-menu" href="/plus/suppliers">Leverandører</a>
          </li>
        </ul>
      </div>
      <div class="col-md-5">
        <ul class="nav nav-pills pull-right">
          <li>
            <a href="/dashboard/profile/edit">Olsen's Auto - AutoPartner</a>
          </li>
          <li class="dropdown hidden-print non-super-dropdown-toggle">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              Menu&nbsp;<i class="fa fa-caret-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-right navigation-dropdown-menu ">
              <li>
                <a href="/invoices">
                  <i class="fa fa-file"></i>
                  Fakturaer

                </a>
              </li>
              <li>
                <a href="/dashboard/overview">
                  <i class="fa fa-eye"></i>
                  Overblik
                </a>
              </li>
              <li>
                <a href="/mechanics/olsens-auto-autopartner/reviews">
                  <i class="fa fa-star"></i>
                  Kundevurderinger
                </a>
              </li>
              <li>
                <a href="/dashboard/profile/edit">
                  <i class="fa fa-user"></i>
                  Profil
                </a>
              </li>
              <li>
                <a data-toggle="modal" href="#video-modal">
                  <i class="fa fa-youtube-play"></i>
                  Sådan virker det
                </a>
              </li>
              <li>
                <a target="_blank" href="http://autobutlerplus.dk">
                  <i class="fa fa-shopping-cart"></i>
                  AutobutlerPlus
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="/dashboard/settings?no_ref=1">
                  <i class="fa fa-cog"></i>
                  Indstillinger
                </a>
              </li>
              <li>
                <a onclick="clear_dashboard_counts();" href="/logout">
                  <i class="fa fa-power-off"></i>
                  Log ud
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="navbar-inner">
    <div class="container">
      <div class="row">
        <div class="col-sm-8">
          <div class="navbar-submenu">
            <ul class="hidden nav nav-pills" data-submenu="new-jobs">
              <li>
                <a href="/leads/incoming">Nye opgaver
                  <span id="counter-normal_leads" class="badge badge-important" data-padding="()">(18)</span>
                </a>
              </li>
              <li>
                <a href="/leads/incoming?only_selected=true">Reserverede opgaver
                </a>
              </li>
              <li>
                <a href="/leads/hidden">Slettede opgaver</a>
              </li>
            </ul>
            <ul class="hidden nav nav-pills" data-submenu="bids">
              <li>
                <a href="/leads/pending">Åbne
                </a>
              </li>
              <li>
                <a href="/leads/expired">Udløbne</a>
              </li>
              <li>
                <a href="/leads/lost">Afslåede</a>
              </li>
            </ul>
            <ul class="hidden nav nav-pills" data-submenu="jobs">
              <li>
                <a href="/leads/accepted">Accepterede
                </a>
              </li>
              <li>
                <a href="/leads/ongoing">Igangværende
                </a>
              </li>
              <li>
                <a href="/leads/completed">Afsluttede
                  <span id="counter-completed_leads" class="badge badge-important" data-padding="()"></span>
                </a>
              </li>
            </ul>
            <ul class="hidden nav nav-pills" data-submenu="questions">
              <li>
                <a href="/dashboard/offer_comments">Tilbud
                </a>
              </li>
              <li>
                <a href="/dashboard/lead_comments">Opgaver
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-sm-4 text-right">
          <form class="navbar-form form-search" action="/leads/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
            <input type="text" name="query" id="query" class="form-control input-sm" placeholder="Søg på referencenr. eller reg. nr.">
            <button type="submit" class="btn btn-default btn-sm">
              <i class="fa fa-search"></i>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Superbidder -->
<div class="navbar ab-navbar hidden-print">
  <div class="container">
    <div class="row">
      <div class="col-md-7">
        <ul class="nav nav-pills">
          <li class="active">
            <a class="with-sub-menu" href="/dashboard">
              <i class="fa fa-home fa-2x hidden-xs hidden-sm"></i>
              <span class="hidden-md hidden-lg">Forside</span>
            </a>
          </li>
          <li>
            <a class="with-sub-menu" data-sub-menu-toggle="new-jobs" href="/leads/incoming">Opgaver
              <span id="counter-incoming_leads" class="badge badge-important" data-padding="">7</span>
            </a>
          </li>
          <li class="sub-menu-item-active">
            <a class="with-sub-menu sub-menu-active" data-sub-menu-toggle="bids" href="/leads/pending">Bud
              <span id="counter-bids" class="badge badge-important" data-padding="">37</span>
            </a>
          </li>
          <li class="">
            <a class="with-sub-menu" data-sub-menu-toggle="jobs" href="/leads/accepted">Sager
            </a>
          </li>
          <li>
            <a class="with-sub-menu" data-sub-menu-toggle="questions" href="/dashboard/offer_comments">Spørgsmål
            </a>
          </li>
          <li>
            <a class="with-sub-menu" href="/messages">Beskeder
            </a>
          </li>
          <li>
            <a class="with-sub-menu" href="/plus/suppliers">Leverandører</a>
          </li>
        </ul>
      </div>
      <div class="col-md-5">
        <div id="placeholder-with-spinner" style="display:none; margin-right: 10px; margin-top: 10px;" class="pull-left">
          <img src="/assets/ui/spinner.gif" alt="Spinner">
        </div>
        <form id="superator_form" class="navbar-form hidden-print" action="/dashboard/impersonate" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="XWwnNTa52EBIJvxtTfmt/FUe/st59wwVOeFQYKh3RUttRGZhCjUgL1qI2GJ/1IYdTXh1dDCO4g0It+2Vpk5sNA==">
          <input type="hidden" name="return_to" id="return_to" value="http://dev.autobutler.dk:3000/dashboard">
          <div class="form-group">
            <select name="child_id" id="child_id" class="ab-dropdown form-control">
              <option value="254582">Bilglasgruppen.dk - Kolding, 6000 Kolding</option>
              <option value="29794">Bilglasgruppen.dk - Herning, 7400 Herning</option>
              <option value="29796">Bilglasgruppen.dk - Aarhus, 8210 Århus v</option>
              <option value="17183">Bilglasgruppen.dk - Silkeborg, 8600 Silkeborg</option>
              <option value="29797">Midtjysk Bilglas - Bilglasgruppen, 8700 Horsens</option>
              <option value="29795">Bilglasgruppen.dk - Aalborg, 9230 Svenstrup
              </option>
              <option selected="selected" value="29793">Bilglasgruppen.dk A/S - Superbyder, 8600 Silkeborg</option>
            </select>
          </div>
        </form>
        <ul class="nav nav-pills pull-right">
          <li class="dropdown hidden-print">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
              Menu&nbsp;<i class="fa fa-caret-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-right navigation-dropdown-menu super_mechanic">
              <li>
                <a href="/invoices">
                  <i class="fa fa-file"></i>
                  Fakturaer
                  <span id="counter-unpaid_invoices" class="badge badge-important" data-padding="  ">
                    1
                  </span>
                  <span id="counter-overdue_invoices" class="badge badge-danger" data-padding="  ">
                    1
                  </span>
                </a>
              </li>
              <li>
                <a href="/dashboard/overview">
                  <i class="fa fa-eye"></i>
                  Overblik
                </a>
              </li>
              <li>
                <a href="/dashboard/statistics">
                  <i class="fa fa-signal"></i>
                  Statistik
                </a>
              </li>
              <li>
                <a href="/mechanics/bilglasgruppendk-a-s-superbyder/reviews">
                  <i class="fa fa-star"></i>
                  Kundevurderinger
                </a>
              </li>
              <li>
                <a href="/dashboard/profile/edit">
                  <i class="fa fa-user"></i>
                  Profil
                </a>
              </li>
              <li>
                <a data-toggle="modal" href="#video-modal">
                  <i class="fa fa-youtube-play"></i>
                  Sådan virker det
                </a>
              </li>
              <li>
                <a target="_blank" href="http://autobutlerplus.dk">
                  <i class="fa fa-shopping-cart"></i>
                  AutobutlerPlus
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="/dashboard/settings?no_ref=1">
                  <i class="fa fa-cog"></i>
                  Indstillinger
                </a>
              </li>
              <li>
                <a onclick="clear_dashboard_counts();" href="/logout">
                  <i class="fa fa-power-off"></i>
                  Log ud
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="navbar-inner">
    <div class="container">
      <div class="row">
        <div class="col-sm-8">
          <div class="navbar-submenu">
            <ul class="hidden nav nav-pills" data-submenu="new-jobs">
              <li>
                <a href="/leads/incoming">Nye opgaver
                  <span id="counter-normal_leads" class="badge badge-important" data-padding="()">(7)</span>
                </a>
              </li>
              <li>
                <a href="/leads/incoming?only_selected=true">Reserverede opgaver
                </a>
              </li>
              <li>
                <a href="/leads/hidden">Slettede opgaver</a>
              </li>
            </ul>
            <ul class="hidden nav nav-pills" data-submenu="bids">
              <li>
                <a href="/leads/pending">Åbne
                  <span id="counter-pending_leads" class="badge badge-important" data-padding="()">(37)</span>
                </a>
              </li>
              <li>
                <a href="/leads/expired">Udløbne</a>
              </li>
              <li>
                <a href="/leads/lost">Afslåede</a>
              </li>
            </ul>
            <ul class="hidden nav nav-pills" data-submenu="jobs">
              <li>
                <a href="/leads/accepted">Accepterede
                </a>
              </li>
              <li>
                <a href="/leads/ongoing">Igangværende
                </a>
              </li>
              <li>
                <a href="/leads/completed">Afsluttede
                  <span id="counter-completed_leads" class="badge badge-important" data-padding="()"></span>
                </a>
              </li>
            </ul>
            <ul class="hidden nav nav-pills" data-submenu="questions">
              <li>
                <a href="/dashboard/offer_comments">Tilbud
                </a>
              </li>
              <li>
                <a href="/dashboard/lead_comments">Opgaver
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-sm-4 text-right">
          <form class="navbar-form form-search" action="/leads/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
            <input type="text" name="query" id="query" class="form-control input-sm" placeholder="Søg på referencenr. eller reg. nr.">
            <button type="submit" class="btn btn-default btn-sm">
              <i class="fa fa-search"></i>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">

Card backdrop

The card backdrop is something we use as a sort of mat to lay down our cards on. It can contain information that relates to one or more cards on the backdrop.

To communicate the type of a given group of cards we use the .card-backdrop-headline. When the cards are displayed in chronological order, we can use a .timeline to help convey that information.

 Opgaver

Gå til opgaver
Tilbud indhentet
Ford S-MAX (2010)
Oprettet 1. februar 2016
Dine 4 tilbud er klar
Se hvad du sparer og vælg et tilbud nu
Tilbud indhentet
Ford S-MAX (2008)
Oprettet 19. januar 2016
Dine 4 tilbud er klar
Se hvad du sparer og vælg et tilbud nu

2016

Ford S-MAX (2010)
Dato for næste sommerdæk skifte
 
Få 3 tilbud
  Datoen er en anbefaling baseret på dine bildata
Ford S-MAX (2010)
Dato for næste vinterdæk skifte
 
Få 3 tilbud
  Datoen er en anbefaling baseret på dine bildata

 Planlæg

Kommende opgaver

Få din bil undervognsbehandlet nu

Indhent 3 tilbud nu

Skån bilens undervogn mod rust og gennemtæring

Spar tid og op til 40% hos vores kvalitetsværksteder

Tesla Model S (2014)
Dato for næste undervognsbehandling
 
  Datoen er en anbefaling baseret på dine bildata
Få 3 tilbud
<div class="car-owner-dashboard">
  <div class="card-backdrop">
    <h2 class="card-backdrop-headline">
      <i class="fa fa-fw fa-wrench"></i>&nbsp;<span class="what">Opgaver</span>
    </h2>
    <a class="context-link text-muted" href="/my/jobs">Gå til opgaver</a>
    <div class="job-card card card-responsive card-fluid card-bordered active " data-jobid="421423">
      <div class="card-header clickable">
        <div class="row">
          <div class="hidden-xs col-sm-2 job-image-container">
            <img width="312" height="312" class="job-image" src="http://res.cloudinary.com/hvwckxprc/image/fetch/c_fill,h_312,w_312/https://d2bythind2nctn.cloudfront.net/assets/job_tasks/timing_belt.jpg" alt="Timing belt">
          </div>
          <div class="col-sm-10" data-link="/my/jobs/421423/offers">
            <div class="job-info">
              <span class="label gotten">Tilbud indhentet</span>
              <div class="job-name ellipsis">
                <a class="job-name-link" href="/my/jobs/421423/offers">Tandrem/kæde</a>
              </div>
              <div class="car-info">
                Ford S-MAX (2010)
                <span class="hidden-xs">– Reg. nr. DF33014</span>
              </div>
            </div>
            <div class="job-reference text-muted">
              Oprettet 1. februar 2016
            </div>
          </div>
        </div>
      </div>
      <div class="info-area">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-2">
            <div class="info-content">
              <div class="job-status">
                Dine
                <span class="job_count">4</span>
                tilbud er klar
              </div>
              <div class="job-text">
                Se hvad du sparer og vælg et tilbud nu
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cta-area">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-2">
            <div class="cta-area-content">
              <div class="row">
                <div class="col-sm-6">
                  <div class="hidden-xs offers-count-progress full">
                    <div class="fill" style="width: 100%;"></div>
                    <div class="progress-divider" style="left: 25%"></div>
                    <div class="progress-divider" style="left: 50%"></div>
                    <div class="progress-divider" style="left: 75%"></div>
                    <div class="progress-divider" style="left: 100%"></div>
                  </div>
                  <div class="hidden-xs job-area">
                    <i class="fa fa-map-marker"></i>
                    Nær 7400 Herning
                  </div>
                </div>
                <div class="col-sm-6 text-right">
                  <a class="btn btn-primary hidden-xs" href="/my/jobs/421423/offers">
                    Se tilbud
                  </a>
                  <a class="btn btn-primary visible-xs-block" href="/my/jobs/421423/offers">
                    Se tilbud
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="job-card card card-responsive card-fluid card-bordered active " data-jobid="417445">
      <div class="card-header clickable">
        <div class="row">
          <div class="hidden-xs col-sm-2 job-image-container">
            <img width="312" height="312" class="job-image" src="http://res.cloudinary.com/hvwckxprc/image/fetch/c_fill,h_312,w_312/https://d2bythind2nctn.cloudfront.net/assets/job_tasks/winter_tires.jpg" alt="Winter tires">
          </div>
          <div class="col-sm-10" data-link="/my/jobs/417445/offers">
            <div class="job-info">
              <span class="label gotten">Tilbud indhentet</span>
              <div class="job-name ellipsis">
                <a class="job-name-link" href="/my/jobs/417445/offers">Vinterdæk</a>
              </div>
              <div class="car-info">
                Ford S-MAX (2008)
                <span class="hidden-xs">– Reg. nr. AU17167</span>
              </div>
            </div>
            <div class="job-reference text-muted">
              Oprettet 19. januar 2016
            </div>
          </div>
        </div>
      </div>
      <div class="info-area">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-2">
            <div class="info-content">
              <div class="job-status">
                Dine
                <span class="job_count">4</span>
                tilbud er klar
              </div>
              <div class="job-text">
                Se hvad du sparer og vælg et tilbud nu
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cta-area">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-2">
            <div class="cta-area-content">
              <div class="row">
                <div class="col-sm-6">
                  <div class="hidden-xs offers-count-progress full">
                    <div class="fill" style="width: 100%;"></div>
                    <div class="progress-divider" style="left: 25%"></div>
                    <div class="progress-divider" style="left: 50%"></div>
                    <div class="progress-divider" style="left: 75%"></div>
                    <div class="progress-divider" style="left: 100%"></div>
                  </div>
                  <div class="hidden-xs job-area">
                    <i class="fa fa-map-marker"></i>
                    Nær 7800 Skive
                  </div>
                </div>
                <div class="col-sm-6 text-right">
                  <a class="btn btn-primary hidden-xs" href="/my/jobs/417445/offers">
                    Se tilbud
                  </a>
                  <a class="btn btn-primary visible-xs-block" href="/my/jobs/417445/offers">
                    Se tilbud
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-backdrop">
    <div class="timeline"></div>
    <h2 class="card-backdrop-headline">
      2016
    </h2>
    <div class="job-card card card-responsive card-fluid card-bordered" data-car-id="309458">
      <div class="card-header">
        <div class="row">
          <div class="hidden-xs col-sm-2 job-image-container">
            <img width="312" height="312" class="job-image" src="http://res.cloudinary.com/hvwckxprc/image/fetch/c_pad,h_312,w_312/https://d2bythind2nctn.cloudfront.net/assets/job_tasks/tires.jpg" alt="Tires">
          </div>
          <div class="col-sm-10">
            <div class="job-info">
              <div class="job-name ellipsis">
                <a class="job-name-link" href="/my/planner">Sommerdæk/skift til sommerdæk</a>
              </div>
              <div class="car-info">
                Ford S-MAX (2010)

                <span class="hidden-xs">– Reg. nr. DF33014</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="hidden-xs col-sm-2">&nbsp;</div>
          <div class="col-sm-10">
            <div class="job-date clearfix">
              <div class="lead-in">Dato for næste sommerdæk skifte</div>
              <div class="job-datepicker">
                <form
                  class="edit_job_recommendation"
                  id="edit_job_recommendation_1757570"
                  action="/job_recommendations/1757570"
                  accept-charset="UTF-8"
                  method="post">
                  <input value="01-04-2016" inputmode="verbatim" class="date-input" type="text" name="job_recommendation[suggested_time]" id="job_recommendation_suggested_time" data-original-title="" title="">&nbsp;<i class="fa fa-fw fa-pencil js-datepicker-toggle"></i>
                </form>
              </div>
              <a href="#" class="change-date hidden-xs js-datepicker-toggle">Skift dato</a>
              <a class="cta-link pull-right" href="/jobs/new?car_id=309458&amp;job_task_type=73">
                Få 3 tilbud
              </a>
              <div class="info-text text-muted">
                <i class="fa fa-fw fa-info-circle"></i>&nbsp; Datoen er en anbefaling baseret på dine bildata
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="job-card card card-responsive card-fluid card-bordered" data-car-id="309458">
      <div class="card-header">
        <div class="row">
          <div class="hidden-xs col-sm-2 job-image-container">
            <img width="312" height="312" class="job-image" src="http://res.cloudinary.com/hvwckxprc/image/fetch/c_pad,h_312,w_312/https://d2bythind2nctn.cloudfront.net/assets/job_tasks/winter_tires.jpg" alt="Winter tires">
          </div>
          <div class="col-sm-10">
            <div class="job-info">
              <div class="job-name ellipsis">
                <a class="job-name-link" href="/my/planner">Vinterdæk/skift til vinterdæk</a>
              </div>
              <div class="car-info">
                Ford S-MAX (2010)

                <span class="hidden-xs">– Reg. nr. DF33014</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="hidden-xs col-sm-2">&nbsp;</div>
          <div class="col-sm-10">
            <div class="job-date clearfix">
              <div class="lead-in">Dato for næste vinterdæk skifte</div>
              <div class="job-datepicker">
                <form
                  class="edit_job_recommendation"
                  id="edit_job_recommendation_1757569"
                  action="/job_recommendations/1757569"
                  accept-charset="UTF-8"
                  method="post">
                  <input value="01-10-2016" inputmode="verbatim" class="date-input" type="text" name="job_recommendation[suggested_time]" id="job_recommendation_suggested_time" data-original-title="" title="">&nbsp;<i class="fa fa-fw fa-pencil js-datepicker-toggle"></i>
                </form>
              </div>
              <a href="#" class="change-date hidden-xs js-datepicker-toggle">Skift dato</a>
              <a class="cta-link pull-right" href="/jobs/new?car_id=309458&amp;job_task_type=75">
                Få 3 tilbud
              </a>
              <div class="info-text text-muted">
                <i class="fa fa-fw fa-info-circle"></i>&nbsp; Datoen er en anbefaling baseret på dine bildata
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-backdrop now">
    <h2 class="card-backdrop-headline">
      <i class="fa fa-fw fa-calendar"></i>&nbsp;<span class="what">Planlæg</span>
      <span class="when text-muted hidden-xs">Næste opgave</span>
    </h2>

    <a class="context-link text-muted" href="/my/planner">Kommende opgaver</a>

    <div class="card-greeting blue">
      <div class="col-xs-12">
        <h2 class="card-backdrop-headline">Få din bil undervognsbehandlet nu</h2>
        <p>Indhent 3 tilbud nu</p>
      </div>
      <div class="card card-responsive">
        <div class="card-content">
          <div class="row">
            <div class="hidden-xs col-sm-2">
              <img
                width="156"
                height="156"
                class="img-circle img-responsive"
                src="https://res.cloudinary.com/hvwckxprc/image/fetch/b_rgb:000,c_fill,h_156,o_96,q_100,w_156/https://d2bythind2nctn.cloudfront.net/assets/support/garagesupport_dk.jpg"
                alt="Supporter dk v2">
            </div>

            <div class="col-sm-10 col-md-8">
              <div class="card-info">
                <h3 class="text-normal card-content-headline">
                  Skån bilens undervogn mod rust og gennemtæring
                </h3>
                <p></p>
                <p>Spar tid og op til 40% hos vores kvalitetsværksteder</p>
                <p></p>
                <span class="hidden-xs">Brug for hjælp? Ring til os på
                  <strong>77 34 32 21</strong><br>
                  Jimmie Christensen, mekaniker</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <style media="screen">
      .card-greeting {
        background-image: url('https://res.cloudinary.com/hvwckxprc/image/fetch/b_rgb:0068ac,e_blur:300,o_21/https://d2bythind2nctn.cloudfront.net/job_tasks/dk/underseal.jpg');
      }
    </style>
    <div class="job-card card card-responsive card-fluid card-bordered" data-car-id="223831">
      <div class="card-header">
        <div class="row">
          <div class="hidden-xs col-sm-2 job-image-container">
            <img width="312" height="312" class="job-image" src="https://res.cloudinary.com/hvwckxprc/image/fetch/c_pad,h_312,w_312/https://d2bythind2nctn.cloudfront.net/assets/job_tasks/underseal.jpg" alt="Underseal">
          </div>
          <div class="col-sm-10">
            <div class="job-info">
              <div class="job-name ellipsis">
                <a class="job-name-link" href="/my/planner">Undervognsbehandling</a>
              </div>
              <div class="car-info">
                Tesla Model S (2014)
                <span class="hidden-xs">– Reg. nr. AP84755</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="hidden-xs col-sm-2">&nbsp;</div>
          <div class="col-sm-10">
            <div class="job-date clearfix">
              <div class="lead-in">Dato for næste undervognsbehandling</div>
              <div class="job-datepicker">
                <form
                  class="edit_job_recommendation"
                  accept-charset="UTF-8"
                  method="post">
                  <input value="06-08-2016" inputmode="verbatim" class="date-input" type="text" name="job_recommendation[suggested_time]" id="job_recommendation_suggested_time" data-original-title="" title="">&nbsp;<i class="fa fa-fw fa-pencil js-datepicker-toggle"></i>
                </form>
              </div>
              <a href="#" class="change-date hidden-xs js-datepicker-toggle">Skift dato</a>
              <a class="cta btn btn-primary hidden-xs pull-right" href="/jobs/new?car_id=223831&amp;job_task_type=48">
                Få 3 tilbud
              </a>
              <div class="info-text text-muted">
                <i class="fa fa-fw fa-info-circle"></i>&nbsp; Datoen er en anbefaling baseret på dine bildata
              </div>
              <a href="#" class="cta btn btn-primary visible-xs-block">Få 3 tilbud</a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Content header

This is a scaled back hero unit with just a set background image and a headline. It's what we use for a lot of sub-pages, and even for this very page and it's siblings in the Kitchen Sink!

Content header

<div class="content-header text-center">
  <h1 class="headline">Content header</h1>
</div>

Context navigation (My Garage)

This is the context navigation for My Garage. This is how the car owner navigates between the various areas of My Garage.

</div>
<header class="context-navigation-header hidden-print">
  <div class="container">
    <ul class="context-navigation-navbar">
      <li class="nav-item inactive ">
        <a href="/my/garage">
          <i class="fa fa-2x fa-th-large"></i>Overblik</a>
      </li>
      <li class="nav-item inactive ">
        <a href="/cars">
          <i class="fa fa-2x fa-car"></i>Biler</a>
      </li>
      <li class="nav-item inactive ">
        <a href="/my/jobs">
          <i class="fa fa-2x fa-wrench"></i>Opgaver</a>
      </li>
      <li class="nav-item active ">
        <a href="/my/planner">
          <i class="fa fa-2x fa-calendar"></i>Planlæg</a>
      </li>
      <li class="nav-item inactive non-essential">
        <a href="/my/benefits">
          <i class="fa fa-2x fa-certificate"></i>Fordele</a>
      </li>
      <li class="nav-item inactive non-essential">
        <a href="/my/archive">
          <i class="fa fa-2x fa-archive"></i>Arkiv</a>
      </li>
      <li class="nav-item more dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <span class="nav-el">
            <span class="nav-icon"> <i class="fa fa-ellipsis-h"></i> </span>Mere
          </span>
        </a>
        <ul class="dropdown-menu dropdown-menu-right navigation-dropdown-menu" role="menu">
          <li>
            <a href="/my/benefits">
              <i class="fa fa-certificate fa-fw"></i>&nbsp;Fordele</a>
          </li>
          <li>
            <a href="/my/archive">
              <i class="fa fa-archive fa-fw"></i>&nbsp;Arkiv</a>
          </li>
          <li class="divider" role="separator"></li>
          <li>
            <a href="/flow">
              <i class="fa fa-wrench fa-fw"></i>&nbsp;Opret opgave</a>
          </li>
          <li>
            <a href="/my/cars/new">
              <i class="fa fa-car fa-fw"></i>&nbsp;Opret bil</a>
          </li>
        </ul>
      </li>
    </ul>
    <div class="context-navigation-button btn-group hidden-xs pull-right">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-fw fa-plus-square"></i>&nbsp;Opret
      </button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li>
          <a href="/flow">
            <i class="fa fa-fw fa-wrench"></i>&nbsp;Opret opgave
          </a>
        </li>
        <li>
          <a href="/my/cars/new">
            <i class="fa fa-fw fa-car"></i>&nbsp;Opret bil
          </a>
        </li>
      </ul>
    </div>
  </div>
</header>
<div class="container">

Details panel

The details panel is something we use to display a bunch of information that might be slightly related but still distinct. For example Benefits for a car owner's car.

Lorem


Company logo

Company name

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read more

Company logo

Company name

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read more

Ipsum


Company logo

Company name

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read more

Dolor


Company logo

Company name

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read more
<div class="details-panel">
  <div class="details-wrap clearfix">
    <div class="details-nav">
      <ul class="nav nav-list nav-list-details" id="benefits-tab">
        <li class="active">
          <a data-toggle="tab" href="#tab1">Lorem</a>
        </li>
        <li class="">
          <a data-toggle="tab" href="#tab2">Ipsum</a>
        </li>
        <li class="">
          <a data-toggle="tab" href="#tab3">Dolor</a>
        </li>
      </ul>
    </div>
    <div class="details-content tab-content">
      <div class="tab-pane active" id="tab1">
        <h2>Lorem</h2>
        <hr>
        <div class="img-container partner"><img src="http://placehold.it/180x180&text=Logo" alt="Company logo"></div>
        <div class="partner-benefit-tab">
          <h3>Company name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a data-target="#company1-modal" data-toggle="modal" class="btn btn-default btn-sm" href="#">Read more</a>
        </div>
        <div id="company1-modal" class="modal partner-benefit-modal" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Company name</h3>
              </div>
              <div class="modal-body">
                <div class="img-container partner"><img src="http://placehold.it/180x180&text=Logo" alt="Company logo"></div>
                <span class="text">
                  <h4>Company service</h4>
                  <p>
                    <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong><br>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iste harum atque velit quis quibusdam architecto quod laborum ut adipisci!</p>
                </span>
              </div>
              <div class="modal-footer">
                <a target="_blank" class="btn btn-primary" href="#">CTA Text</a>
              </div>
            </div>
          </div>
        </div>
        <hr>
        <div class="img-container partner"><img src="http://placehold.it/180x180&text=Logo" alt="Company logo"></div>
        <div class="partner-benefit-tab">
          <h3>Company name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a data-target="#company2-modal" data-toggle="modal" class="btn btn-default btn-sm" href="#">Read more</a>
        </div>
        <div id="company2-modal" class="modal partner-benefit-modal" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Company name</h3>
              </div>
              <div class="modal-body">
                <div class="img-container partner"><img src="http://placehold.it/180x180&text=Logo" alt="Company logo"></div>
                <span class="text">
                  <h4>Company service</h4>
                  <p>
                    <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong><br>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iste harum atque velit quis quibusdam architecto quod laborum ut adipisci!</p>
                </span>
              </div>
              <div class="modal-footer">
                <a target="_blank" class="btn btn-primary" href="#">CTA Text</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane" id="tab2">
        <h2>Ipsum</h2>
        <hr>
        <div class="img-container partner"><img src="http://placehold.it/180x180&text=Logo" alt="Company logo"></div>
        <div class="partner-benefit-tab">
          <h3>Company name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a data-target="#company3-modal" data-toggle="modal" class="btn btn-default btn-sm" href="#">Read more</a>
        </div>
        <div id="company3-modal" class="modal partner-benefit-modal" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Company name</h3>
              </div>
              <div class="modal-body">
                <div class="img-container partner"><img src="http://placehold.it/180x180&text=Logo" alt="Company logo"></div>
                <span class="text">
                  <h4>Company service</h4>
                  <p>
                    <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong><br>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iste harum atque velit quis quibusdam architecto quod laborum ut adipisci!</p>
                </span>
              </div>
              <div class="modal-footer">
                <a target="_blank" class="btn btn-primary" href="#">CTA Text</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane" id="tab3">
        <h2>Dolor</h2>
        <hr>
        <div class="img-container partner"><img src="http://placehold.it/180x180&text=Logo" alt="Company logo"></div>
        <div class="partner-benefit-tab">
          <h3>Company name</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a data-target="#company4-modal" data-toggle="modal" class="btn btn-default btn-sm" href="#">Read more</a>
        </div>
        <div id="company4-modal" class="modal partner-benefit-modal" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Company name</h3>
              </div>
              <div class="modal-body">
                <div class="img-container partner"><img src="http://placehold.it/180x180&text=Logo" alt="Company logo"></div>
                <span class="text">
                  <h4>Company service</h4>
                  <p>
                    <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong><br>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iste harum atque velit quis quibusdam architecto quod laborum ut adipisci!</p>
                </span>
              </div>
              <div class="modal-footer">
                <a target="_blank" class="btn btn-primary" href="#">CTA Text</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Job accordion

This is how we dispay details about a created job on the offers overview page. It's a slightly modified collapsible .panel-group.

Job type

    Checklist item

    Description
    Description as written by the car owner.
    Time
    Next available time
    Courtesy car
    No thanks
Edit job You can't edit a job for which you have already received offers.
<div class="panel-group job-accordion" id="job-tasks-accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="job-tasks-accordion-heading">
      <a class="panel-title collapsed" data-toggle="collapse" data-parent="#job-tasks-accordion" href="#job_tasks_and_actions" aria-expanded="false" aria-controls="job_tasks_and_actions">
        <i class="fa fa-caret-down fa-fw"></i>&nbsp;Job description
        <span class="fake-link show-panel pull-right">Show</span>
        <span class="fake-link hide-panel pull-right">Hide</span>
      </a>
    </div>
    <div id="job_tasks_and_actions" class="panel-collapse collapse" role="tabpanel" aria-labelledby="job-tasks-accordion-heading">
      <div class="panel-body">
        <strong>Job type</strong>
        <ul>
          <p>
            <i class="fa fa-check fa-fw"></i>
            Checklist item
          </p>
          <strong>Description</strong><br>
          Description as written by the car owner.
        </ul>
        <ul>
          <strong>Time</strong><br>
          <span class="period">Next available time</span>
        </ul>
        <ul>
          <strong>Courtesy car</strong><br>
          <span class="wants-courtesy-car">No thanks</span>
        </ul>
        <a class="btn btn-default btn-form-submit" disabled="disabled" href="/jobs/421423/edit">Edit job</a>
        You can't edit a job for which you have already received offers.
      </div>
    </div>
  </div>
</div>

Modals

Modals are a way of showing a limited amount of additional information on a page, without having to navigate elsewhere.

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog. These are: .modal-sm and .modal-lg.

My Garage list

This is how we display a list of items in My Garage. We use it for cars, jobs, and documents.

Tandrem Tilbud indhentet

Ford S-MAX (2010)
Reg. nr DF33014
Oprettet 01/02/2016
Reference ab421423

Kobling Annulleret

Ford S-MAX (2008)
Reg. nr AU17167
Oprettet 19/01/2016
Reference ab417430
<div class="car-owner-dashboard">
  <!-- List of jobs -->
  <div class="my-garage-list">
    <div data-link="/my/jobs/421423/offers">
      <div class="list-item">
        <div class="list-content">
          <h3 class="ellipsis">
            <a data-tracking="{&quot;category&quot;:&quot;mygarage_jobs&quot;,&quot;action&quot;:&quot;go_to_offer_overview&quot;,&quot;value&quot;:{&quot;clicked_on&quot;:&quot;title&quot;}}" href="/my/jobs/421423/offers">Tandrem</a>
            <span class="label label-success">Tilbud indhentet</span>
          </h3>
          <strong>Ford S-MAX (2010)</strong>
          <span class="dot hidden-xs">·</span><br>Reg.&nbsp;nr&nbsp;<strong>DF33014</strong>
          <span class="dot hidden-xs">·</span><br>Oprettet&nbsp;<strong>01/02/2016</strong>
          <span class="dot hidden-xs">·</span><br>Reference&nbsp;<strong>ab421423</strong>
          <div class="btn-group hidden-xs hidden-sm">
            <a class="btn btn-default" data-tracking="{&quot;category&quot;:&quot;mygarage_jobs&quot;,&quot;action&quot;:&quot;go_to_offer_overview&quot;,&quot;value&quot;:{&quot;clicked_on&quot;:&quot;button&quot;}}" href="/my/jobs/421423/offers">Vis tilbud</a>
          </div>
          <a class="text-muted" data-tracking="{&quot;category&quot;:&quot;mygarage_jobs&quot;,&quot;action&quot;:&quot;go_to_offer_overview&quot;,&quot;value&quot;:{&quot;clicked_on&quot;:&quot;chevron&quot;}}" href="/my/jobs/421423/offers">
            <i class="fa fa-angle-right fa-fw fa-2x"></i>
          </a>
        </div>
      </div>
    </div>
    <div data-link="/my/jobs/417430/offers">
      <div class="list-item">
        <div class="list-content">
          <h3 class="ellipsis">
            <a data-tracking="{&quot;category&quot;:&quot;mygarage_jobs&quot;,&quot;action&quot;:&quot;go_to_offer_overview&quot;,&quot;value&quot;:{&quot;clicked_on&quot;:&quot;title&quot;}}" href="/my/jobs/417430/offers">Kobling</a>
            <span class="label label-default">Annulleret</span>
          </h3>
          <strong>Ford S-MAX (2008)</strong>
          <span class="dot hidden-xs">·</span><br>Reg.&nbsp;nr&nbsp;<strong>AU17167</strong>
          <span class="dot hidden-xs">·</span><br>Oprettet&nbsp;<strong>19/01/2016</strong>
          <span class="dot hidden-xs">·</span><br>Reference&nbsp;<strong>ab417430</strong>
          <div class="btn-group hidden-xs hidden-sm">
            <a class="btn btn-default" data-tracking="{&quot;category&quot;:&quot;mygarage_jobs&quot;,&quot;action&quot;:&quot;go_to_offer_overview&quot;,&quot;value&quot;:{&quot;clicked_on&quot;:&quot;button&quot;}}" href="/my/jobs/417430/offers">Vis tilbud</a>
          </div>
          <a class="text-muted" data-tracking="{&quot;category&quot;:&quot;mygarage_jobs&quot;,&quot;action&quot;:&quot;go_to_offer_overview&quot;,&quot;value&quot;:{&quot;clicked_on&quot;:&quot;chevron&quot;}}" href="/my/jobs/417430/offers">
            <i class="fa fa-angle-right fa-fw fa-2x"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>