Components
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
Infinite scroll pager
Make the pager of the views infinite scroll module have an ajax-loading-state.
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.
Breadcrumb
Some very basic breadcrumb theming
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
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
Fake slow submitting form
When the form is not submitted using Ajax but you want to make it seem like it is using ajax,
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
Field with Full HTML wysiwyg
Attaches the Wysiwyg content library to fields that use the full_html text formatter.
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
Field with basic HTML wysiwyg
Attaches the Wysiwyg content library to fields that use the basic_html text formatter.
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
Date input field with datepicker
This is an alternate version of form-item--date that uses the jQuery UI Datepicker . A variation of this component that
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
Improved ajax progress indicator
This component overrides Drupal's progress indicator and replaces it completely with a js-loading class. This means we can more easily
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
Date input field with datepicker and select2
This is an alternate version of form-item--date. that uses both jQuery UI Datepicker and the Select2 library .
Onomasticon
A flat implementation of the Onomasticon output..
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