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.

Inline Item

  • Link Without Whitespace
  • Link With Whitespace
  • Button Without Whitespace
  • Button With Whitespace
  • Close
    • Anchor
    • Button

Use the inline-item inline-item-before, inline-item inline-item-middle, and inline-item inline-item-after classes to provide consistent spacing between text and icons in elements such as links or buttons. This can also be used in other components that have inline content (e.g., badge and label).

For this component to function and space properly, the white space must be removed between text and icons from the markup inside the component. It's generally easier to remove all white space inside the link, button, or component. In the examples below, whitespaces in button and link are slightly off and the link underline on hover is a bit wide.

Link Without Whitespace

linkwhy, but ok.
Copied!
Code Sample (expand to see it)
<a href="#1">
	<span class="inline-item inline-item-before"
		><svg
			class="lexicon-icon lexicon-icon-share"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share" /></svg></span
	>link<span class="inline-item inline-item-middle"
		><svg
			class="lexicon-icon lexicon-icon-question-circle"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#question-circle" /></svg></span
	><span class="inline-item inline-item-middle"
		><svg
			class="lexicon-icon lexicon-icon-question-circle"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#question-circle" /></svg></span
	><span class="inline-item inline-item-middle"
		><svg
			class="lexicon-icon lexicon-icon-question-circle"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#question-circle" /></svg></span
	>why, but ok.<span class="inline-item inline-item-after"
		><svg
			class="lexicon-icon lexicon-icon-add-cell"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#add-cell" /></svg
	></span>
</a>

Link With Whitespace

link
Copied!
Code Sample (expand to see it)
<a href="#1">
	<span class="inline-item inline-item-before">
		<svg
			class="lexicon-icon lexicon-icon-share"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share" />
		</svg>
	</span>
	link
	<span class="inline-item inline-item-after">
		<svg
			class="lexicon-icon lexicon-icon-add-cell"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#add-cell" />
		</svg>
	</span>
</a>

Button Without Whitespace

Copied!
Code Sample (expand to see it)
<button class="btn btn-secondary" type="button">
	<span class="inline-item inline-item-before">
		<svg
			class="lexicon-icon lexicon-icon-plus"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#plus" />
		</svg>
	</span>
	Secondary
	<span class="inline-item inline-item-after">
		<svg
			class="lexicon-icon lexicon-icon-camera"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#camera" />
		</svg>
	</span>
</button>

Button With Whitespace

Copied!
Code Sample (expand to see it)
<button class="btn btn-secondary" type="button">
	<span class="inline-item inline-item-before">
		<svg
			class="lexicon-icon lexicon-icon-plus"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#plus" />
		</svg>
	</span>
	Secondary
	<span class="inline-item inline-item-after">
		<svg
			class="lexicon-icon lexicon-icon-camera"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#camera" />
		</svg>
	</span>
</button>

Close

A Button or Link for closing stuff.

Anchor

× ×
Copied!
Code Sample (expand to see it)
<a aria-label="Close" class="close" href="#1" role="button">
	<svg
		class="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</a>
<a
	aria-label="Close"
	class="close disabled"
	href="#1"
	role="button"
	tabindex="-1"
>
	<svg
		class="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</a>
<a aria-label="Close" class="close" href="#1" role="button">
	<span aria-hidden="true">×</span>
</a>
<a
	aria-label="Close"
	class="close disabled"
	href="#1"
	role="button"
	tabindex="-1"
>
	<span aria-hidden="true">×</span>
</a>

Button

Copied!
Code Sample (expand to see it)
<button aria-label="Close" class="close" type="button">
	<svg
		class="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</button>
<button aria-label="Close" class="close" disabled type="button">
	<svg
		class="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</button>
<button aria-label="Close" class="close" type="button">
	<span aria-hidden="true">×</span>
</button>
<button aria-label="Close" class="close" disabled type="button">
	<span aria-hidden="true">×</span>
</button>

How can this be improved? Create an issue!