5 Components
Design components are reusable designs that can be applied using just the CSS class names specified in the component.
styles.scss
, line 28
5.1 Box
A simple box styling.
Box title
Box title
<div class="box box--with-hover">
<h3 class="box__title">Box title</h3>
<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>
components/box/box.scss
, line 4
<div class="box--icon">
<div class="box--icon__left"><i class="fa fa-bus"></i></div>
<div class="box--icon__right">
<h3 class="box__title"><a href="#">Box title</a></h3>
<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>
</div>
components/box/box.scss
, line 37
<div class="box--icon box--with-border">
<div class="box--icon__left"><i class="fa fa-bus"></i></div>
<div class="box--icon__right">
<h3 class="box__title"><a href="#">Box title</a></h3>
<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>
</div>
components/box/box.scss
, line 27
5.3 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>
components/clearfix/clearfix.scss
, line 4
5.4 Comments
The comments of page.
<section class="comment__outer-wrapper comment-wrapper">
<h2 class="comment__outer-wrapper-title">Comments</h2>
<article class="comment">
<div class="comment__inner-wrapper">
<footer class="comment__meta">
<span class="comment__submitted">
<a title="View user profile." href="#">admin</a> - Wednesday 03 Jun, 2015
</span>
<span class="comment__permalink"><a href="#">Permalink</a></span>
</footer>
<div class="comment__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<ul class="links inline">
<li class="comment-delete first"><a href="/comment/1/delete">delete</a></li>
<li class="comment-edit"><a href="/comment/1/edit">edit</a></li>
<li class="comment-reply last"><a href="/comment/reply/10/1">reply</a></li>
</ul>
</div>
</article>
<div class="indented"><a id="comment-2"></a>
<article class="comment">
<div class="comment__inner-wrapper">
<footer class="comment__meta">
<span class="comment__submitted">
<a title="View user profile." href="#">admin</a> - Wednesday 03 Jun, 2015
</span>
<span class="comment__permalink"><a href="#">Permalink</a></span>
</footer>
<div class="comment__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<ul class="links inline">
<li class="comment-delete first"><a href="/comment/1/delete">delete</a></li>
<li class="comment-edit"><a href="/comment/1/edit">edit</a></li>
<li class="comment-reply last"><a href="/comment/reply/10/1">reply</a></li>
</ul>
</div>
</article>
</div>
</section>
components/comment/comment.scss
, line 4
5.5 Date
Styling of date for pages. Emulates UI-Kit meta element.
<label class="inline-sibling">Date of publication:</label><span class="date">5 November 2015</span>
components/date/date.scss
, line 4
5.6 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 "></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>
components/divider/divider.scss
, line 4
components/__kss-categories.scss
, line 5
5.9.1 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>
components/autocomplete/autocomplete.scss
, line 4
5.9.2 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>
components/form-item/form-item.scss
, line 4
5.9.3 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>
components/form-item/form-item.scss
, line 50
5.9.4 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>
components/resizable-textarea/resizable-textarea.scss
, line 4
5.10 Header
The header of page.
<header role="banner" class="header">
<div class="wrapper header__inner clearfix">
<a class="header__logo" rel="home" title="Home" href="/"><img class="header__logo-image" alt="Home" src="/profiles/agov/themes/contrib/agov_base/logo.svg"></a>
<div class="header__name-and-slogan">
<h1 class="header__site-name visually-hidden">
<a rel="home" class="header__site-link" title="Home" href="/"><span>aGov</span></a>
</h1>
</div>
<div class="header__region region region-header"></div>
</div>
</header>
components/header/header.scss
, line 4
5.11 Highlight mark
The "new" or "updated" marker.
<mark class="highlight-mark">New</mark>
components/highlight-mark/highlight-mark.scss
, line 4
5.12 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>
components/inline-links/inline-links.scss
, line 4
5.13 Messages
System alerts.
components/messages/messages.scss
, line 4
<div class="messages [modifier class]">
<h2 class="visually-hidden">Status message</h2>
This is a single system message.
</div>
components/messages/messages.scss
, line 10
<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>
components/messages/messages.scss
, line 21
5.13.3 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>
components/messages/messages.scss
, line 30
5.16 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>
components/print-none/print-none.scss
, line 4
5.17 Progress bar
The Progress bar.
<div id="progress" class="progress">
<div class="bar"><div class="filled" style="width: 60%"></div></div>
<div class="percentage">60%</div>
<div class="message">Installing...</div>
</div>
components/progress-bar/progress-bar.scss
, line 4
5.18 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>
components/responsive-video/responsive-video.scss
, line 4
5.19 Search
A simple search styling.
<div class="wrap-demo search__wrapper">
<form class="search search-form ">
<h2 class="visually-hidden">Search form</h2>
<div class="search__input-wrapper search__inner-wrapper">
<label class="visually-hidden">Search </label>
<input type="text" value="" class="search__input" placeholder="Enter your keywords">
</div>
<div class="search__button-wrapper">
<i class="fa fa-search search__icon" aria-hidden="true"></i>
<input type="submit" value="Search" class="search__button">
</div>
</form>
</div>
components/search/search.scss
, line 4
5.23 Unstyled list
A list with all styles removed.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="unstyled-list ">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
components/unstyled-list/unstyled-list.scss
, line 4
5.25 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>
components/watermark/watermark.scss
, line 4
Comments
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.