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