Skip to main content

# 4 molecules Molecules

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

## 4.1 molecules.navigation Navigation

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

### 4.1.1 molecules.navigation.breadcrumb Breadcrumbs

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

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

### 4.1.2 molecules.navigation.nav-tabs Nav tabs

Needs a description.

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

### 4.1.2 molecules.navigation.nav-tabs Navbar secondary

Toggle example guides
Toggle HTML markup

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

Example
Markup

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

### 4.1.3 molecules.navigation.pagination Pagination

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

Source: `03-molecules/navigation/pagination/pagination.scss`, line 1

## 4.2 molecules.teaser Teaser

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

Michelle Clark
• 29 Jan 2017
Blog
Open Social Developers
6
public
Read more
Markup

####

           Teaser title

                  Michelle Clark

                 • 29 Jan 2017

            Blog

            Open Social Developers

              6

              public

          Read more

Source: `03-molecules/teaser/teaser.scss`, line 1

### 4.2.1 molecules.teaser.unpublished Teaser unpublished

Toggle example guides
Toggle HTML markup

Example
unpublished

#### Teaser title

Michelle Clark
• 29 Jan 2017
Blog
Open Social Developers
6
public
Read more
Markup

####

        unpublished

           Teaser title

                  Michelle Clark

                 • 29 Jan 2017

            Blog

            Open Social Developers

              6

              public

          Read more

Source: `03-molecules/teaser/teaser.scss`, line 24

## 4.3 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.3.1 molecules.files.node File in node

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 `.files__grid`. The element consists of the file name (max 3 lines truncated), the file type and file size.

Example

- Vestibulum id ligula porta felis euismod semper.pdf 40.14 KB

Markup

        Vestibulum id ligula porta felis euismod semper.pdf

            40.14 KB

Source: `03-molecules/file/file.scss`, line 10

### 4.3.2 molecules.files.form File in form

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.

Example
Vestibulum id ligula porta felis euismod semper.pdf 40.14 KB
Markup

      Vestibulum id ligula porta felis euismod semper.pdf
      40.14 KB

Source: `03-molecules/file/file.scss`, line 21