Xmeter Style Guide

2.2 #Base.transparent-elements Transparent Elements

Toggle example guides Toggle HTML markup

A transparent element can be either block-level or text-level, depending on its contents.

Example
Transparent elements styled with inline display:
a:not([href])
placeholder anchor
a[href]
hyperlink
ins
content shown to be inserted into a document
del
content shown to be deleted from a document
slot
a placeholder for dynamic data
Transparent elements styled with block display:
a:not([href])
placeholder anchor
a[href]
hyperlink
ins
content shown to be inserted into a document
del
content shown to be deleted from a document
slot
a placeholder for dynamic data
Markup
<figure class="h-Ruled">
	<figcaption>Transparent elements styled with inline display:</figcaption>
	<dl>
		<dt><code>a:not([href])</code></dt> <dd><a    class="h-Inline">placeholder anchor</a></dd>
		<dt><code>a[href]</code></dt>       <dd><a    class="h-Inline" href="#0">hyperlink</a></dd>
		<dt><code>ins</code></dt>           <dd><ins  class="h-Inline">content shown to be inserted into a document</ins></dd>
		<dt><code>del</code></dt>           <dd><del  class="h-Inline">content shown to be deleted from a document</del></dd>
		<dt><code>slot</code></dt>          <dd><slot class="h-Inline" name="">a placeholder for dynamic data</slot></dd>
	</dl>
</figure>
<figure class="h-Ruled">
	<figcaption>Transparent elements styled with block display:</figcaption>
	<dl>
		<dt><code>a:not([href])</code></dt> <dd><a    class="h-Block">placeholder anchor</a></dd>
		<dt><code>a[href]</code></dt>       <dd><a    class="h-Block" href="#0">hyperlink</a></dd>
		<dt><code>ins</code></dt>           <dd><ins  class="h-Block">content shown to be inserted into a document</ins></dd>
		<dt><code>del</code></dt>           <dd><del  class="h-Block">content shown to be deleted from a document</del></dd>
		<dt><code>slot</code></dt>          <dd><slot class="h-Block" name="">a placeholder for dynamic data</slot></dd>
	</dl>
</figure>
Source: kss-base.scss, line 262