4 molecules Molecules

Source: 00-config/_variables.scss, line 21

4.1 molecules.form-elements Form elements

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

All form elements are grouped in a class .form-group. There can be a label, required astrix, input field and help text.

Example
*
We'll never share your email with anyone else.
Markup: 03-molecules/form-elements/form-element.twig
<div class="form-group">
  <label class="control-label" for="exampleInputEmail1">Email address</label><span class="form-required">*</span>
  <input type="email" id="exampleInputEmail1" required class="form-control" placeholder="Enter email">
  <div class="help-block">We'll never share your email with anyone else.</div>
</div>
Source: 03-molecules/form-elements/form-elements.scss, line 3

4.1.1 molecules.form-elements.inline-error Inline Form errors

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Added in release 1.6

For this feature the module Inline Form Errors should be enabled.

Alerts

When a form is submitted the user receives an alert message with either a confirmation the form is submitted successfully or with the feedback that there is an error. The feedback will then contain a link to the inline form feedback.

Inline feedback

The form-group div will get a class has-error which can be used to style any form element (children). The feedback is placed in a small dismissable alert. All the other fields remain in there original form.

Example
*
Email field is required.
We'll never share your email with anyone else.
Markup: 03-molecules/form-elements/inline-form-error.twig
<div class="form-group has-error">
  <label class="control-label" for="exampleInputEmail1">Email address</label><span class="form-required">*</span>
  <input type="email" id="exampleInputEmail1" required class="form-control" placeholder="Enter email">
  <div class="form-item--error-message alert alert-danger alert-sm alert-dismissible form-control-radius">
    <a href="#" role="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></a>
    Email field is required.
  </div>
  <div class="help-block">We'll never share your email with anyone else.</div>
</div>
Source: 03-molecules/form-elements/form-elements.scss, line 14

4.2 molecules.navigation Navigation

Source: 03-molecules/navigation/navbar/navbar.scss, line 3

4.2.1 molecules.navigation.breadcrumb Breadcrumbs

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content. They are hidden on mobile screens.

Example
Markup: 03-molecules/navigation/breadcrumb/breadcrumb.twig
<nav role="navigation" class="breadcrumbs">
  <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
  <ol class="breadcrumb container">
    <li>
      <a href="#">Home</a>
      <svg class="icon-gray icon-small">
        <use xlink:href="#icon-navigate_next"></use>
      </svg>
    </li>
    <li>
      <a href="#">Overview</a>
      <svg class="icon-gray icon-small">
        <use xlink:href="#icon-navigate_next"></use>
      </svg>
    </li>
    <li class="active"> Detail page</li>
  </ol>
</nav>
Source: 03-molecules/navigation/breadcrumb/breadcrumb.scss, line 3

4.2.2 molecules.navigation.nav-tabs Navbar secondary

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Make navbar scrollable on phones by wrapping .nav in .navbar-scrollable.

Markup: 03-molecules/navigation/navbar/navbar-scrollable.twig
<nav class="navbar navbar-secondary" role="navigation" >
  <div class="navbar-scrollable">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Stream</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Topics</a></li>
      <li><a href="#">Groups</a></li>
      <li><a href="#">Information</a></li>
    </ul>
  </div>
</nav>
Source: 03-molecules/navigation/navbar/navbar.scss, line 534

4.2.2 molecules.navigation.nav-tabs Nav tabs

Needs a description.

Source: 03-molecules/navigation/nav-tabs/nav-tabs.scss, line 1

4.2.3 molecules.navigation.pagination Pagination

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Provide pagination links with the multi-page pagination component. On mobile we only show the pagination items "previous", "next" and "active".

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

Example
Markup: 03-molecules/navigation/pagination/pagination.twig
<nav role="navigation" aria-labelledby="pagination-heading" class="pager-nav text-center">
  <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
  <ul class="pagination">
    <li class="disabled pager__item--previous">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">
         <svg class="icon-small icon-gray">
           <use xlink:href="#icon-navigate_before"></use>
         </svg>
        </span>
      </a>
    </li>
    <li class="active">
      <a href="#">1
        <span class="sr-only"> (current) </span>
      </a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="pager__item--next">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">
          <svg class="icon-small icon-gray">
           <use xlink:href="#icon-navigate_next"></use>
         </svg>
        </span>
      </a>
    </li>
  </ul>
</nav>
Source: 03-molecules/navigation/pagination/pagination.scss, line 1

4.2.4 molecules.navigation.nav-book Nav book

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Styles for table of contents as provided bij the social_book module. Menu items have triangle icons indicating wether there are menu items below this item or not. The highlighted path leads to the page title the user is currently viewing.

Markup: 03-molecules/navigation/nav-book/nav-book.twig
<ul block="block-booknavigation-2" class="nav-book">
  <li class="menu-item menu-item--collapsed">
    <a href="#">Lorem ipsum dolor sit amet</a>
  </li>
  <li class="menu-item menu-item--has-children menu-item--expanded menu-item--active-trail">
    <a href="#">Lorem ipsum dolor sit amet sequitur sunt</a>
    <ul class="menu">
      <li class="menu-item menu-item--has-children menu-item--expanded menu-item--active-trail">
        <a href="#">Lorem ipsum dolor sit amet</a>
        <ul class="menu">
          <li class="menu-item menu-item--active-trail">
            <a href="#">Lorem ipsum.</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#">Lorem ipsum dolor sit amet</a>
  </li>
</ul>
Source: 03-molecules/navigation/nav-book/nav-book.scss, line 1

4.3 molecules.teaser Teaser

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A teaser is a concept in Drupal.

A teaser is a short piece of text, usually the first paragraph or two of an article. This text is then displayed in most lists, including the default home page (/node). Many modules (including Views) are designed to work with node teasers, and the concept of a "teaser" vs the node "body" is integral to the workings of Drupal core and the Drupal UI.

The teaser can have image but it is not mandatory. Teasers can have one or two buttons (of type flat) which are in the actionbar. Content hierarchy is achieved by the order of fields and the use of typography. Try to limit the amount of information and actions in a teaser. On mobile the image field is not displayed. On tablet and wider the maximum height of the teaser should match the heigth of the image_style.

Example

Teaser title

29 Jan 2018 •
Blog
Open Social Developers
Markup: 03-molecules/teaser/teaser.twig
<div class="card teaser">

  <div class="teaser__image" >

    <div class="teaser__teaser-type">
      <svg class="teaser__teaser-type-icon">
        <use xlink:href="#icon-topic"></use>
      </svg>
    </div>

    <a href="#">
      <img src="kss-assets/teaser-1.jpg" alt="" class="img-responsive">
    </a>

  </div>

  <div class="teaser__body">
    <div class="teaser__content">

      <h4 class="teaser__title"> <a href="#">Teaser title</a></h4>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-account_circle"></use>
        </svg>
        <div class="teaser__content-text">
          <div class="teaser__published">
            <div class="teaser__published-date"> 29 Jan 2018 &bullet; </div>
            <div class="teaser__published-author">
              <a title="View user profile." href="#">Michelle Clark </a>
            </div>

          </div>
        </div>
      </div>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-event"></use>
        </svg>
        <div class="teaser__content-text">Blog</div>
      </div>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-group"></use>
        </svg>
        <div class="teaser__content-text">Open Social Developers</div>
      </div>

    </div>

    <div class="card__actionbar">

      <a href="#" class="badge badge--pill badge-default teaser__badge">
        <span class="badge__container">
          <svg class="badge__icon">
              <use xlink:href="#icon-comment"></use>
            </svg>
            <span class="badge__label">6</span>
        </span>
      </a>

      <div class="badge teaser__badge" title="The visibility of this content is set to public">
        <svg class="badge__icon">
          <use xlink:href="#icon-public"></use>
        </svg>
      </div>

      <a href="#" class="card__link">Read more</a>
    </div>

  </div>


</div>
Source: 03-molecules/teaser/teaser.scss, line 1

4.3.1 molecules.teaser.unpublished Teaser unpublished

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example
unpublished

Teaser title

29 Jan 2017 •
Blog
Open Social Developers
Markup: 03-molecules/teaser/teaser-unpublished.twig
<div class="card teaser teaser--unpublished">

  <div class="teaser__image" >

    <div class="teaser__teaser-type">
      <svg class="teaser__teaser-type-icon">
        <use xlink:href="#icon-topic"></use>
      </svg>
    </div>

    <a href="#">
      <img src="kss-assets/teaser-1.jpg" alt="" class="img-responsive">
    </a>

    <!-- diff -->
    <div class="teaser__status">unpublished</div>

  </div>

  <div class="teaser__body">
    <div class="teaser__content">

      <h4 class="teaser__title"> <a href="#">Teaser title</a></h4>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-account_circle"></use>
        </svg>
        <div class="teaser__content-text">
          <div class="teaser__published">
            <div class="teaser__published-date">29 Jan 2017 &bullet; </div>
            <div class="teaser__published-author">
              <a title="View user profile." href="#">Michelle Clark </a>
            </div>

          </div>
        </div>

      </div>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-event"></use>
        </svg>
        <div class="teaser__content-text">Blog</div>
      </div>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-group"></use>
        </svg>
        <div class="teaser__content-text">Open Social Developers</div>
      </div>

    </div>

    <div class="card__actionbar teaser__actionbar">

      <a href="#" class="badge badge--pill badge-default teaser__badge">
        <span class="badge__container">
          <svg class="badge__icon">
              <use xlink:href="#icon-comment"></use>
            </svg>
            <span class="badge__label">6</span>
        </span>
      </a>

      <div class="badge teaser__badge" title="The visibility of this content is set to public">
        <svg class="badge__icon">
          <use xlink:href="#icon-community"></use>
        </svg>
      </div>

      <a href="#" class="card__link">Read more</a>
    </div>

  </div>


</div>
Source: 03-molecules/teaser/teaser.scss, line 24

4.4 molecules.files File styles

There are two styles of displaying files. One style is showing files as attachments with articles. The other style is when files are in forms (edit mode).

Source: 03-molecules/file/file.scss, line 1

4.4.1 molecules.files.node File in node

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The display of files in nodes is done with small cards (emphasis layer). The cards must be placed in a grid .card-files__grid. The element consists of the file name (max 3 lines truncated), the file type and file size.

Markup: 03-molecules/file/file-node.twig
<ul class="card-files__grid">
<li class="card-file">
  <a class="card-file__link" href="#" title="{{ 'Open file in a new window'|t }}" target="_blank">
    <span class="card-file__title">Vestibulum id ligula porta felis euismod semper.pdf</span>
    <span class="card-file__type">
        <img class="card-file__icon" src="kss-assets/base/images/mime-icons/icon_1_pdf_x16.png" srcset="kss-assets/base/images/mime-icons/icon_1_pdf_x32.png 2x" alt="{{ node_icon }}" />
        <span class="card-file__size">40.14 KB</span>
      </span>
  </a>
</li>
</ul>
Source: 03-molecules/file/file.scss, line 10

4.4.2 molecules.files.form File in form

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Files in forms need to be able to changed easily. For example for images their is a preview shown when editing content. For file attachments the file molecule is part of the multiple file upload widget where multiple rows can be added.

Markup: 03-molecules/file/file-form.twig
<span class="file">
  <span class="file-icon">
    <img class="node-file__icon" src="kss-assets/base/images/mime-icons/icon_1_pdf_x16.png" srcset="kss-assets/base/images/mime-icons/icon_1_pdf_x32.png 2x" alt="{{ node_icon }}" /></span>
  <span class="file-link"><a href="#" title="{{ 'Open file in a new window'|t }}" target="_blank">Vestibulum id ligula porta felis euismod semper.pdf</a></span>
  <span class="file-size">40.14 KB</span>
</span>
Source: 03-molecules/file/file.scss, line 21