C Inner

A utility to help manage focus styles in an interactive component. Wrap the contents of your component in <span className="c-inner" tabindex="-1">Text</span> or <div className="c-inner" tabindex="-1">Text</div> to only show focus styles on keyboard interaction and not click.

Examples

Buttons

<button className="btn btn-primary" type="button">
	<span className="c-inner" tabindex="-1">Primary</span>
</button>

Links

.component-title a

.component-subtitle a

<a href="/">
	<span className="c-inner" tabindex="-1">Regular Anchor Tag</span>
</a>

Close

<button aria-label="Close" className="close" type="button">
	<span className="c-inner" tabindex="-1">
		<svg
			className="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</span>
</button>
<a aria-label="Close" className="close" href="javascript:;" role="button">
	<span className="c-inner" tabindex="-1">
		<svg
			className="lexicon-icon lexicon-icon-times"
			focusable="false"
			role="presentation"
		>
			<use xlink:href="/images/icons/icons.svg#times" />
		</svg>
	</span>
</a>

Badge

<a className="badge badge-primary" href="javascript:;">
	<span className="c-inner" tabindex="-1">
		<span className="badge-item badge-item-expand">Primary</span>
	</span>
</a>

Label

Normal Label

Label Lg

Label Secondary

Label Primary

<a className="label label-primary" href="javascript:;">
	<span className="c-inner" tabindex="-1">
		<span className="label-item label-item-expand">Primary</span>
	</span>
</a>

Breadcrumb

1. • Home
   • Components
   • Breadcrumbs and Paginations
2. Page
3. ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
4. Active

Card Interactive

Widget Page

Build a page by adding widgets and content.

Widget Page

Build a page by adding widgets and content.

Textarea

Dropdown

<div className="dropdown">
	<button
		aria-expanded="false"
		aria-haspopup="true"
		className="link-outline link-outline-primary dropdown-toggle"
		data-toggle="dropdown"
		id="dropdownSites1"
		type="button"
	>
		<span className="c-inner" tabindex="-1">
			Dropdown
			<svg
				className="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" className="dropdown-menu">
		<li>
			<a className="dropdown-item" href="javascript:;"
				><span className="c-inner" tabindex="-1">Download</span></a
			>
		</li>
		<li>
			<a className="dropdown-item" href="javascript:;"
				><span className="c-inner" tabindex="-1">Edit</span></a
			>
		</li>
		<li>
			<a className="dropdown-item" href="javascript:;"
				><span className="c-inner" tabindex="-1">Move</span></a
			>
		</li>
		<li>
			<a className="dropdown-item" href="javascript:;"
				><span className="c-inner" tabindex="-1">Checkout</span></a
			>
		</li>
		<li>
			<a className="dropdown-item" href="javascript:;"
				><span className="c-inner" tabindex="-1">Permissions</span></a
			>
		</li>
		<li>
			<a className="dropdown-item" href="javascript:;"
				><span className="c-inner" tabindex="-1"
					>Move to Recycle Bin</span
				></a
			>
		</li>
	</ul>
</div>