Akeneo styleguides

Overview

In the following pages you will find a comprehensive list of available modules for Akeneo PIM. We organize our styles using the BEM methodology.

BEM means:

  • Block: a designed entity,
  • Element: a part of the block,
  • Modifier: a variation on a block or on an element.

Different naming conventions are available for the BEM methodology. In Akeneo PIM, we implement the following convention:

  • AknBlockName for the main block declaration. We use the prefix Akn to distinguish Akeneo blocks from those of external libraries. The block name is in upper CamelCase.
  • AknBlockName-elementName for each element of the block. The element is linked to the block name with a simple dash, and uses lower camelCase.
  • AknBlockName-elementName--modifierName or AknBlockName--modifierName for the modifiers. The modifier is linked to the block or element with 2 dashes and uses lower camelCase


You can use every block in your custom development, simply with a copy-paste of the HTML code.

You can also mix 2 blocks together. For example, the module AknButtonList prints a list of buttons, centered with the modifier --center:

Item 1
Item 2
    
<div class="AknButtonList AknButtonList--centered">
    <div class="AknButtonList-item">Item 1</div>
    <div class="AknButtonList-item">Item 2</div>
</div>
    

The AknButtonList-item is an element of AknButtonList, but can also be a module itself, for example AknIconButton:

    
<div class="AknButtonList AknButtonList--centered">
    <div class="AknButtonList-item AknIconButton AknIconButton--important"><i class="icon-star"></i></div>
    <div class="AknButtonList-item AknIconButton AknIconButton--apply"><i class="icon-star"></i></div>
</div>
    

AknButton Show code

Prints buttons with text, with or without an icon. You can mix this module's modifiers: for example, you can create a big important uppercase button with an icon. If the button contains only an icon, please use the AknIconButton module.

Button text

Modifiers

Big button Show code

Button text

Small button Show code

Button text

Micro button Show code

Button text

Apply button Show code

Button text

Grey button Show code

Button text

Grey light button Show code

Button text

Important button Show code

Button text

Action button Show code

Button text

Disabled button Show code

Button text

Dropdown button Show code

Button text

Glued buttons Show code

Button text 1
Button text 2
Button text 3

Square icon Show code

AknButtonList Show code

Prints a list of buttons. This can be used with a single button. By default, buttons are left-aligned.

Button text
Button text

Modifiers

Align right Show code

Button text
Button text

Align center Show code

Button text
Button text

In two columns Show code

Button text
Button text

AknActionButton Show code

The action buttons are used for all the secondary actions on a page (it should not change or reload the current page).

Modifiers

Action Button with caret Show code

Big action button Show code

Without border Show code

With highlight Show code

Disabled Show code

Unclickable action button Show code

AknSeveralActionsButton Show code

Prints a button with several actions: a primary action and secondary actions. The text of the primary action is displayed on the button, and a caret is available to display the other actions.

Modifiers

Apply button Show code

Action button Show code

Small button Show code

AknDropdownButton Show code

Prints a button to choose the action within a dropdown (there is no primary action).

Dropdown Button text

Modifiers

Apply button Show code

Dropdown Button text

Important button Show code

Dropdown Button text

Small button Show code

Dropdown Button text

AknIconButton Show code

Prints a single button with a unique icon.

Modifiers

Light icon button Show code

Dark icon button Show code

Grey icon button Show code

Important icon button Show code

Apply icon button Show code

Small icon button Show code

AknSelectButton Show code

Displays a checkbox

Modifiers

Selected Show code

Partial Show code

Disabled Show code

AknFilterBox Show code

The filter box contains a set of filters.

Type
Name

Modifiers

With search Show code

AknFilterChoice Show code

Prints a complete filter with an action and a field.

Title
Label
Operator

AknGrid Show code

Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Content 4 Content 5 Content 6

Modifiers

With full line Show code

Header 1 Header 2 Header 3
Full line

With custom cells Show code

Header 1 Header 2 Header 3
Content Actions

With align Show code

Header 1 Header 2 Header 3
Content left Content centered Content right

With carets Show code

Default Ascending Descending

Condensed Show code

Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Content 4 Content 5 Content 6

Unclickable Show code

Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Content 4 Content 5 Content 6

AknGridContainer Show code

This is a container for a grid. The goal is to display the empty set.

Hint
Subhint

AknGridToolbar Show code

AknFormContainer Show code

Prints a fixed-width container for listing form elements vertically.

Modifiers

With padding Show code

Centered Show code

Expanded Show code

AknFieldContainer Show code

A Field container is mainly composed of a label and an input. You can create a very simple field container with these 2 elements. You can also add a footer (for validation errors, for example), add icons next to the input, etc. Basically, a field container will take all the width of the parent container. To resize it, use the AknFormContainer module.

Modifiers

Complete Show code

Field info
Icons

AknTextField Show code

Prints a simple text field. The radius modifiers can be used to create inline forms.

Modifiers

Without right radius Show code

Without left radius Show code

Without radius Show code

With right button Show code

Value
Button text

Disabled Show code

AknTextareaField Show code

Modifiers

Small Show code

Disabled Show code

AknMetricField Show code

Prints an inline field containing a text field and a dropdown menu to choose a unit.

AknPriceList Show code

Prints a list of prices. The width of each price is computed to display 3 inline prices on an AknFormContainer

ADP
AED

AknMediaField Show code

Drag and drop to upload or click here

AknComparableFields Show code

Displays 2 FieldContainer side by side, with a checkbox in between.

AknState Show code

There are unsaved changes.

AknSubsection Show code

Title Comment

AknHorizontalNavtab Show code

AknVerticalNavtab Show code

Modifiers

Condensed Show code

AknBreadcrumb Show code

Breadcrumb item 1
Breadcrumb item 2

Modifiers

Final Show code

Breadcrumb item 1
Breadcrumb item 2

Routable Show code

Breadcrumb item 1
Breadcrumb item 2

AknSteps Show code

Checked step
Normal step
Normal step

AknVariantNavigation Show code

Root Level 1 Level 2

AknColumnConfigurator Show code

List container 1
List container 2
List header
Button text
List container 3

AknFooter Show code

Prints a discreet list of information.

Footer item 1
Footer item 2

AknHeader Show code

AknNotification Show code

Modifiers

Unread Show code

Icon List Show code

AknNotificationList Show code

AknProjectWidget Show code

ProjectWidget box label
10
ProjectWidget Important box
ProjectWidget box label
20
ProjectWidget Warning box
ProjectWidget box label
30
ProjectWidget Success box
ProjectWidget resume title
ProjectWidget resume content

AknSequentialEdit Show code

AknTitleContainer Show code

Products
John Doe
Title

Modifiers

Complete Show code

Products
John Doe
Title

AknWidget Show code

Widget header
Widget sub title
Widget content
Widget footer

Modifiers

withPadding Show code

Widget header
Widget sub title
Widget content
Widget footer

AknInfoBlock Show code

Prints a centered text for additional information.

Info block

AknCommentPanel Show code

    1. John Doe comments the product 11/07/2017 10:27 AM
      Foo bar
    2. John Doe replies to the comment 11/07/2017 10:27 AM
      foo baz

AknBadge Show code

Badge text

Modifiers

Big Show code

Badge text

Large Show code

Badge text

Small Show code

With icon Show code

Badge text

Success Show code

Badge text

Important Show code

Badge text

Warning Show code

Badge text

Grey Show code

Badge text

Highlight Show code

Badge text

Light Show code

Badge text

AknFlash Show code

Message Title
Message content
42s

Modifiers

Success Show code

Message Title
Message content
42s

Warning Show code

Message Title
Message content
42s

Danger Show code

Message Title
Message content
42s

AknLoadingMask Show code

The loading mask is used when an element is being loaded. Please note than all the style attributes in the source example are automatically generated by the application, you don't need to add them.

AknMessageBox Show code

Title
  • List item 1
  • List item 2

Modifiers

Apply Show code

Title
  • List item 1
  • List item 2

Warning Show code

Title
  • List item 1
  • List item 2

Danger Show code

Title
  • List item 1
  • List item 2

Centered Show code

Title
  • List item 1
  • List item 2

AknProgress Show code

Modifiers

Apply Show code

Warning Show code

Small Show code

Micro Show code

Main Show code

AknVerticalList Show code

Modifiers

Without border Show code

Selectable items Show code

Movable items Show code

  • Item 1
  • Item 2
  • Item 3

AknAcl Show code

ACL

Modifiers

Granted Show code

ACL

Non granted Show code

ACL

Centered Show code

ACL

AknDiff Show code

Displays text with differences (add or remove). Basically, the style only displays inline text, so you have to use one of the available modifiers to see the difference.

Lorem ipsum inline text ipsum lorem.

Modifiers

Remove Show code

Lorem ipsum inline text ipsum lorem.

Add Show code

Lorem ipsum inline text ipsum lorem.

AknList Show code

  • Item 1
  • Item 2
  • Item 3

Modifiers

With discs Show code

  • Item 1
  • Item 2
  • Item 3

AknSquareList Show code

Edit common attributes
Change family
Change status
Add to groups
Add to categories
Move between categories
Remove from categories

Found a typo or a hole in the documentation and feel like contributing?
Join us on Github!