item

item

Class item creates nice component, with optimal line-height and paddings, so that all components looks similar.

<a href="..." class="item">go here</a>

... will have the same height as a button, menu item, input field, etc.

In general, items can have icon prefixes and suffixes. Use data-prefix-"..." and data-suffix="..." attribute, to specify item icons. These icons are place as ":before" and ":after", and additional left and/or right padding is added to item.

<a href="..." class="item" data-prefix="delete" data-suffix="cancel">don't go!</a>

In case the item contains only one "a" element, this "a" element will be stretched to fill the whole item container, and it can be decorated with data-prefix-"..." and data-suffix="...".

<div class="menu--vertical">
     <span class="item">
         <a href="..." data-prefix="delete" data-suffix="cancel">don't go!</a>
     </span>     
</div>

Class item--border renders item with nice round border (similar to input field).

Generally speaking you don't need to use these classes, relevant components are already mixed with this class:

• .btn
• ul.select__items > li
• ul.menu--vertical > li
• ul.menu--horizontal > li
• .check input[type=checkbox] + label

These components are item--border:

• input
• .select
• textarea
• .input__file__dropzone

Note: Icons cannot be used in input (it has no :before or :after).

Where to use it

Use item in custom menu blocks (see menu example above), or if you want to align your component with other predefined components. You probably don't want to use it inside a block text (that doesn't give much sense).