C Inner
A utility to help manage focus styles in an interactive component. Wrap the contents of your component in <span class="c-inner" tabindex="-1">Text</span> or <div class="c-inner" tabindex="-1">Text</div> to only show focus styles on keyboard interaction and not click.
To disable style output from this utility set
$enable-c-inner: false;.
Examples
Buttons
Anchor Anchor Anchor Anchor Anchor Anchor es-ES es-ES es-ES<button class="btn btn-primary" type="button">
<span class="c-inner" tabindex="-1">Primary</span>
</button>Links
.component-title a
Primary Secondary Primary Secondary<a href="/">
<span class="c-inner" tabindex="-1">Regular Anchor Tag</span>
</a>Close
<button aria-label="Close" class="close" type="button">
<span class="c-inner" tabindex="-1">
<svg
class="lexicon-icon lexicon-icon-times"
focusable="false"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#times" />
</svg>
</span>
</button>
<a aria-label="Close" class="close" href="javascript:;" role="button">
<span class="c-inner" tabindex="-1">
<svg
class="lexicon-icon lexicon-icon-times"
focusable="false"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#times" />
</svg>
</span>
</a>Badge
<a class="badge badge-primary" href="javascript:;">
<span class="c-inner" tabindex="-1">
<span class="badge-item badge-item-expand">Primary</span>
</span>
</a>Label
<a class="label label-primary" href="javascript:;">
<span class="c-inner" tabindex="-1">
<span class="label-item label-item-expand">Primary</span>
</span>
</a>Breadcrumb
Card Interactive
Widget Page
Build a page by adding widgets and content.
Widget Page
Build a page by adding widgets and content.
Dropdown
Bootstrap's Dropdown Plugin focuses
dropdown-toggle on show. You will need to manually undo the focus via blur or focus c-inner on show.
<div class="dropdown">
<button
aria-expanded="false"
aria-haspopup="true"
class="link-outline link-outline-primary dropdown-toggle"
data-toggle="dropdown"
id="dropdownSites1"
type="button"
>
<span class="c-inner" tabindex="-1">
Dropdown
<svg
class="lexicon-icon lexicon-icon-caret-bottom"
focusable="false"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#caret-bottom" />
</svg>
</span>
</button>
<ul aria-labelledby="dropdownSites1" class="dropdown-menu">
<li>
<a class="dropdown-item" href="javascript:;"
><span class="c-inner" tabindex="-1">Download</span></a
>
</li>
<li>
<a class="dropdown-item" href="javascript:;"
><span class="c-inner" tabindex="-1">Edit</span></a
>
</li>
<li>
<a class="dropdown-item" href="javascript:;"
><span class="c-inner" tabindex="-1">Move</span></a
>
</li>
<li>
<a class="dropdown-item" href="javascript:;"
><span class="c-inner" tabindex="-1">Checkout</span></a
>
</li>
<li>
<a class="dropdown-item" href="javascript:;"
><span class="c-inner" tabindex="-1">Permissions</span></a
>
</li>
<li>
<a class="dropdown-item" href="javascript:;"
><span class="c-inner" tabindex="-1"
>Move to Recycle Bin</span
></a
>
</li>
</ul>
</div>