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

Label: Highlight

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

Type
Name

AknFilterChoice Show code

Prints a complete filter with an action and a field.

Title
Label
Operator
Label

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

1 2 ... 42
Action button

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
Footer
Validation error

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.

Inch

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

Akeneo
Activity
Products

AknNotification Show code

  • Mass Edit
    Mass edit Set family attribute requirements finished

    • Modifiers

    Unread Show code

  • Mass Edit
    Mass edit Set family attribute requirements finished

    • Icon List Show code

    AknNotificationList Show code

    AknProjectWidget Show code

    ProjectWidget main selector additional information
    ProjectWidget info
    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

    Previous
    Next

    AknTitleContainer Show code

    Products
    John Doe
    Logout
    1
    Title

    Modifiers

    Complete Show code

    Products
    John Doe
    Logout
    1
    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!