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 Drupal block is often styled as a box.
Box title
<div class="box ">
<h2 class="box__title">Box title</h2>
<div class="box__content">
Lorem ipsum.
</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>
- guwatif
- hichiuasl
- guwatif
- hichiuasl
<input type="text" value="" class="autocomplete ">
<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.5.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.5.5 #components.forms.grippie Grippie
The "grippie" handle of a resizable textarea.
@TODO

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.8 #components.highlight-mark Highlight mark
The "new" or "updated" marker.
<mark class="highlight-mark">New</mark>
4.10 #components.messages Messages
System alerts.
<div class="messages ">
<h2 class="visually-hidden">Status message</h2>
This is a single system message.
</div>
<div class="messages ">
<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.10.3 #components.messages.status Status report
Drupal system status reports use a simple styling.
<div class="status ">
This is a system status report message.
</div>
4.12 #components.no-wrap No wrap
Prevent text wrapping.
@TODO
4.13 #components.page Page backgrounds
It's sometimes useful to add background images to body
, .page
, .main
,
and/or .main-content
divs.
@TODO
4.14 #components.pager Pager
A list of page numbers when more than 1 page of content is available.
@TODO
4.15 #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.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">
<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 Wireframes
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>