GLOSSARY

Glossary

Know all about Ink's hidden treasures.

ALERTS
Class name Description
ink-alert Alerts root class.
basic
block 		Defines the type of alert.
info
success
error 		Defines alert theme.
ink-dismiss Defines a dismissing action button.
  • This class must be used for the component to work.
BUTTONS
Class name Description
ink-button Buttons root class.
blue
green
orange
red
black 		Defines the button theme.
button-group Defines a wrapper to build a button group. Used with a <div> element.
button-toolbar Defines a wrapper to build a button toolbar. Used with a <div> element.
  • This class must be used for the component to work.
FLEXBOX
Class name Description
ink-flex Defines an element as a flex container.
push-top Aligns an element to the top of its flexbox container.
push-middle Aligns an element to vertical center of its flexbox container.
push-bottom Aligns an element to vertical bottom of its flexbox container.
push-left Aligns an element to the left of its flexbox container.
push-center Aligns an element to horizontal center of its flexbox container.
push-right Aligns an element to the right its flexbox container.
order-# Sets the display order for up to 10 elements. When used you have to set the order for all elements inside the parent container.
reverse Inverts the display order of the flexbox containers children. Defaults to the x axis.
vertical Sets the flow inside a flexbox container to the y axis. Items will display vertically. Can be combined with reverse to invert element order.
all-auto Sets the elements width to auto for all breakpoints. Horizontal space will be divided evenly between elements as content size allows.
tiny-auto Sets the elements width to auto for the 'tiny' breakpoint. Horizontal space will be divided evenly between elements as content size allows.
small-auto Sets the elements width to auto for the 'small' breakpoint. Horizontal space will be divided evenly between elements as content size allows.
medium-auto Sets the elements width to auto for the 'medium' breakpoint. Horizontal space will be divided evenly between elements as content size allows.
large-auto Sets the elements width to auto for the 'large' breakpoint. Horizontal space will be divided evenly between elements as content size allows.
xlarge-auto Sets the elements width to auto for the 'xlarge' breakpoint. Horizontal space will be divided evenly between elements as content size allows.
  • This class must be used for the component to work.
  • This class has breakpoint dependent variants, e.g. large-class-name.
  • This feature is only available with ink-flex.css
FORMS
Class name Description
ink-form The form root class.
control-group Defines the container for a label / form control pair. Used with a <div> element.
control Defines the container for a form control (e.g. text field, checkbox, etc.). Used with a <div> element nested in the .control-group.
required Defines a required field.
validation Used if you need to print a message upon form submission.
error
warning 		Defines the type of message printed upon form submission.
tip Defines the default ink style for a tip. Used with a paragraph in the form.
  • This class must be used for the component to work.
GRID
Class name Description
ink-grid The grid root class.
column-group Groups layout columns.
gutters Add space between layout columns.
all-x% Sets x% element width for all breakpoints.
tiny-x% Sets x% element width for the 'tiny' breakpoint.
small-x% Sets x% element width for the 'small' breakpoint.
medium-x% Sets x% element width for the 'medium' breakpoint.
large-x% Sets x% element width for the 'large' breakpoint.
xlarge-x% Sets element x% width for the 'xlarge' breakpoint.
  • This class must be used for the component to work.
  • This class has breakpoint dependent variants, e.g. large-class-name.
  • This class has half and quarter size variants, e.g. half-class-name.
HELPERS
Class name Description
align-left Sets text-align css property to 'left'.
align-center Sets text-align css property to 'center'.
align-right Sets text-align css property to 'right'.
padding Adds padding equivalent to 1 gutter width all around the element.
horizontal-padding Adds padding equivalent to 1 gutter width to the left and right of the element.
vertical-padding Adds padding equivalent to 1 gutter width to the top and bottom of the element.
top-padding Adds padding equivalent to 1 gutter width to the top of the element.
right-padding Adds padding equivalent to 1 gutter width to the right of the element.
bottom-padding Adds padding equivalent to 1 gutter width to the bottom of the element.
left-padding Adds padding equivalent to 1 gutter width to the left of the element.
push-left Sets float css property to 'left'.
push-center Sets float css property to 'none', and margin to '0 auto'.
push-right Sets float css property to 'right'.
top-space Sets margin-top to a full gutter space.
right-space Sets margin-right to a full gutter space.
bottom-space Sets margin-bottom to a full gutter space.
left-space Sets margin-left to a full gutter space.
vertical-space Sets margin-top and margin-bottom to a full gutter space.
horizontal-space Sets margin-left and margin-right to a full gutter space.
hide Sets display css property to 'none'.
show Sets display css property to its default visible state.
  • This class has breakpoint dependent variants, e.g. large-class-name.
  • This class has half and quarter size variants, e.g. half-class-name.
IMAGES & CAPTIONS
Class name Description
ink-image The image root class.
over-top Places the caption over the top of the image.
over-bottom Places the caption over the bottom of the image.
dark Applies a white text on a dark background theme to the caption.
imagequery Identifies images that will be handled by the Ink.UI.ImageQuery component.
  • This class must be used for the component to work.
  • Requires JavaScript
Navigation
Class name Description
ink-navigation The navigation root class.
menu
breadcrumbs
pagination
pills dropdown 		Defines the type of navigation.
white
grey
black
blue
green
orange
red 		Defines the navigation theme color.
  • This class must be used for the component to work.
TABLES
Class name Description
ink-table The table root class.
alternating Sets a darker darker background color on odd number rows.
hover Highlights table rows when the mouse pointer hovers a row.
bordered Applies borders to all table cells.
red
green
blue
orange
grey
black
yellow 		Sets a background color on a table row
  • This class must be used for the component to work.
TYPOGRAPHY
Class name Description
fw-100
fw-300
fw-400
fw-500
fw-700
fw-900 		Sets font weight and defines font-family as Roboto.
condensed-300
condensed-400
condensed-700 		Sets font weight and defines font-family as Roboto Condensed.
slab-100
slab-300
slab-400
slab-700 		Sets font weight and defines font-family as Roboto Slab.
sans Set font-family to the sans-serif font stack
serif Set font-family to the serif font stack
monospace Set font-family to the monospaced font stack
condensed Set font-family to the condensed font stack
slab Set font-family to the slab serif font stack
small Sets font-size to 75% of the base font-size
medium Sets font-size to 85% of the base font-size
large Sets font-size to 120% of the base font-size
extralarge Sets font-size to 145% of the base font-size
uppercase Transforms character to upper case
lowercase Transforms character to upper case
  • This class must be used for the component to work.
  • This class has breakpoint dependent variants, e.g. large-class-name.
  • This class has half and quarter size variants, e.g. half-class-name.
  • This feature is only available with ink-flex.css
  • Requires JavaScript