Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

C Inner

  • Examples
    • Buttons
    • Links
    • Close
    • Badge
    • Label
    • Breadcrumb
    • Card Interactive
    • Dropdown

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
Copied!
Code Sample (expand to see it)
<button class="btn btn-primary" type="button">
	<span class="c-inner" tabindex="-1">Primary</span>
</button>

Links

Regular Anchor Tag
.link-primary
.link-secondary
.link-primary.single-link
.link-secondary.single-link
.component-link

.component-title a

.component-subtitle a

Primary Secondary Primary Secondary
Copied!
Code Sample (expand to see it)
<a href="/">
	<span class="c-inner" tabindex="-1">Regular Anchor Tag</span>
</a>

Close

× ×
Copied!
Code Sample (expand to see it)
<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

Primary ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
Copied!
Code Sample (expand to see it)
<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

Primary Secondary thumbnail Normal Label thumbnail Label Lg thumbnail Label Secondary thumbnail Label Primary
Copied!
Code Sample (expand to see it)
<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

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

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.
  • Download
  • Edit
  • Move
  • Checkout
  • Permissions
  • Move to Recycle Bin
Copied!
Code Sample (expand to see it)
<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>

How can this be improved? Create an issue!