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.

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

• 29 Jan 2017
Blog
Open Social Developers
Read more
Markup

Teaser title

• 29 Jan 2017
Blog
Open Social Developers
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

• 29 Jan 2017
Blog
Open Social Developers
Read more
Markup
unpublished

Teaser title

• 29 Jan 2017
Blog
Open Social Developers
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.

Markup
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.

Markup

  
    
  Vestibulum id ligula porta felis euismod semper.pdf
  40.14 KB
Source: 03-molecules/file/file.scss, line 21