Molecules

Callout

A callout is something we use to call out to the user, if we have some important information we want them to read. Usually at the top of a page.

Important information

This is an important message from your friendly Butlers! Please read all of it. That would be helpful.

Informative information

This is an informative message from your friendly Butlers! Please read all of it. That would be helpful.

<div class="callout">
  <h4 class="callout-headline">
    Important information
  </h4>
  <p>
    This is an important message from your friendly Butlers!
    Please read all of it. That would be helpful.
  </p>
</div>
<div class="callout info">
  <h4 class="callout-headline">
    Informative information
  </h4>
  <p>
    This is an informative message from your friendly Butlers!
    Please read all of it. That would be helpful.
  </p>
</div>

Car filter button

These buttons are used in My Garage when filtering out on any overview page.

BMW 116d
<a class="btn btn-default car-filter-button" href="#">
  <img
    width="56"
    height="56"
    class="car-logo"
    src="http://res.cloudinary.com/hvwckxprc/image/fetch/c_pad,f_png,h_56,w_56/https://d2bythind2nctn.cloudfront.net/assets/car_brands/bmw.png"
    alt="Bmw"
  >
  BMW 116d
</a>

Card

Cards are a big part of the current look and feel of Autobutler. They are based in part on some of the tenents from Google's Material Design. They are supposed to look like physical cards with content on them and are great for separating the UI into manageable chunks.

Cards can contain lots of different content.
<div class="card">
  <div class="card-content">
    Cards can contain lots of different content.
  </div>
</div>

Card variations

We have a few different types of cards, which all behave a little different. .card-responsive and .card-fluid are different ways of scaling with the viewport, but we also have classes like .card-bordered, .card-blue, and .card-transparent which change the look of the card in question.

Cards can contain lots of different content and be responsive, too!

Cards can contain lots of different content and be fluid, too!

Cards can contain lots of different content.
Which can be visually distinct.

Cards can contain lots of different content, while their background is transparent.

Cards can contain lots of different content and they can be blue!
Cards can even be a combination of two or more of the above!
Whaaaaaaaaaaaaaaaaaaaaaaaaat?
<div class="card card-responsive">
  <div class="card-content">
    Cards can contain lots of different content and be responsive, too!
  </div>
</div>
<hr>
<div class="card card-fluid">
  <div class="card-content">
    Cards can contain lots of different content and be fluid, too!
  </div>
</div>
<hr>
<div class="card card-bordered">
  <div class="card-content">
    Cards can contain lots of different content.
  </div>
  <div class="card-content">
    Which can be visually distinct.
  </div>
</div>
<hr>
<div class="card card-transparent">
  <div class="card-content">
    Cards can contain lots of different content, while their background is transparent.
  </div>
</div>
<hr>
<div class="card card-blue">
  <div class="card-content">
    Cards can contain lots of different content and they can be blue!
  </div>
</div>
<div class="card card-responsive card-bordered card-blue">
  <div class="card-content">
    Cards can even be a combination of two or more of the above!
  </div>
  <div class="card-content">
    Whaaaaaaaaaaaaaaaaaaaaaaaaat?
  </div>
</div>

Card header

Sometimes we put a nice little header inside a card. This is what that looks like.

A nice little header

And a little bit of content to show the difference.
<div class="card card-responsive">
  <h3 class="card-header">
    A nice little header
  </h3>
  <div class="card-content">
    And a little bit of content to show the difference.
  </div>
</div>

Custom media

This is a twist on the regular media object from Bootstrap in which we use the font-size: 0;-hack instead of floating.

We use our own version in order to have a container that doesn't automatically change it's size to accommodate the content, which is the default behaviour of the Bootstrap media object, since it uses display: table-cell;. This approach allows us to truncate text inside the custom media object using text-overflow: ellipsis.

The default vertical alignment is middle, but can be changed with either .top or .bottom.

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ipsum.

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ipsum.

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ipsum.
<div class="custom-media top">
  <img src="http://placehold.it/80x80&text=Image" alt="">
  <div class="content">
    <h4>Heading</h4>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ipsum.
  </div>
</div>
<br>
<div class="custom-media">
  <img src="http://placehold.it/80x80&text=Image" alt="">
  <div class="content">
    <h4>Heading</h4>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ipsum.
  </div>
</div>
<br>
<div class="custom-media bottom">
  <img src="http://placehold.it/80x80&text=Image" alt="">
  <div class="content">
    <h4>Heading</h4>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ipsum.
  </div>
</div>

Datepicker

This is our version of a jQuery UI datepicker. Nothing out of the ordinary, just a simpler, flatter styling. The markup is generated by jQuery UI Javascript.

Used pretty much wherever the user might need to set a date. Sometimes by itself, sometimes as a Datepicker popover.

<div class="datepicker"></div>

Datepicker popover

Sometimes we combine a Datepicker with a Bootstrap popover and get something like this. Good for attaching to input fields that require a date in a specific format.

<div
  class="popover bottom datepicker-popover"
  role="tooltip"
  style="display: inline-block; position: relative;"
>
  <div class="arrow"></div>
  <div class="popover-content text-center">
    <div class="datepicker"></div>
    <div class="btn-container center-block">
      <button type="button" class="btn btn-default" data-plus="14">
        2 uger
      </button>
      <button type="button" class="btn btn-default" data-plus="30">
        1 måned
      </button>
      <button type="button" class="btn btn-default" data-plus="90">
        3 måneder
      </button>
      <input
        type="submit"
        class="btn btn-secondary btn-block"
        value="OK"
      />
    </div>
  </div>
</div>

Input with icon(s)

This is an input field that can show one or more icons inside of it to reflect the current state of the input. Good for AJAX-y purposes to inform the user that stuff is going on in the background, and then for showing what the outcome of that is.

<div class="form-horizontal">
  <div class="form-group">
    <!-- Search field -->
    <div class="col-sm-6 col-md-5 col-lg-4">
      <div class="input-with-icon left">
        <i class="fa fa-search text-muted"></i>
        <input class="form-control" type="search" placeholder="Zip code/city">
      </div>
    </div>
  </div>
  <div class="form-group">
    <!-- Getting stuff -->
    <div class="col-sm-6 col-md-5 col-lg-4">
      <div class="input-with-icon right">
        <input class="form-control" type="email" placeholder="Email, please" value="[email protected]">
        <i class="fa fa-spinner fa-pulse text-muted"></i>
      </div>
    </div>
  </div>
  <div class="form-group">
    <!-- Stuff gotten -->
    <div class="col-sm-6 col-md-5 col-lg-4">
      <div class="input-with-icon right">
        <input class="form-control" type="email" placeholder="Email, please" value="[email protected]">
        <i class="fa fa-check-circle green-text"></i>
      </div>
    </div>
  </div>
  <div class="form-group">
    <!-- Stuff not gotten -->
    <div class="col-sm-6 col-md-5 col-lg-4">
      <div class="input-with-icon right">
        <input class="form-control" type="email" placeholder="Email, please" value="[email protected]">
        <i class="fa fa-times-circle red-text"></i>
      </div>
    </div>
  </div>
</div>

Job file

This is a representation of a file that's been uploaded in connection with a job. The name of the file links to the uploaded file in the system, and the cross-icon will delete it. We use a picture-icon because that's usually what people upload when creating a job.

Name of file
<div class="job-file">
  <%= link_to '#' do %>
    <i class="fa fa-fw fa-picture-o"></i> Name of file
  <% end %>
  <%= link_to '#', class: 'delete-file', method: :delete, remote: true, data: { confirm: 'Remove?' } do %>
    <i class="fa fa-fw fa-times-circle"></i>
  <% end %>
</div>

License plate input

This is an input field that is styled to look like a simplified version of a European license plate. We use it mainly in our flow when the user inputs their license plate, but also sometimes for displaying their license plate to them.

da
da
<div class="row">
  <!-- With button -->
  <div class="col-sm-6 col-md-5 col-lg-4">
    <div class="input-group license-plate-input">
      <span class="input-group-addon country-code">
        <img src="http://res.cloudinary.com/hvwckxprc/image/fetch/c_pad,f_png,h_140,w_56/https://d2bythind2nctn.cloudfront.net/assets/license_plate/da.png" alt="da">
      </span>
      <input class="form-control text-center text-bold" id="job_registration_number" name="job[registration_number]" type="text" value="AB12354">
      <span class="input-group-btn">
        <button type="button" class="btn btn-square btn-secondary">
          <i class="fa fa-fw fa-lg fa-search"></i>
        </button>
      </span>
    </div>
  </div>
  <!-- Without button (disabled) -->
  <div class="col-sm-6 col-md-5 col-lg-4">
    <div class="input-group license-plate-input">
      <span class="input-group-addon country-code">
        <img src="http://res.cloudinary.com/hvwckxprc/image/fetch/c_pad,f_png,h_140,w_56/https://d2bythind2nctn.cloudfront.net/assets/license_plate/da.png" alt="da">
      </span>
      <input class="form-control text-center text-bold" id="job_registration_number" name="job[registration_number]" type="text" value="AB12354" disabled>
    </div>
  </div>
</div>

Play video link

This is an icon in a circle and a link, which we mainly use to show the user how Autobutler works, but could potentially be used to launch any video.

This version only works on dark background colours or -images.

Pseudo-bullets

Pseudo-bullets is a pattern for showing stuff in a list format, even though it might not be an actual ul or ol. It's designed so you can use pretty much whatever as bullet points, but I would reccommend an icon of some sort. Plus, the text won't wrap under the bullet when breaking onto a new line.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero veniam magnam eaque in doloribus tempore a suscipit eligendi, assumenda enim corrupti quae atque ipsa temporibus expedita recusandae quibusdam repellat accusantium.
Similique odio ad non aut soluta nihil, quibusdam laborum nam dolorem hic omnis fugit, doloribus ab tempore rem quidem! Ipsum vero aliquam voluptatem autem illo ad tenetur molestiae, modi porro.
Maxime earum vero, non officia vel, aliquid nihil ipsa ut laudantium impedit, repellendus amet voluptatum odit accusantium autem porro, nesciunt expedita! Itaque id esse atque ullam inventore quisquam quia placeat?
<div class="pseudo-bullets">
  <div class="list-item">
    <i class="bullet fa fa-fw fa-lg fa-hand-rock-o"></i>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero veniam magnam eaque in doloribus tempore a suscipit eligendi, assumenda enim corrupti quae atque ipsa temporibus expedita recusandae quibusdam repellat accusantium.</div>
  </div>
  <div class="list-item">
    <i class="bullet fa fa-fw fa-lg fa-hand-paper-o"></i>
    <div class="text">Similique odio ad non aut soluta nihil, quibusdam laborum nam dolorem hic omnis fugit, doloribus ab tempore rem quidem! Ipsum vero aliquam voluptatem autem illo ad tenetur molestiae, modi porro.</div>
  </div>
  <div class="list-item">
    <i class="bullet fa fa-fw fa-lg fa-hand-scissors-o"></i>
    <div class="text">Maxime earum vero, non officia vel, aliquid nihil ipsa ut laudantium impedit, repellendus amet voluptatum odit accusantium autem porro, nesciunt expedita! Itaque id esse atque ullam inventore quisquam quia placeat?</div>
  </div>
</div>

Pseudo-tooltip

We did use this for a pop-up on our front-page at one point, but that is no longer live. The molecule itself is still nice though, and could potentially be used elsewhere.

Some text for the pseudo-tooltip.
And some text for the other pseudo-tooltip.
<div class="tooltip-wrapper center-block text-center" style="width: 220px;">
  <div class="pseudo-tooltip left">
    Some text for the pseudo-tooltip.
  </div>
  <img src="http://placehold.it/200x200/333333/ffffff/&text=Tooltip+this!" alt="" />
  <div class="pseudo-tooltip right">
    And some text for the other pseudo-tooltip.
  </div>
</div>

Public comment

This is how we display a comment that is publicly or semi-publicly available. Be it in my garage or on a mechanic's Reviews page.

Depending on the sender, the receiver, and the context, the comment can have different looks. If it's a comment you sent yourself, it will be blue and you can delete it by clicking the little close-button. If it's not sent by you, it will either be gray or orange if it was sent by an admin.

Timestamps can appear either inside or outside the comment itself.

×

Car owner

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate praesentium ad ratione tempora, doloremque obcaecati aliquam voluptate expedita magnam!
28. nov 2020

Mechanic

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quas id nam nulla fuga voluptatibus.
28. nov 2020

Admin

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, quod.
28. nov 2020
<div class="row">
  <div class="col-sm-6 col-sm-offset-3">
    <div class="public-comment mine">
      <%= link_to '×', '#',
        class: 'delete-public-comment',
        data: {
          confirm: 'Are you sure?',
          method: :delete,
          remote: true
        }
      %>
      <p>
        <strong>Car owner</strong>
      </p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate praesentium ad ratione tempora, doloremque obcaecati aliquam voluptate expedita magnam!
      <div class="public-comment-timestamp">
        <%= l(Date.current, format: :short) %>
      </div>
    </div>
    <div class="public-comment theirs">
      <p>
        <strong>Mechanic</strong>
      </p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quas id nam nulla fuga voluptatibus.
    </div>
    <div class="public-comment-timestamp">
      <%= l(Date.current, format: :short) %>
    </div>
    <div class="public-comment from-admin theirs">
      <p>
        <strong>Admin</strong>
      </p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, quod.
      <div class="public-comment-timestamp">
        <%= l(Date.current, format: :short) %>
      </div>
    </div>
  </div>
</div>

Star rating

These are the stars we always use for ratings. They are rendered by an extremely versatile partial, which generates markup based on the variables passed into it.

Here's a list of values that can be set for the partial:

rating_value The rating value as either an integer or float Any number between 0 and 5. Default value is 0
size The size of the stars Possible values: nothing (default), small, medium, and large
color The colour of the stars. Possible values: orange (default), blue, green, dark-green, red, and white
show_rating Whether or not to show the rating as a number after the stars. Either true or false (default)
show_reviews_count Whether or not to show the number of reviews given. Note: if this is set, a value for num_of_reviews is required. Either true or false (default)
num_of_reviews The actual amount of reviews given. Any value. It will be appended to the partial and shown below the stars. Will fall back to a value of 0 if nothing is provided. If the value is 0, a message like "Not yet rated" will be shown instead.
output_aggregate_rating Whether or not to output aggregateRating and it's related meta values for SEO purposes. Either true or false (default)
shorthand_num_of_reviews Whether or not to show the number of reviews in a shorthand format like so: (231) Either true or false (default)

4,5
(0)

(231)

4,5
(231)
<%=
  render 'commons/star_rating',
  rating_value: 5,
  size: 'small'
%>
<hr>
<%=
  render 'commons/star_rating',
  rating_value: 4.5,
  show_rating: true,
  show_reviews_count: true
%>
<hr>
<%=
  render 'commons/star_rating',
  rating_value: 4.5,
  show_reviews_count: true,
  num_of_reviews: 231,
  shorthand_num_of_reviews: true
%>
<hr>
<%=
  render 'commons/star_rating',
  rating_value: 4.5,
  size: 'large',
  show_rating: true,
  show_reviews_count: true,
  num_of_reviews: 231
%>