Newer
Older
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/style-guide/chroma-kss-styles.css">
<link rel="stylesheet" href="../css/style-guide/kss-only.css">
</head>
<body id="kss-node">
<div class="kss-sidebar kss-style">
<header class="kss-header">
<h1 class="kss-doc-title">Zen 7.x-6.x Style Guide</h1>
</header>
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<span class="kss-nav__ref">0</span
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layouts.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Forms</span>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-box">
<span class="kss-nav__ref ">5.1</span
><span class="kss-nav__name">Box</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-clearfix">
<span class="kss-nav__ref ">5.2</span
><span class="kss-nav__name">Clearfix</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-comments">
<span class="kss-nav__ref ">5.3</span
><span class="kss-nav__name">Comment</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-divider">
<span class="kss-nav__ref ">5.4</span
><span class="kss-nav__name">Divider</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-header">
<span class="kss-nav__ref ">5.5</span
><span class="kss-nav__name">Branding header</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-hidden">
<span class="kss-nav__ref ">5.6</span
><span class="kss-nav__name">Hidden</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-highlight-mark">
<span class="kss-nav__ref ">5.7</span
><span class="kss-nav__name">Highlight mark</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-links">
<span class="kss-nav__ref ">5.8</span
><span class="kss-nav__name">Inline links</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-sibling">
<span class="kss-nav__ref ">5.9</span
><span class="kss-nav__name">Inline sibling</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-messages">
<span class="kss-nav__ref ">5.10</span
><span class="kss-nav__name">Messages</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-messages--color">
<span class="kss-nav__ref ">5.11</span
><span class="kss-nav__name">Message colors</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation">
<span class="kss-nav__ref ">5.12</span
><span class="kss-nav__name">Navigation</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-breadcrumb">
<span class="kss-nav__ref kss-nav__ref-child">5.12.1</span
><span class="kss-nav__name">Breadcrumb navigation</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-more-link">
<span class="kss-nav__ref kss-nav__ref-child">5.12.2</span
><span class="kss-nav__name">"More" link</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-nav-menu">
<span class="kss-nav__ref kss-nav__ref-child">5.12.3</span
><span class="kss-nav__name">Nav menu</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-navbar">
<span class="kss-nav__ref kss-nav__ref-child">5.12.4</span
><span class="kss-nav__name">Navbar</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-pager">
<span class="kss-nav__ref kss-nav__ref-child">5.12.5</span
><span class="kss-nav__name">Pager</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-skip-link">
<span class="kss-nav__ref kss-nav__ref-child">5.12.6</span
><span class="kss-nav__name">Skip link</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-navigation-tabs">
<span class="kss-nav__ref kss-nav__ref-child">5.12.7</span
><span class="kss-nav__name">Tabs</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-print-none">
<span class="kss-nav__ref ">5.13</span
><span class="kss-nav__name">Do not print</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-responsive-video">
<span class="kss-nav__ref ">5.14</span
><span class="kss-nav__name">Responsive video</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-visually-hidden">
<span class="kss-nav__ref ">5.15</span
><span class="kss-nav__name">Visually hidden</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-watermark">
<span class="kss-nav__ref ">5.16</span
><span class="kss-nav__name">Watermark</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html#kssref-components-wireframe">
<span class="kss-nav__ref ">5.17</span
><span class="kss-nav__name">Wireframe</span>
</a>
</li>
</ul>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-components" class="kss-section kss-section--depth-1">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-components">
<span class="kss-title__ref">
5
<span class="kss-title__permalink-hash">
components
</span>
</span>
Components
</a>
</h1>
<div class="kss-description">
<p>Design components are reusable designs that can be applied using just the CSS
class names specified in the component.</p>
<div class="kss-source kss-style">
Source: <code>styles.scss</code>, line 50
</div>
</div>
<section id="kssref-components-box" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-box">
<span class="kss-title__ref">
5.1
<span class="kss-title__permalink-hash">
components.box
</span>
</span>
Box
</a>
</h2>
<div class="kss-description">
<p>A simple box style.</p>
<p>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.</p>
<p>"box" is the name of our component, so we define a <code>.box</code> class that we can
apply to any HTML element that needs the box styling. We also provide a
<code>%box</code> placeholder selector so that we can easily extend the basic box
component with <code>@extend %box;</code>.</p>
<p>Take a look at the source code for this component for more information about
building a good component.</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples </div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<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 class="kss-modifier__name kss-style">
:hover
</div>
<div class="kss-modifier__description kss-style">
The hover/focus styling.
</div>
<div class="kss-modifier__example">
<div class="box pseudo-class-hover">
<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>
</div>
<div class="kss-modifier__name kss-style">
.box--highlight
</div>
<div class="kss-modifier__description kss-style">
The "highlight" box variant.
<div class="kss-modifier__example">
<div class="box box--highlight">
<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>
</div>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><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>
</code></pre>
</div>
<div class="kss-source kss-style">
Source: <code>components/box/_box.scss</code>, line 1
</div>
</section>
<section id="kssref-components-clearfix" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-clearfix">
<span class="kss-title__ref">
5.2
<span class="kss-title__permalink-hash">
components.clearfix
</span>
</span>
Clearfix
</a>
</h2>
<div class="kss-description">
<p>Allows the bottom of an element to extend to the bottom of all floated child
elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a></p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<div class="clearfix">
<div style="float: left; height: 50px; width: 50%;">A floated item.</div>
</div>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="clearfix">
<div style="float: left; height: 50px; width: 50%;">A floated item.</div>
</div>
</code></pre>
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
</div>
<div class="kss-source kss-style">
Source: <code>components/clearfix/_clearfix.scss</code>, line 1
</div>
</section>
<section id="kssref-components-comments" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-comments">
<span class="kss-title__ref">
5.3
<span class="kss-title__permalink-hash">
components.comments
</span>
</span>
Comment
</a>
</h2>
<div class="kss-description">
<p>A single comment in a thread of comments.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples </div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<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>
</div>
<div class="kss-modifier__name kss-style">
.comment--preview
</div>
<div class="kss-modifier__description kss-style">
Preview version of comment.
</div>
<div class="kss-modifier__example">
<div class="comment__section">
<article class="comment comment--preview">
<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>
<div class="kss-modifier__name kss-style">
.comment--nested
</div>
<div class="kss-modifier__description kss-style">
A nested comment.
</div>
<div class="kss-modifier__example">
<div class="comment__section">
<article class="comment comment--nested">
<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>
</div>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><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>
<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>
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
<div class="kss-source kss-style">
Source: <code>components/comment/_comment.scss</code>, line 1
</div>
</section>
<section id="kssref-components-divider" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-divider">
<span class="kss-title__ref">
5.4
<span class="kss-title__permalink-hash">
components.divider
</span>
</span>
Divider
</a>
</h2>
<div class="kss-description">
<p>Can be used as an <code><hr></code>, an empty <code><div></code> or as a container.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><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>
<div class="kss-source kss-style">
Source: <code>components/divider/_divider.scss</code>, line 1
</div>
</section>
<section id="kssref-components-header" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-header">
<span class="kss-title__ref">
5.5
<span class="kss-title__permalink-hash">
components.header
</span>
</span>
Branding header
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<header class="header " role="banner">
<a href="/" title="Home" rel="home" class="header__logo">
<img src="kss-assets/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>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><header class="header " role="banner">
<a href="/" title="Home" rel="home" class="header__logo">
<img src="kss-assets/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>
</code></pre>
</div>
<div class="kss-source kss-style">
Source: <code>components/header/_header.scss</code>, line 5
</div>
</section>
<section id="kssref-components-hidden" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-hidden">
<span class="kss-title__ref">
5.6
<span class="kss-title__permalink-hash">
components.hidden
</span>
</span>
Hidden
</a>
</h2>
<div class="kss-description">
<p>Hide elements from all users. Compare to the visually-hidden component.</p>
<p>Used for elements which should not be immediately displayed to any user. An
example would be a collapsible fieldset that will be expanded with a click
from a user.</p>
<p>For anything you want to hide on page load when JavaScript is enabled, use
the <code>.js-hidden</code> class.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<div class="hidden ">
This content is hidden.
</div>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="hidden ">
This content is hidden.
</div>
</code></pre>
</div>
<div class="kss-source kss-style">
Source: <code>components/hidden/_hidden.scss</code>, line 1
</div>
</section>
<section id="kssref-components-highlight-mark" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-highlight-mark">
<span class="kss-title__ref">
5.7
<span class="kss-title__permalink-hash">
components.highlight-mark
</span>
</span>
Highlight mark
</a>
</h2>
<div class="kss-description">
<p>The "new" or "updated" marker. This is a very thin component. A front-end
developer may choose to delete this component and just style the <code><mark></code>
element directly.</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<mark class="highlight-mark">New</mark>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><mark class="highlight-mark">New</mark>
</code></pre>
</div>
<div class="kss-source kss-style">
Source: <code>components/highlight-mark/_highlight-mark.scss</code>, line 1
</section>
<section id="kssref-components-inline-links" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-inline-links">
<span class="kss-title__ref">
5.8
<span class="kss-title__permalink-hash">
components.inline-links
</span>
</span>
Inline links
</a>
</h2>
<div class="kss-description">
<p>A list of links that are inline with each other.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><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>
</code></pre>
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
<div class="kss-source kss-style">
Source: <code>components/inline-links/_inline-links.scss</code>, line 1
</div>
</section>
<section id="kssref-components-inline-sibling" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-inline-sibling">
<span class="kss-title__ref">
5.9
<span class="kss-title__permalink-hash">
components.inline-sibling
</span>
</span>
Inline sibling
</a>
</h2>
<div class="kss-description">
<p>An element that needs to appear inline with the content that follows.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><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>
</code></pre>
</div>
<div class="kss-source kss-style">
Source: <code>components/inline-sibling/_inline-sibling.scss</code>, line 1
</div>
</section>
<section id="kssref-components-messages" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-messages">
<span class="kss-title__ref">
5.10
<span class="kss-title__permalink-hash">
components.messages
</span>
</span>
Messages
</a>
</h2>
<div class="kss-description">
<p>System alerts.</p>
<p>Warning messages should use the <code>.messages--warning</code> class. Error messages
should use the <code>.messages--error</code> class.</p>
<p>The icon shown is not part of the CSS; it is an SVG image in the HTML.</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<div class="messages ">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
<path d="M54 8l-30 30-14-14-10 10 24 24 40-40z" fill="#000000"></path>
</svg>
</div>
This is how a single system message appears.
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
<path d="M54 8l-30 30-14-14-10 10 24 24 40-40z" fill="#000000"></path>
</svg>
</div>
<li class="messages__item">This is how multiple system messages appear.</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>
<div class="messages messages--warning ">
<h2 class="visually-hidden">Warning message</h2>
<div class="messages__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
<path d="M26,64l12,0c1.105,0 2,-0.895 2,-2l0,-9c0,-1.105 -0.895,-2 -2,-2l-12,0c-1.105,0 -2,0.895 -2,2l0,9c0,1.105 0.895,2 2,2Z" fill="#000000"></path>
<path d="M26,46l12,0c1.105,0 2,-0.895 2,-2l0,-42c0,-1.105 -0.895,-2 -2,-2l-12,0c-1.105,0 -2,0.895 -2,2l0,42c0,1.105 0.895,2 2,2Z" fill="#000000"></path>
</svg>
</div>
This is how a single warning message appears.
<div class="messages messages--error ">
<h2 class="visually-hidden">Error message</h2>
<div class="messages__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
<path d="M63.416 51.416c-0-0-0.001-0.001-0.001-0.001l-19.415-19.416 19.415-19.416c0-0 0.001-0 0.001-0.001 0.209-0.209 0.36-0.453 0.457-0.713 0.265-0.711 0.114-1.543-0.458-2.114l-9.172-9.172c-0.572-0.572-1.403-0.723-2.114-0.458-0.26 0.097-0.504 0.248-0.714 0.457 0 0-0 0-0.001 0.001l-19.416 19.416-19.416-19.416c-0-0-0-0-0.001-0.001-0.209-0.209-0.453-0.36-0.713-0.457-0.711-0.266-1.543-0.114-2.114 0.457l-9.172 9.172c-0.572 0.572-0.723 1.403-0.458 2.114 0.097 0.26 0.248 0.505 0.457 0.713 0 0 0 0 0.001 0.001l19.416 19.416-19.416 19.416c-0 0-0 0-0 0.001-0.209 0.209-0.36 0.453-0.457 0.713-0.266 0.711-0.114 1.543 0.458 2.114l9.172 9.172c0.572 0.572 1.403 0.723 2.114 0.458 0.26-0.097 0.504-0.248 0.713-0.457 0-0 0-0 0.001-0.001l19.416-19.416 19.416 19.416c0 0 0.001 0 0.001 0.001 0.209 0.209 0.453 0.36 0.713 0.457 0.711 0.265 1.543 0.114 2.114-0.458l9.172-9.172c0.572-0.572 0.723-1.403 0.458-2.114-0.097-0.26-0.248-0.504-0.457-0.713z" fill="#000000"></path>
</svg>
</div>
This is how a single error message appears: <span class="messages__highlight">This is highlighted.</span>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><div class="messages ">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
<path d="M54 8l-30 30-14-14-10 10 24 24 40-40z" fill="#000000"></path>
</svg>
</div>
This is how a single system message appears.
</div>
<div class="messages ">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
<path d="M54 8l-30 30-14-14-10 10 24 24 40-40z" fill="#000000"></path>
</svg>
</div>
<ul class="messages__list">
<li class="messages__item">This is how multiple system messages appear.</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>
<div class="messages messages--warning ">
<h2 class="visually-hidden">Warning message</h2>
<div class="messages__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
<path d="M26,64l12,0c1.105,0 2,-0.895 2,-2l0,-9c0,-1.105 -0.895,-2 -2,-2l-12,0c-1.105,0 -2,0.895 -2,2l0,9c0,1.105 0.895,2 2,2Z" fill="#000000"></path>
<path d="M26,46l12,0c1.105,0 2,-0.895 2,-2l0,-42c0,-1.105 -0.895,-2 -2,-2l-12,0c-1.105,0 -2,0.895 -2,2l0,42c0,1.105 0.895,2 2,2Z" fill="#000000"></path>
</svg>
</div>
This is how a single warning message appears.
</div>
<div class="messages messages--error ">
<h2 class="visually-hidden">Error message</h2>
<div class="messages__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 64 64">
<path d="M63.416 51.416c-0-0-0.001-0.001-0.001-0.001l-19.415-19.416 19.415-19.416c0-0 0.001-0 0.001-0.001 0.209-0.209 0.36-0.453 0.457-0.713 0.265-0.711 0.114-1.543-0.458-2.114l-9.172-9.172c-0.572-0.572-1.403-0.723-2.114-0.458-0.26 0.097-0.504 0.248-0.714 0.457 0 0-0 0-0.001 0.001l-19.416 19.416-19.416-19.416c-0-0-0-0-0.001-0.001-0.209-0.209-0.453-0.36-0.713-0.457-0.711-0.266-1.543-0.114-2.114 0.457l-9.172 9.172c-0.572 0.572-0.723 1.403-0.458 2.114 0.097 0.26 0.248 0.505 0.457 0.713 0 0 0 0 0.001 0.001l19.416 19.416-19.416 19.416c-0 0-0 0-0 0.001-0.209 0.209-0.36 0.453-0.457 0.713-0.266 0.711-0.114 1.543 0.458 2.114l9.172 9.172c0.572 0.572 1.403 0.723 2.114 0.458 0.26-0.097 0.504-0.248 0.713-0.457 0-0 0-0 0.001-0.001l19.416-19.416 19.416 19.416c0 0 0.001 0 0.001 0.001 0.209 0.209 0.453 0.36 0.713 0.457 0.711 0.265 1.543 0.114 2.114-0.458l9.172-9.172c0.572-0.572 0.723-1.403 0.458-2.114-0.097-0.26-0.248-0.504-0.457-0.713z" fill="#000000"></path>
</svg>
</div>
This is how a single error message appears: <span class="messages__highlight">This is highlighted.</span>
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
</div>
<div class="kss-source kss-style">
Source: <code>components/messages/_messages.scss</code>, line 1
</div>
</section>
<section id="kssref-components-messages--color" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-components-messages--color">
<span class="kss-title__ref">
5.11
<span class="kss-title__permalink-hash">
components.messages--color
</span>
</span>
Message colors
</a>
</h2>
<div class="kss-description">
<p>Drupal system status reports use just the message colors and no other
styling.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples </div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<div class="[modifier class]">
This is a system status report message.
</div>