Components

Numbered fieldset

A variation of fieldset that allows for numbered fieldsets. This component relies on the fieldset component . Step-highlighting There is

Taxonomy term

Some extra's for taxonomy-term components. Extra template suggestions Added 2 more specific template suggestions. One for view mode and one

Bootstrap 4 (beta)

Currently in beta, due to it not being heavily tested. This is a component that splits up Bootstrap 4 CSS

File link

Default theming and some extra's for Drupal's file links. Making more variables available in Twig In this component 4 extra

Field

Some extra's for field components. Simplified HTML Stripped away some unneeded div's to keep semantics as clean as possible. Extra

Text dropdown

Defines a custom dropdown component that can be used to hide content on page load but keep it available under

VueJS

VueJS now comes as a Compony-component is now a component that can be used to progressively enhance any component that

Form with basic CSS

This is the same as the Form component but with very basic CSS added. Better classes The classes on a

Lato font

The downloaded Lato fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control which

Form item

Default theming for form-item components and some extra functionality. Better classes The classes on form-element-label are now: {% set wrapper_classes

Montserrat font

The downloaded Montserrat fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control which

Checkbox

Some default theming for form-item--checkboxes. This is a javascript-free implementation that respects keyboard accessibility and has a disabled state. We

Wysiwyg content

This is a CSS-only component to theme the output of wysiwyg. This component can be loaded in conditionally from other

Open Sans font

The downloaded Open Sans fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control

Date input field

The essentials of displaying form-item date-inputs. For cross-browser-consistency this component changes the type of the input field from <input type="date">

Region

Some extra's for region components. Better classes The classes on paragraph has been changed to: {% set classes = [

Oswald font

The downloaded Oswald fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control which

Unformatted views view

Removes divs without classes, when using unformatted list in your view settings (screenshot 1) in combination with no views row

PT Sans font

The downloaded PT Sans fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control

Select with Select2

Theming of the form-item--select using the Select2 library . The component is fully accessible, and will give you a filter

Raleway font

The downloaded Raleway fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control which

Roboto Condensed font

The downloaded Roboto Condensed fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control

Page

Extra template suggestions: one for entity type and one for the content type. <!-- THEME DEBUG --> <!-- THEME HOOK:

Radiobuttons

Some default theming for form-item--radiobuttons. This is a javascript-free implementation that respects keyboard accessibility and has a disabled state.

Button with ajax-loading state

This component specifically themes ajax-loading states of Drupal form buttons. Better classes Every button that can trigger ajax-behaviour will receive

Roboto font

The downloaded Roboto fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control which

Views view

Some extra's for views-view components. Extra template suggestions Added 2 more specific template suggestions. One for the name of the

Textarea

The HTML for textarea components. Theming is found in the general theming component because abstracting textarea-specific CSS is more confusing

Slabo 27px font

The downloaded Slabo 27px font with matching @font-face declaration in CSS. There is only one font-family of this font.

Media

Some extra's for media components. Better classes The classes on taxonomy-terms has been changed to: {% set classes = [

Autosizing textarea

A variation of the textarea component that resizes as you type. This is using the Autosize libarary . Using this

Paragraph

Some extra's for paragraph components. Better classes The classes on paragraph has been changed to: {% set classes = [

Source Sans Pro font

The downloaded Source Sans Pro fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can

Block

Some extra's for block components. Better classes The classes on block has been changed to: {% set classes = [

Node

Some extra's for node components. Better classes The classes on node has been changed to: {% set classes = [

Webform

Webforms in Drupal are user-generated forms mostly, To support consistent form theming, we are taking the same approach as the

Form

Some extra's for form components. Better classes The classes on a form has been changed to: {% set classes =

Aggregator item

Some extra's for aggregator-item components. Extra template suggestions Added a more specific template suggestion depending on the name of the

Menu local tasks

Some basic styling for local menu inks with a toggle for smaller screens.

Global theming

The default _global component as recommended by Compony. Feel free to clone this component and adapt for your own use

Fieldset

The same component as Fieldset with some basic CSS , but without the CSS.

Pager

Some very basic theming for the pager component.

Brick

A brick is a horizontal section of a website, many website designs are using horizontal stacked background to separate content

MicroModal

This component implements Micromodal.js , a lightweight, configurable and a11y-enabled modal library written in pure JavaScript.

Fieldset with some basic CSS

Some extra's for fieldset components. Better classes The classes on taxonomy-terms has been changed to: {% set classes = [

Status messages

A flat approach to theming Drupal's status messages by the use of emoji SVG's.

Data table

Flexible data in a table design, without using table semantics. Extra template suggestions Added a more specific template suggestion based

Breadcrummy

This component is an alternative to showing breadcrumbs on your page in a smooth mobile way without wrapping to multiple