4 #components Components
Design components are reusable designs that can be applied using just the CSS class names specified in the component.
4.1 #components.box Box
A simple box styling.
A Drupal block is often styled as a box. However, this design component is not applied to any blocks by default; it is used as an example of how to build and document a CSS component.
Box title
Box title
Box title
<div class="box [modifier class]">
<h2 class="box__title">Box title</h2>
<div class="box__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
4.3 #components.clearfix Clearfix
Allows the bottom of an element to extend to the bottom of all floated child elements. See http://nicolasgallagher.com/micro-clearfix-hack/
<div class="clearfix">
<div style="float: left; height: 50px; width: 50%;">A floated item.</div>
</div>
4.4 #components.comments Comment
A single comment in a thread of comments.
Jane A. User replied on Permalink
The comment's title
Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.
Jane A. User replied on Permalink
The comment's title
Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.
<div class="comment__section">
<article class="comment [modifier class]">
<header>
<p><a href="#">Jane A. User</a> replied on <time>Wed, 08/19/2015 - 17:51</time>
<a href="#" class="comment__permalink">Permalink</a>
</p>
<h3 class="comment__title">
<a href="#">The comment's title</a>
</h3>
</header>
<p>Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.</p>
</article>
</div>
4.5 #components.divider Divider
Can be used as an <hr>
, an empty <div>
or as a container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="divider "></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="divider ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<hr class="divider ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
4.6.1 #components.forms.autocomplete Autocomplete field
As the user starts to type a value, a selection list appears below the form item allowing them to choose an option.
- guwatif
- hichiuasl
- guwatif
- hichiuasl
<input type="text" value="" class="autocomplete [modifier class]">
<div class="autocomplete__list-wrapper">
<ul class="autocomplete__list">
<li class="autocomplete__list-item">guwatif</li>
<li class="autocomplete__list-item is-selected">hichiuasl</li>
</ul>
</div>
<p> </p>
4.6.2 #components.forms.collapsible-fieldset Collapsible fieldset
Fieldsets with optional entry fields can be hidden with collapsed fieldsets.
<fieldset class="collapsible-fieldset [modifier class]">
<legend>
<span class="collapsible-fieldset__legend">
A collapsible fieldset
<span class="collapsible-fieldset__summary">A summary of the form state</span>
</span>
</legend>
<div class="collapsible-fieldset__wrapper">
Place the form elements to hide inside this wrapping div.
</div>
</fieldset>
4.6.3 #components.forms.form-item Form item
Wrapper for a form element (or group of form elements) and its label.
<div class="form-item [modifier class]">
<label class="form-item__label" for="form-item-input">Label <span class="form-item__required" title="This field is required.">*</span></label>
<input class="form-item__widget" type="text" id="form-item-input" value="Text value">
<div class="form-item__description">
Form item description.
</div>
</div>
<div class="form-item [modifier class]">
<label class="form-item__label" for="form-item-input-2">Another label <span class="form-item__required" title="This field is required.">*</span></label>
<input class="form-item__widget" type="text" id="form-item-input-2" value="Text value">
<div class="form-item__description">
Another form item description.
</div>
</div>
4.6.4 #components.forms.form-item--radio Form item (radio)
Checkboxes and radios require slightly different markup; their label is after
their widget instead of before. Uses the .form-item--radio
class variant of
the normal form item and is placed on each of the nested form items.
<div class="form-item">
<label class="form-item__label" for="group">Label for the group</label>
<div class="form-item__description">
Form group description.
</div>
<div class="form-item__group" id="group">
<div class="form-item--radio [modifier class]">
<input class="form-item__widget" type="checkbox" id="option-1" value="1">
<label class="form-item__label" for="option-1">Option 1</label>
<div class="form-item__description">
Form item description.
</div>
</div>
<div class="form-item--radio [modifier class]">
<input class="form-item__widget" type="checkbox" id="option-2" value="2">
<label class="form-item__label" for="option-2">Option 2</label>
<div class="form-item__description">
Form item description.
</div>
</div>
</div>
</div>
4.6.5 #components.forms.form-table Drupal admin tables
Complex forms that appear in html <table>
elements.
If your custom theme isn't used for Drupal's admin pages, you can safely delete this component to save file weight in the generated CSS.
Permission | anonymous user | authenticated user | administrator |
---|
Permission | anonymous user | authenticated user | administrator |
---|---|---|---|
Block | |||
Administer blocks
|
|
|
|
Devel | |||
Access developer information
View developer output like variable printouts, query log, etc. Warning: Give to trusted roles only; this permission has security implications.
|
|
|
|
Execute PHP code
Run arbitrary PHP from a block. Warning: Give to trusted roles only; this permission has security implications.
|
|
|
|
<table class="form-table__sticky-header" style="position: fixed; visibility: visible;">
<thead>
<tr>
<th>Permission</th>
<th class="form-table__narrow-column">anonymous user</th>
<th class="form-table__narrow-column">authenticated user</th>
<th class="form-table__narrow-column">administrator</th>
</tr>
</thead>
</table>
<table class="form-table ">
<thead>
<tr>
<th>Permission</th>
<th class="form-table__narrow-column">anonymous user</th>
<th class="form-table__narrow-column">authenticated user</th>
<th class="form-table__narrow-column">administrator</th>
</tr>
</thead>
<tbody>
<tr>
<td class="module" colspan="4">Block</td>
</tr>
<tr>
<td class="permission">
<div class="form-item form-type-item">
Administer blocks
</div>
</td>
<td class="form-table__narrow-column">
<div class="form-item form-type-checkbox">
<label class="element-invisible" for="edit-1-administer-blocks">anonymous user: Administer blocks </label>
<input class="form-checkbox" id="edit-1-administer-blocks" name="1[administer blocks]" value="administer blocks" type="checkbox">
</div>
</td>
<td class="form-table__narrow-column">
<div class="form-item form-type-checkbox form-item-2-administer-blocks">
<label class="element-invisible" for="edit-2-administer-blocks">authenticated user: Administer blocks </label>
<input class="rid-2 form-checkbox" id="edit-2-administer-blocks" name="2[administer blocks]" value="administer blocks" type="checkbox">
</div>
</td>
<td class="form-table__narrow-column">
<div class="form-item form-type-checkbox form-item-3-administer-blocks">
<label class="element-invisible" for="edit-3-administer-blocks">administrator: Administer blocks </label>
<input class="rid-3 form-checkbox real-checkbox" id="edit-3-administer-blocks" name="3[administer blocks]" value="administer blocks" checked="checked" type="checkbox"><input style="display: none;" title="This permission is inherited from the authenticated user role." class="dummy-checkbox" disabled="disabled" checked="checked" type="checkbox">
</div>
</td>
</tr>
<tr>
<td class="module" colspan="4">Devel</td>
</tr>
<tr>
<td class="permission">
<div id="edit-access-devel-information" class="form-item form-type-item">
Access developer information
<div class="description">View developer output like variable printouts, query log, etc. <em class="permission-warning">Warning: Give to trusted roles only; this permission has security implications.</em></div>
</div>
</td>
<td class="form-table__narrow-column">
<div class="form-item form-type-checkbox form-item-1-access-devel-information">
<label class="element-invisible" for="edit-1-access-devel-information">anonymous user: Access developer information </label>
<input class="rid-1 form-checkbox" id="edit-1-access-devel-information" name="1[access devel information]" value="access devel information" type="checkbox">
</div>
</td>
<td class="form-table__narrow-column">
<div class="form-item form-type-checkbox form-item-2-access-devel-information">
<label class="element-invisible" for="edit-2-access-devel-information">authenticated user: Access developer information </label>
<input class="rid-2 form-checkbox" id="edit-2-access-devel-information" name="2[access devel information]" value="access devel information" type="checkbox">
</div>
</td>
<td class="form-table__narrow-column">
<div class="form-item form-type-checkbox form-item-3-access-devel-information">
<label class="element-invisible" for="edit-3-access-devel-information">administrator: Access developer information </label>
<input class="rid-3 form-checkbox real-checkbox" id="edit-3-access-devel-information" name="3[access devel information]" value="access devel information" checked="checked" type="checkbox"><input style="display: none;" title="This permission is inherited from the authenticated user role." class="dummy-checkbox" disabled="disabled" checked="checked" type="checkbox">
</div>
</td>
</tr>
<tr>
<td class="permission">
<div id="edit-execute-php-code" class="form-item form-type-item">
Execute PHP code
<div class="description">Run arbitrary PHP from a block. <em class="permission-warning">Warning: Give to trusted roles only; this permission has security implications.</em></div>
</div>
</td>
<td class="form-table__narrow-column">
<div class="form-item form-type-checkbox form-item-1-execute-php-code">
<label class="element-invisible" for="edit-1-execute-php-code">anonymous user: Execute PHP code </label>
<input class="rid-1 form-checkbox" id="edit-1-execute-php-code" name="1[execute php code]" value="execute php code" type="checkbox">
</div>
</td>
<td class="form-table__narrow-column">
<div class="form-item form-type-checkbox form-item-2-execute-php-code">
<label class="element-invisible" for="edit-2-execute-php-code">authenticated user: Execute PHP code </label>
<input class="rid-2 form-checkbox" id="edit-2-execute-php-code" name="2[execute php code]" value="execute php code" type="checkbox">
</div>
</td>
<td class="form-table__narrow-column">
<div class="form-item form-type-checkbox form-item-3-execute-php-code">
<label class="element-invisible" for="edit-3-execute-php-code">administrator: Execute PHP code </label>
<input class="rid-3 form-checkbox real-checkbox" id="edit-3-execute-php-code" name="3[execute php code]" value="execute php code" checked="checked" type="checkbox"><input style="display: none;" title="This permission is inherited from the authenticated user role." class="dummy-checkbox" disabled="disabled" checked="checked" type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
4.6.6 #components.forms.resizable-textarea Resizable textarea
A textarea that can be resized with a "grippie" widget.
<textarea class="resizable-textarea " rows="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>
<div class="resizable-textarea__grippie"></div>
4.6.7 #components.forms.table-drag Table drag
Drag and drop rows inside a form.
If your custom theme isn't used for Drupal's admin pages, you can safely delete this component to save file weight in the generated CSS.
<table class="tabledrag-processed">
<thead><tr><th>Field</th><th>Label</th><th colspan="3">Format</th></tr></thead>
<tbody>
<tr class="region-message region-visible-message region-populated">
<td colspan="7">No field is displayed.</td>
</tr>
<tr class="draggable tabledrag-leaf odd" id="field-image">
<td><a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle"> </div></a>Image</td>
<td class="tabledrag-hide" style="display: none;">
<div class="form-item form-type-textfield form-item-fields-field-image-weight">
<label class="visually-hidden" for="edit-fields-field-image-weight">Weight for Image</label>
<input class="field-weight form-text" type="text" id="edit-fields-field-image-weight" name="fields[field_image][weight]" value="-1" size="3" maxlength="128">
</div>
</td>
<td class="tabledrag-hide" style="display: none;">
<div class="form-item form-type-select form-item-fields-field-image-parent">
<label class="visually-hidden" for="edit-fields-field-image-parent">Label display for Image</label>
<select class="field-parent form-select" id="edit-fields-field-image-parent" name="fields[field_image][parent]"><option value="" selected="selected">- None -</option></select>
</div>
<input class="field-name" type="hidden" name="fields[field_image][parent_wrapper][hidden_name]" value="field_image">
</td>
<td>
<div class="form-item form-type-select form-item-fields-field-image-label">
<label class="visually-hidden" for="edit-fields-field-image-label">Label display for Image</label>
<select id="edit-fields-field-image-label" name="fields[field_image][label]" class="form-select"><option value="above">Above</option><option value="inline">Inline</option><option value="hidden" selected="selected"><Hidden></option></select>
</div>
</td>
<td>
<div class="form-item form-type-select form-item-fields-field-image-type">
<label class="visually-hidden" for="edit-fields-field-image-type">Formatter for Image</label>
<select class="field-formatter-type form-select" id="edit-fields-field-image-type" name="fields[field_image][type]"><option value="image" selected="selected">Image</option><option value="hidden"><Hidden></option></select>
</div>
</td>
<td class="field-formatter-summary-cell">
<div class="field-formatter-summary">Image style: Large (480x480)</div>
</td>
<td>
<div class="field-formatter-settings-edit-wrapper">
<input class="field-formatter-settings-edit form-submit ajax-processed" alt="Edit" type="image" id="edit-fields-field-image-settings-edit" name="field_image_formatter_settings_edit" src="http://drupal7x.dev/misc/configure.png">
</div>
</td>
</tr>
<tr class="draggable tabledrag-leaf even drag-previous" id="body">
<td>
<a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle"> </div></a>Body<span class="warning tabledrag-changed">*</span>
</td>
<td class="tabledrag-hide" style="display: none;">
<div class="form-item form-type-textfield form-item-fields-body-weight">
<label class="visually-hidden" for="edit-fields-body-weight">Weight for Body</label>
<input class="field-weight form-text" type="text" id="edit-fields-body-weight" name="fields[body][weight]" value="0" size="3" maxlength="128">
</div>
</td>
<td class="tabledrag-hide" style="display: none;">
<div class="form-item form-type-select form-item-fields-body-parent">
<label class="visually-hidden" for="edit-fields-body-parent">Label display for Body</label>
<select class="field-parent form-select" id="edit-fields-body-parent" name="fields[body][parent]"><option value="" selected="selected">- None -</option></select>
</div>
<input class="field-name" type="hidden" name="fields[body][parent_wrapper][hidden_name]" value="body">
</td>
<td>
<div class="form-item form-type-select form-item-fields-body-label">
<label class="visually-hidden" for="edit-fields-body-label">Label display for Body</label>
<select id="edit-fields-body-label" name="fields[body][label]" class="form-select"><option value="above">Above</option><option value="inline">Inline</option><option value="hidden" selected="selected"><Hidden></option></select>
</div>
</td>
<td>
<div class="form-item form-type-select form-item-fields-body-type">
<label class="visually-hidden" for="edit-fields-body-type">Formatter for Body</label>
<select class="field-formatter-type form-select" id="edit-fields-body-type" name="fields[body][type]"><option value="text_default" selected="selected">Default</option><option value="text_plain">Plain text</option><option value="text_trimmed">Trimmed</option><option value="text_summary_or_trimmed">Summary or trimmed</option><option value="hidden"><Hidden></option></select>
</div>
</td>
<td></td>
<td></td>
</tr>
<tr class="draggable tabledrag-leaf odd" id="field-tags">
<td>
<a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle"> </div></a>Tags
</td>
<td class="tabledrag-hide" style="display: none;">
<div class="form-item form-type-textfield form-item-fields-field-tags-weight">
<label class="visually-hidden" for="edit-fields-field-tags-weight">Weight for Tags</label>
<input class="field-weight form-text" type="text" id="edit-fields-field-tags-weight" name="fields[field_tags][weight]" value="10" size="3" maxlength="128">
</div>
</td>
<td class="tabledrag-hide" style="display: none;">
<div class="form-item form-type-select form-item-fields-field-tags-parent">
<label class="visually-hidden" for="edit-fields-field-tags-parent">Label display for Tags</label>
<select class="field-parent form-select" id="edit-fields-field-tags-parent" name="fields[field_tags][parent]"><option value="" selected="selected">- None -</option></select>
</div>
<input class="field-name" type="hidden" name="fields[field_tags][parent_wrapper][hidden_name]" value="field_tags">
</td>
<td>
<div class="form-item form-type-select form-item-fields-field-tags-label">
<label class="visually-hidden" for="edit-fields-field-tags-label">Label display for Tags</label>
<select id="edit-fields-field-tags-label" name="fields[field_tags][label]" class="form-select"><option value="above" selected="selected">Above</option><option value="inline">Inline</option><option value="hidden"><Hidden></option></select>
</div>
</td>
<td>
<div class="form-item form-type-select form-item-fields-field-tags-type">
<label class="visually-hidden" for="edit-fields-field-tags-type">Formatter for Tags</label>
<select class="field-formatter-type form-select" id="edit-fields-field-tags-type" name="fields[field_tags][type]"><option value="taxonomy_term_reference_link" selected="selected">Link</option><option value="taxonomy_term_reference_plain">Plain text</option><option value="taxonomy_term_reference_rss_category">RSS category</option><option value="hidden"><Hidden></option></select>
</div>
</td>
<td></td>
<td></td>
</tr>
<tr class="region-title region-hidden-title"><td colspan="7">Hidden</td></tr>
<tr class="region-message region-hidden-message region-empty"><td colspan="7">No field is hidden.</td></tr>
</tbody>
</table>

Site Name
<header class="header " role="banner">
<a href="/" title="Home" rel="home" class="header__logo">
<img src="public/sample-inline.png" alt="Home" class="header__logo-image">
</a>
<div class="header__name-and-slogan">
<h1 class="header__site-name">
<a href="/" title="Home" class="header__site-link" rel="home">Site Name</a>
</h1>
<div class="header__site-slogan">Slogan</div>
</div>
<nav class="header__secondary-menu" role="navigation">
<h2 class="visually-hidden">User menu</h2>
<ul class="links inline clearfix">
<li class="menu-2 first"><a href="/user">My account</a></li>
<li class="menu-15 last"><a href="/user/logout">Log out</a></li>
</ul>
</nav>
<div class="header__region">
[Header region]
</div>
</header>
4.9 #components.highlight-mark Highlight mark
The "new" or "updated" marker.
<mark class="highlight-mark">New</mark>
4.10 #components.inline-links Inline links
A list of links that are inline with each other.
<ul class="inline-links ">
<li class="inline-links__item"><a href="#">Read more</a></li>
<li class="inline-links__item"><a href="#">Comment</a></li>
</ul>
4.11 #components.inline-sibling Inline sibling
An element that needs to appear inline with the content that follows.
A Heading
A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<h4 class="inline-sibling ">A Heading</h4>
<p>A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
4.12 #components.messages Messages
System alerts.
4.12.1 #components.messages.single Messages
A single message.
<div class="messages [modifier class]">
<h2 class="visually-hidden">Status message</h2>
This is a single system message.
</div>
4.12.2 #components.messages.multiple Messages
Multiple messages.
<div class="messages [modifier class]">
<h2 class="visually-hidden">Status message</h2>
<ul class="messages__list">
<li class="messages__item">This is a system message.</li>
<li class="messages__item">And this is another system message.</li>
<li class="messages__item">Message received: <span class="messages__highlighted-text">Unknown input</span>.</li>
</ul>
</div>
4.12.3 #components.messages.status Message colors
Drupal system status reports use just the message colors and no other styling.
<div class="[modifier class]">
This is a system status report message.
</div>
4.14 #components.print-none Do not print
Removes an element from the print version of the web site.
By importing these CSS rules in a file marked as media "all", we allow these print rules to be aggregated with other stylesheets, for improved front-end performance.
This item will not be printed.
<p class="print-none">
This item will not be printed.
</p>
4.15 #components.progress-bar Progress bar
Shows the progress of a task in a simple bar graph.
<div class="progress-bar [modifier class]">
<div class="progress-bar__bar"><div class="progress-bar__fill" style="width: 60%"></div></div>
<div class="progress-bar__percentage">60%</div>
<div class="progress-bar__message">Installing...</div>
</div>
4.16 #components.progress-throbber Progress throbber
Shows the progress of a task using a throbber.
<div class="progress-throbber ">
<div class="progress-throbber__widget"> </div>
<div class="progress-throbber__message">Progress message</div>
</div>
4.17 #components.responsive-video Responsive video
Using a wrapper div, embedded videos can be made responsive so that their
intrinsic aspect ratio is preserved at any screen width. The
responsive-video__embed
class is optional if the embed is an iframe
.
<div class="responsive-video [modifier class]">
<iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
</div>
4.19 #components.watermark Watermark
Make the element appear beneath sibling elements, like a watermark.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div>
<mark class="watermark ">Unpublished</mark>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
4.20 #components.wireframe Wireframe
Add wireframes around main layout elements. Wireframes are useful when prototyping a website.
This design is not applied to the site unless you set the following Sass
variable: $with-wireframes: true;
An item inside a wireframe.
<div class="wireframe">
<p>An item inside a wireframe.</p>
</div>
Jane A. User replied on Permalink
The comment's title
Conventio facilisis nutus. Distineo lucidus olim ut. Huic illum olim quadrum usitas. Bene ex pecus pneum uxor. Brevitas diam hos persto tincidunt virtus. Consequat dignissim distineo eros exerci huic ludus sino turpis.