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.
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 children 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.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.
<div class="divider [modifier class]"></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 [modifier class]">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
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.3 #components.forms.form-item Form item
-
.form-item--grouped
Pack groups of checkboxes and radio buttons closer together. -
.form-item--error
Highlight the form elements that caused a form submission error. -
.form-item--inline
Inline form items.
Wrapper for a form element (or group of form elements) and its label.
4.6.5 #components.forms.resizable-textarea Resizable textarea
A textarea that can be resized with a "grippie" widget.
<textarea class="resizable-textarea [modifier class]" 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>
<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 [modifier class]" 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 [modifier class]">
<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 [modifier class]">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.
<div class="messages [modifier class]">
<h2 class="visually-hidden">Status message</h2>
This is a single system message.
</div>
<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 Status report
Drupal system status reports use a simple styling.
<div class="status [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 this CSS file as media "all", we allow this print file 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.16 #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.18 #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 [modifier class]">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.19 #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>