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

Description

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
<div class="AknButton">Button text</div>

Modifiers

Big button Show code

Button text
<div class="AknButton AknButton--big">Button text</div>

Small button Show code

Button text
<div class="AknButton AknButton--small">Button text</div>

Micro button Show code

Button text
<div class="AknButton AknButton--micro">Button text</div>

Apply button Show code

Button text
<div class="AknButton AknButton--apply">Button text</div>

Grey button Show code

Button text
<div class="AknButton AknButton--grey">Button text</div>

Important button Show code

Button text
<div class="AknButton AknButton--important">Button text</div>

Action button Show code

Button text
<div class="AknButton AknButton--action">Button text</div>

Disabled button Show code

Button text
<div class="AknButton AknButton--disabled">Button text</div>

Button without left radius Show code

Button text
<div class="AknButton AknButton--noLeftRadius">Button text</div>

Uppercase button Show code

Button text
<div class="AknButton AknButton--uppercase">Button text</div>

Button with icon Show code

Button text 
<div class="AknButton AknButton--withIcon">
    <i class="AknButton-icon icon-plus"></i>
    Button text
</div>

AknButtonList Show code

Description

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

Button text
Button text
<div class="AknButtonList">
    <div class="AknButton AknButtonList-item">Button text</div>
    <div class="AknButton AknButtonList-item">Button text</div>
</div>

Modifiers

Align right Show code

Button text
Button text
<div class="AknButtonList AknButtonList--right">
    <div class="AknButton AknButtonList-item">Button text</div>
    <div class="AknButton AknButtonList-item">Button text</div>
</div>

Align center Show code

Button text
Button text
<div class="AknButtonList AknButtonList--centered">
    <div class="AknButton AknButtonList-item">Button text</div>
    <div class="AknButton AknButtonList-item">Button text</div>
</div>

In two columns Show code

Button text
Button text
<div class="AknButtonList AknButtonList--twoColumns">
    <div class="AknButton AknButtonList-item">Button text</div>
    <div class="AknButton AknButtonList-item">Button text</div>
</div>

AknActionButton Show code

Description

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

<button class="AknActionButton">Action Button text</button>

Modifiers

Action Button with caret Show code 

<div class="AknDropdown">
    <button class="AknActionButton" data-toggle="dropdown">
        Action button text
        <span class="AknActionButton-caret AknCaret"></span>
    </button>
    <ul class="AknDropdown-menu">
        <li><a href="#" class="AknDropdown-menuLink">Menu link 1</a></li>
        <li><a href="#" class="AknDropdown-menuLink">Menu link 2</a></li>
        <li><a href="#" class="AknDropdown-menuLink">Menu link 3</a></li>
    </ul>
</div>

Action Button without left border Show code 

<button class="AknActionButton AknActionButton--noLeftBorder">Action Button text</button>

Action Button without right border Show code 

<button class="AknActionButton AknActionButton--noRightBorder">Action Button text</button>

Action Button containing button Show code

Action Button text: 
<div class="AknDropdown">
    <div class="AknActionButton" data-toggle="dropdown">
        Action Button text:
        <button class="AknActionButton-selectButton">
            <span>Sub text</span>
            <span class="AknActionButton-caret AknCaret"></span>
        </button>
    </div>
    <ul class="AknDropdown-menu">
        <li><a href="#" class="AknDropdown-menuLink">Menu link 1</a></li>
        <li><a href="#" class="AknDropdown-menuLink">Menu link 2</a></li>
        <li><a href="#" class="AknDropdown-menuLink">Menu link 3</a></li>
    </ul>
</div>

Big action button Show code 

<button class="AknActionButton AknActionButton--big">Action Button text</button>

Glued Show code 

<div style="font-size:0">
    <button class="AknActionButton AknActionButton--glued">Action Button 1</button>
    <button class="AknActionButton AknActionButton--glued">Action button 2</button>
    <button class="AknActionButton AknActionButton--glued">Action Button 3</button>
</div>

Disabled Show code 

<button class="AknActionButton AknActionButton--disabled">Action Button text</button>

Square Show code 

<button class="AknActionButton AknActionButton--square">&gt;</button>

AknSeveralActionsButton Show code

Description

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.

<div class="AknSeveralActionsButton AknDropdown">
    <button type="button" class="AknSeveralActionsButton-mainAction">All</button>
    <button type="button" class="AknSeveralActionsButton-caretContainer" data-toggle="dropdown">
        <i class="AknCaret AknCaret--inverse"></i>
    </button>
    <ul class="AknSeveralActionsButton-menu AknDropdown-menu">
        <li><a class="AknDropdown-menuLink" href="#">Menu link 1</a></li>
        <li><a class="AknDropdown-menuLink" href="#">Menu link 2</a></li>
        <li><a class="AknDropdown-menuLink" href="#">Menu link 3</a></li>
    </ul>
</div>

Modifiers

Apply button Show code 

<div class="AknSeveralActionsButton AknSeveralActionsButton--apply AknDropdown">
    <button type="button" class="AknSeveralActionsButton-mainAction">All</button>
    <button type="button" class="AknSeveralActionsButton-caretContainer" data-toggle="dropdown">
        <i class="AknCaret AknCaret--inverse"></i>
    </button>
    <ul class="AknSeveralActionsButton-menu AknDropdown-menu">
        <li><a class="AknDropdown-menuLink" href="#">Menu link 1</a></li>
        <li><a class="AknDropdown-menuLink" href="#">Menu link 2</a></li>
        <li><a class="AknDropdown-menuLink" href="#">Menu link 3</a></li>
    </ul>
</div>

Action button Show code 

<div class="AknSeveralActionsButton AknSeveralActionsButton--action AknDropdown">
    <button type="button" class="AknSeveralActionsButton-mainAction">All</button>
    <button type="button" class="AknSeveralActionsButton-caretContainer" data-toggle="dropdown">
        <i class="AknCaret AknCaret--inverse"></i>
    </button>
    <ul class="AknSeveralActionsButton-menu AknDropdown-menu">
        <li><a class="AknDropdown-menuLink" href="#">Menu link 1</a></li>
        <li><a class="AknDropdown-menuLink" href="#">Menu link 2</a></li>
        <li><a class="AknDropdown-menuLink" href="#">Menu link 3</a></li>
    </ul>
</div>

Small button Show code 

<div class="AknSeveralActionsButton AknSeveralActionsButton--small AknDropdown">
    <button type="button" class="AknSeveralActionsButton-mainAction">All</button>
    <button type="button" class="AknSeveralActionsButton-caretContainer" data-toggle="dropdown">
        <i class="AknCaret AknCaret--inverse"></i>
    </button>
    <ul class="AknSeveralActionsButton-menu AknDropdown-menu">
        <li><a class="AknDropdown-menuLink" href="#">Menu link 1</a></li>
        <li><a class="AknDropdown-menuLink" href="#">Menu link 2</a></li>
        <li><a class="AknDropdown-menuLink" href="#">Menu link 3</a></li>
    </ul>
</div>

AknDropdownButton Show code

Description

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

Dropdown Button text 
<div class="AknDropdownButton">
    <div class="AknDropdownButton-button">
        Dropdown Button text
        <div class="AknDropdownButton-caretContainer">
            <i class="AknCaret AknCaret--big"></i>
        </div>
    </div>
</div>

Modifiers

Apply button Show code

Dropdown Button text 
<div class="AknDropdownButton AknDropdownButton--apply">
    <div class="AknDropdownButton-button">
        Dropdown Button text
        <div class="AknDropdownButton-caretContainer">
            <i class="AknCaret AknCaret--big AknCaret--apply"></i>
        </div>
    </div>
</div>

Important button Show code

Dropdown Button text 
<div class="AknDropdownButton AknDropdownButton--important">
    <div class="AknDropdownButton-button">
        Dropdown Button text
        <div class="AknDropdownButton-caretContainer">
            <i class="AknCaret AknCaret--big AknCaret--important"></i>
        </div>
    </div>
</div>

Small button Show code

Dropdown Button text 
<div class="AknDropdownButton AknDropdownButton--small">
    <div class="AknDropdownButton-button">
        Dropdown Button text
        <div class="AknDropdownButton-caretContainer">
            <i class="AknCaret AknCaret--big"></i>
        </div>
    </div>
</div>

AknIconButton Show code

Description

Prints a single button with a unique icon.

<button class="AknIconButton"><i class="icon-star"></i></button>

Modifiers

Light icon button Show code 

<button class="AknIconButton AknIconButton--light"><i class="icon-star"></i></button>

Dark icon button Show code 

<button class="AknIconButton AknIconButton--dark"><i class="icon-star"></i></button>

Grey icon button Show code 

<button class="AknIconButton AknIconButton--grey"><i class="icon-star"></i></button>

Important icon button Show code 

<button class="AknIconButton AknIconButton--important"><i class="icon-star"></i></button>

Apply icon button Show code 

<button class="AknIconButton AknIconButton--apply"><i class="icon-star"></i></button>

Small icon button Show code 

<button class="AknIconButton AknIconButton--small"><i class="icon-star"></i></button>

AknDashboardButtons Show code

Description

Prints a set of big buttons with an image.

Manage Products Manage Families Manage Attributes Manage Categories 
<div class="AknDashboardButtons">
    <a href="#" class="AknDashboardButtons-item">
        <img class="AknDashboardButtons-image" src="../web/bundles/pimdashboard/images/widget_links_products.png">
        Manage Products
    </a>
    <a href="#" class="AknDashboardButtons-item" title="Manage Families">
        <img class="AknDashboardButtons-image" src="../web/bundles/pimdashboard/images/widget_links_families.png">
        Manage Families
    </a>
    <a href="#" class="AknDashboardButtons-item" title="Manage Attributes">
        <img class="AknDashboardButtons-image" src="../web/bundles/pimdashboard/images/widget_links_attributes.png">
        Manage Attributes
    </a>
    <a href="#" class="AknDashboardButtons-item" title="Manage Categories">
        <img class="AknDashboardButtons-image" src="../web/bundles/pimdashboard/images/widget_links_categories.png">
        Manage Categories
    </a>
</div>

AknFilterBox Show code

Description

The filter box contains several filters, and a left primary button.

Add filter
<div class="AknFilterBox">
    <div class="AknFilterBox-addFilterButton">Add filter</div>
    <div class="AknFilterBox-filter">
        <button class="AknActionButton">Action Button text</button>
        <a href="#" class="AknFilterBox-disableFilter"><i class="icon-remove hide-text"></i></a>
    </div>
    <div class="AknFilterBox-filter">
        <button class="AknActionButton">Action Button text</button>
        <a href="#" class="AknFilterBox-disableFilter"><i class="icon-remove hide-text"></i></a>
    </div>
</div>

AknFilterChoice Show code

Description

Prints an inline filter with an action and a field.

<div style="width: 1px"><!-- Used to simulate a little container, don't copy it -->
    <div class="AknFilterChoice">
        <div class="AknFilterChoice-operator">
            <button class="AknActionButton AknActionButton--big AknActionButton--noRightBorder">Action Button text</button>
        </div>
        <input class="AknTextField AknFilterChoice-field AknTextField--noRadius"/>
        <button class="AknFilterChoice-button AknButton AknButton--apply AknButton--noLeftRadius">Update</button>
    </div>
</div>

AknFilterDate Show code

Description

Prints a filter to manage dates. The first and secondary fields can be hidden.

- 
<div class="AknFilterDate">
    <select class="AknFilterDate-select">
        <option value="1" selected="selected">between</option>
        <option value="2">not between</option>
        <option value="3">more than</option>
        <option value="4">less than</option>
    </select>
    <div class="AknFilterDate-dates">
        <span class="AknFilterDate-start">
            <input class="AknTextField"/>
        </span>
        <span class="AknFilterDate-separator">-</span>
        <span class="AknFilterDate-end">
            <input class="AknTextField"/>
        </span>
    </div>
    <div class="AknButtonList AknButtonList--right">
        <button class="AknButtonList-item AknButton AknButton--apply">Update</button>
    </div>
</div>

AknGrid Show code

Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Content 4 Content 5 Content 6 
<table class="AknGrid">
    <tr>
        <th class="AknGrid-headerCell">Header 1</th>
        <th class="AknGrid-headerCell">Header 2</th>
        <th class="AknGrid-headerCell">Header 3</th>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 1</td>
        <td class="AknGrid-bodyCell">Content 2</td>
        <td class="AknGrid-bodyCell">Content 3</td>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 4</td>
        <td class="AknGrid-bodyCell">Content 5</td>
        <td class="AknGrid-bodyCell">Content 6</td>
    </tr>
</table>

Modifiers

With full line Show code

Header 1 Header 2 Header 3
Full line 
<table class="AknGrid">
    <tr>
        <th class="AknGrid-headerCell">Header 1</th>
        <th class="AknGrid-headerCell">Header 2</th>
        <th class="AknGrid-headerCell">Header 3</th>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td colspan="3" class="AknGrid-bodyCell AknGrid-bodyCell--full">Full line</td>
    </tr>
</table>

With custom cells Show code

Header 1 Header 2 Header 3
Content Actions 
<table class="AknGrid">
    <tr>
        <th class="AknGrid-headerCell AknGrid-bodyCell--tight">Header 1</th>
        <th class="AknGrid-headerCell">Header 2</th>
        <th class="AknGrid-headerCell">Header 3</th>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell AknGrid-bodyCell--tight"><input type="checkbox"></td>
        <td class="AknGrid-bodyCell">Content</td>
        <td class="AknGrid-bodyCell AknGrid-bodyCell--actions">Actions</td>
    </tr>
</table>

With align Show code

Header 1 Header 2 Header 3
Content left Content centered Content right 
<table class="AknGrid">
    <tr>
        <th class="AknGrid-headerCell">Header 1</th>
        <th class="AknGrid-headerCell AknGrid-headerCell--center">Header 2</th>
        <th class="AknGrid-headerCell AknGrid-headerCell--right">Header 3</th>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content left</td>
        <td class="AknGrid-bodyCell AknGrid-bodyCell--center">Content centered</td>
        <td class="AknGrid-bodyCell AknGrid-bodyCell--right">Content right</td>
    </tr>
</table>

With carets Show code

Default Ascending Descending 
<table class="AknGrid">
    <tr>
        <th class="AknGrid-headerCell">Default <span class="AknGrid-caret AknCaret"></span></th>
        <th class="AknGrid-headerCell AknGrid-headerCell--ascending">Ascending <span class="AknGrid-caret AknCaret"></span></th>
        <th class="AknGrid-headerCell AknGrid-headerCell--descending">Descending <span class="AknGrid-caret AknCaret"></span></th>
    </tr>
</table>

Condensed Show code

Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Content 4 Content 5 Content 6 
<table class="AknGrid AknGrid--condensed">
    <tr>
        <th class="AknGrid-headerCell">Header 1</th>
        <th class="AknGrid-headerCell">Header 2</th>
        <th class="AknGrid-headerCell">Header 3</th>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 1</td>
        <td class="AknGrid-bodyCell">Content 2</td>
        <td class="AknGrid-bodyCell">Content 3</td>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 4</td>
        <td class="AknGrid-bodyCell">Content 5</td>
        <td class="AknGrid-bodyCell">Content 6</td>
    </tr>
</table>

Unclickable Show code

Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Content 4 Content 5 Content 6 
<table class="AknGrid AknGrid--unclickable">
    <tr>
        <th class="AknGrid-headerCell">Header 1</th>
        <th class="AknGrid-headerCell">Header 2</th>
        <th class="AknGrid-headerCell">Header 3</th>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 1</td>
        <td class="AknGrid-bodyCell">Content 2</td>
        <td class="AknGrid-bodyCell">Content 3</td>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 4</td>
        <td class="AknGrid-bodyCell">Content 5</td>
        <td class="AknGrid-bodyCell">Content 6</td>
    </tr>
</table>

AknGridsLine Show code

Description

Prints a set of grids in one line.

Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Content 4 Content 5 Content 6
Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Content 4 Content 5 Content 6
Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Content 4 Content 5 Content 6 
<div class="AknGridsLine channels" style="">
    <div class="AknGridsLine-item">
        <table class="AknGrid">
    <tr>
        <th class="AknGrid-headerCell">Header 1</th>
        <th class="AknGrid-headerCell">Header 2</th>
        <th class="AknGrid-headerCell">Header 3</th>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 1</td>
        <td class="AknGrid-bodyCell">Content 2</td>
        <td class="AknGrid-bodyCell">Content 3</td>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 4</td>
        <td class="AknGrid-bodyCell">Content 5</td>
        <td class="AknGrid-bodyCell">Content 6</td>
    </tr>
</table>
    </div>
    <div class="AknGridsLine-item">
        <table class="AknGrid">
    <tr>
        <th class="AknGrid-headerCell">Header 1</th>
        <th class="AknGrid-headerCell">Header 2</th>
        <th class="AknGrid-headerCell">Header 3</th>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 1</td>
        <td class="AknGrid-bodyCell">Content 2</td>
        <td class="AknGrid-bodyCell">Content 3</td>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 4</td>
        <td class="AknGrid-bodyCell">Content 5</td>
        <td class="AknGrid-bodyCell">Content 6</td>
    </tr>
</table>
    </div>
    <div class="AknGridsLine-item">
        <table class="AknGrid">
    <tr>
        <th class="AknGrid-headerCell">Header 1</th>
        <th class="AknGrid-headerCell">Header 2</th>
        <th class="AknGrid-headerCell">Header 3</th>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 1</td>
        <td class="AknGrid-bodyCell">Content 2</td>
        <td class="AknGrid-bodyCell">Content 3</td>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 4</td>
        <td class="AknGrid-bodyCell">Content 5</td>
        <td class="AknGrid-bodyCell">Content 6</td>
    </tr>
</table>
    </div>
</div>

AknGridContainer Show code

Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Content 4 Content 5 Content 6 
<div class="AknGridContainer">
    <table class="AknGrid">
    <tr>
        <th class="AknGrid-headerCell">Header 1</th>
        <th class="AknGrid-headerCell">Header 2</th>
        <th class="AknGrid-headerCell">Header 3</th>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 1</td>
        <td class="AknGrid-bodyCell">Content 2</td>
        <td class="AknGrid-bodyCell">Content 3</td>
    </tr>
    <tr class="AknGrid-bodyRow">
        <td class="AknGrid-bodyCell">Content 4</td>
        <td class="AknGrid-bodyCell">Content 5</td>
        <td class="AknGrid-bodyCell">Content 6</td>
    </tr>
</table>
</div>

AknFormContainer Show code

Description

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

<div class="AknFormContainer">
    <div class="AknFieldContainer">
    <div class="AknFieldContainer-header">
        <label class="AknFieldContainer-label">Label</label>
    </div>
    <div class="AknFieldContainer-inputContainer">
        <input class="AknTextField"/>
    </div>
</div>
    <div class="AknFieldContainer">
    <div class="AknFieldContainer-header">
        <label class="AknFieldContainer-label">Label</label>
    </div>
    <div class="AknFieldContainer-inputContainer">
        <input class="AknTextField"/>
    </div>
</div>
</div>

Modifiers

With padding Show code 

<div class="AknFormContainer AknFormContainer--withPadding">
    <div class="AknFieldContainer">
    <div class="AknFieldContainer-header">
        <label class="AknFieldContainer-label">Label</label>
    </div>
    <div class="AknFieldContainer-inputContainer">
        <input class="AknTextField"/>
    </div>
</div>
    <div class="AknFieldContainer">
    <div class="AknFieldContainer-header">
        <label class="AknFieldContainer-label">Label</label>
    </div>
    <div class="AknFieldContainer-inputContainer">
        <input class="AknTextField"/>
    </div>
</div>
</div>

AknFieldContainer Show code

Description

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.

<div class="AknFieldContainer">
    <div class="AknFieldContainer-header">
        <label class="AknFieldContainer-label">Label</label>
    </div>
    <div class="AknFieldContainer-inputContainer">
        <input class="AknTextField"/>
    </div>
</div>

Modifiers

Complete Show code

Field info
Icons
Footer
Validation error 
<div class="AknFieldContainer">
    <div class="AknFieldContainer-header">
        <label class="AknFieldContainer-label">Label</label>
        <span class="AknFieldContainer-fieldInfo">Field info</span>
    </div>
    <div class="AknFieldContainer-inputContainer">
        <input class="AknTextField"/>
        <div class="AknFieldContainer-iconsContainer">Icons</div>
    </div>
    <div class="AknFieldContainer-footer">
        Footer
        <div class="AknFieldContainer-validationErrors">
            <div class="AknFieldContainer-validationError">
                <i class="icon-warning-sign"></i> Validation error
            </div>
        </div>
    </div>
</div>

AknTextField Show code

Description

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

<input class="AknTextField"/>

Modifiers

Without right radius Show code 

<input class="AknTextField AknTextField--noRightRadius"/>

Without left radius Show code 

<input class="AknTextField AknTextField--noLeftRadius"/>

Without radius Show code 

<input class="AknTextField AknTextField--noRadius"/>

With right button Show code

Value
Button text
<div class="AknTextField AknTextField--withRightButton">
    Value
    <div class="AknButton AknButton--small">Button text</div>
</div>

Disabled Show code 

<input class="AknTextField AknTextField--disabled"/>

AknTextareaField Show code 

<textarea class="AknTextareaField"></textarea>

Modifiers

Small Show code 

<textarea class="AknTextareaField AknTextareaField--small"></textarea>

Disabled Show code 

<textarea class="AknTextareaField" disabled></textarea>

AknMetricField Show code

Description

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

Inch 
<div class="AknMetricField">
    <input class="AknTextField AknTextField--noRightRadius"/>
    <div class="AknMetricField-unit select2-container">
        <a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1">
            <span class="select2-chosen">Inch</span>
            <span class="select2-arrow"><b></b></span>
        </a>
    </div>
</div>

AknPriceList Show code

Description

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

ADP
AED 
<div class="AknPriceList">
    <div class="AknPriceList-item">
        <input class="AknTextField AknTextField--noRightRadius"/>
        <span class="AknPriceList-currency">ADP</span>
    </div>
    <div class="AknPriceList-item">
        <input class="AknTextField AknTextField--noRightRadius"/>
        <span class="AknPriceList-currency">AED</span>
    </div>
</div>

AknMediaField Show code

Drag and drop to upload or click here 
<div class="AknMediaField ">
    <input class="AknMediaField-fileUploaderInput" type="file">
    <div class="AknMediaField-emptyContainer">
        <img src="../web/bundles/pimui/images/upload.png" class="AknMediaField-uploadIcon">
        <span>Drag and drop to upload or click here</span>
    </div>
    <div class="AknMediaField-progress AknProgress AknProgress--micro">
        <div class="AknProgress-bar bar"></div>
    </div>
</div>

Modifiers

With media Show code

IMG_20170102_201321.jpg
<div class="AknMediaField has-file">
    <div class="AknMediaField-preview">
        <div class="AknMediaField-thumb">
            <img src="../web/bundles/pimdashboard/images/widget_links_products.png" class="AknMediaField-image">
        </div>
        <div class="AknMediaField-info">
            <div class="filename" title="IMG_20170102_201321.jpg">IMG_20170102_201321.jpg</div>
            <div class="AknButtonList AknButtonList--centered">
                <span class="AknButtonList-item AknIconButton AknIconButton--grey"><i class="icon-eye-open"></i></span>
                <span class="AknButtonList-item AknIconButton AknIconButton--grey"><i class="icon-cloud-download"></i></span>
                <span class="AknButtonList-item AknIconButton AknIconButton--grey"><i class="icon-trash"></i></span>
            </div>
        </div>
    </div>
</div>

AknComparableFields Show code

Description

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

<div class="AknComparableFields">
    <div class="AknFieldContainer AknComparableFields-item">
    <div class="AknFieldContainer-header">
        <label class="AknFieldContainer-label">Label</label>
    </div>
    <div class="AknFieldContainer-inputContainer">
        <input class="AknTextField"/>
    </div>
</div>
    <div class="AknComparableFields-item AknComparableFields-item--comparisonContainer AknFieldContainer">
        <div data-attribute="description" class="AknComparableFields">
            <div class="AknComparableFields-copyContainer">
                <input type="checkbox" class="AknComparableFields-checkbox">
                <div class="AknFieldContainer AknComparableFields-item">
    <div class="AknFieldContainer-header">
        <label class="AknFieldContainer-label">Label</label>
    </div>
    <div class="AknFieldContainer-inputContainer">
        <input class="AknTextField"/>
    </div>
</div>
            </div>
        </div>
    </div>
</div>

AknHorizontalNavtab Show code 

<div class="AknHorizontalNavtab">
    <ul class="AknHorizontalNavtab-list">
        <li class="AknHorizontalNavtab-item">
            <a class="AknHorizontalNavtab-link" href="#">General properties</a>
        </li>
        <li class="AknHorizontalNavtab-item AknHorizontalNavtab-item--active">
            <a class="AknHorizontalNavtab-link" href="#">Content</a>
        </li>
        <li class="AknHorizontalNavtab-item">
            <a class="AknHorizontalNavtab-link" href="#">History</a>
        </li>
    </ul>
</div>

AknTabHeader Show code

Title
Sub title 
<div class="AknTabHeader">
    <div>
        <div class="AknTabHeader-title">Title</div>
        <span class="AknTabHeader-subTitle">Sub title</span>
    </div>
</div>

AknVerticalNavtab Show code 

<ul class="AknVerticalNavtab">
    <li class="AknVerticalNavtab-item AknVerticalNavtab-header"></li>
    <li class="AknVerticalNavtab-item AknVerticalNavtab-item--active">
        <a class="AknVerticalNavtab-link" href="#">Active link</a>
    </li>
    <li class="AknVerticalNavtab-item">
        <a class="AknVerticalNavtab-link" href="#">Link</a>
    </li>
</ul>

Modifiers

Condensed Show code 

<ul class="AknVerticalNavtab AknVerticalNavtab--condensed">
    <li class="AknVerticalNavtab-item AknVerticalNavtab-header"></li>
    <li class="AknVerticalNavtab-item AknVerticalNavtab-item--active">
        <a class="AknVerticalNavtab-link" href="#">Active link</a>
    </li>
    <li class="AknVerticalNavtab-item">
        <a class="AknVerticalNavtab-link" href="#">Link</a>
    </li>
</ul>

AknBreadcrumb Show code

Breadcrumb item 1
Breadcrumb item 2
<div class="AknBreadcrumb">
    <div class="AknBreadcrumb-item">Breadcrumb item 1</div>
    <div class="AknBreadcrumb-item">Breadcrumb item 2</div>
</div>

AknMainMenu Show code 

<ul class="AknMainMenu">
    <li class="AknMainMenu-item">
        <a class="AknMainMenu-link" href="#">Main A</a>
        <ul class="AknMainMenu-submenu AknMainMenu-level1">
            <li class="AknMainMenu-item">
                <a class="AknMainMenu-link" href="#">Sub 1</a>
            </li>
            <li class="AknMainMenu-item">
                <a class="AknMainMenu-link" href="#">Sub 2</a>
            </li>
        </ul>
    </li>
    <li class="AknMainMenu-item">
        <a class="AknMainMenu-link" href="#">Main B</a>
        <ul class="AknMainMenu-submenu AknMainMenu-level1">
            <li class="AknMainMenu-item">
                <a class="AknMainMenu-link" href="#">Sub 1</a>
            </li>
            <li class="AknMainMenu-item">
                <a class="AknMainMenu-link" href="#">Sub with content</a>
                <ul class="AknMainMenu-submenu AknMainMenu-level2">
                    <li class="AknMainMenu-item">
                        <a class="AknMainMenu-link" href="#">Item 1</a>
                    </li>
                    <li class="AknMainMenu-item">
                        <a class="AknMainMenu-link" href="#">Item 2</a>
                    </li>
                    <li class="AknMainMenu-item">
                        <a class="AknMainMenu-link" href="#">Item 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

AknGridToolbar Show code 

<div class="AknGridToolbar">
    <div class="AknGridToolbar-left">
        <div class="AknDropdown">
    <button class="AknActionButton AknGridToolbar-actionButton" data-toggle="dropdown">
        Action button text
        <span class="AknActionButton-caret AknCaret"></span>
    </button>
    <ul class="AknDropdown-menu">
        <li><a href="#" class="AknDropdown-menuLink">Menu link 1</a></li>
        <li><a href="#" class="AknDropdown-menuLink">Menu link 2</a></li>
        <li><a href="#" class="AknDropdown-menuLink">Menu link 3</a></li>
    </ul>
</div>
    </div>
    <div class="AknGridToolbar-center">
        <label class="AknGridToolbar-label">Page:</label>
        <div>
            <div style="font-size:0">
    <button class="AknActionButton AknActionButton--glued">Action Button 1</button>
    <button class="AknActionButton AknActionButton--glued">Action button 2</button>
    <button class="AknActionButton AknActionButton--glued">Action Button 3</button>
</div>
        </div>
        <label class="AknGridToolbar-label">of 6 | 55 records</label>
    </div>
    <div class="AknGridToolbar-right">
        <div class="AknGridToolbar-pageSize">
            <label>View per page: &nbsp;</label>
            <div class="AknDropdown">
    <button class="AknActionButton" data-toggle="dropdown">
        Action button text
        <span class="AknActionButton-caret AknCaret"></span>
    </button>
    <ul class="AknDropdown-menu">
        <li><a href="#" class="AknDropdown-menuLink">Menu link 1</a></li>
        <li><a href="#" class="AknDropdown-menuLink">Menu link 2</a></li>
        <li><a href="#" class="AknDropdown-menuLink">Menu link 3</a></li>
    </ul>
</div>
        </div>
    </div>
</div>

AknAttributeActions Show code 

<header class="AknAttributeActions">
    <div class="AknAttributeActions-editActions">
        <div class="AknButtonList AknAttributeActions-contextSelectors">
            <button class="AknActionButton">Context selectors</button>
        </div>
        <div class="AknAttributeActions-otherActions">
            <button class="AknActionButton">Other actions</button>
        </div>
    </div>
    <div class="AknAttributeActions-copyActions">
        <button class="AknActionButton">Copy actions</button>
    </div>
</header>

Modifiers

Comparison mode Show code 

<header class="AknAttributeActions AknAttributeActions--comparisonMode">
    <div class="AknAttributeActions-editActions">
        <div class="AknButtonList AknAttributeActions-contextSelectors">
            <button class="AknActionButton">Context selectors</button>
        </div>
        <div class="AknAttributeActions-otherActions">
            <button class="AknActionButton">Other actions</button>
        </div>
    </div>
    <div class="AknAttributeActions-copyActions">
        <button class="AknActionButton">Copy actions</button>
    </div>
</header>

AknBreadcrumbContainer Show code

Breadcrumb item 1
Breadcrumb item 2
Flash list 
<div class="AknBreadcrumbContainer">
    <div class="AknBreadcrumb">
    <div class="AknBreadcrumb-item">Breadcrumb item 1</div>
    <div class="AknBreadcrumb-item">Breadcrumb item 2</div>
</div>
    <div class="AknBreadcrumbContainer-flashContainer">
        <div class="flash-messages-holder AknBreadcrumbContainer-flashList">
            Flash list
        </div>
    </div>
    <div class="AknButtonList">
    <button class="AknIconButton AknButtonList-item"><i class="icon-star"></i></button>
    <button class="AknIconButton AknButtonList-item"><i class="icon-star"></i></button>
</div>
</div>

AknColumnConfigurator Show code

List container 1
List container 2
List header
Button text
List container 3 
<div class="AknColumnConfigurator">
    <div class="AknColumnConfigurator-column">
        <div class="AknColumnConfigurator-columnHeader"></div>
        <div class="AknColumnConfigurator-listContainer">
            List container 1
        </div>
    </div>
    <div class="AknColumnConfigurator-column">
        <div class="AknColumnConfigurator-columnHeader">
            <i class="AknColumnConfigurator-searchIcon icon-search"></i>
            <input class="AknTextField AknColumnConfigurator-searchInput"/>
        </div>
        <div class="AknColumnConfigurator-listContainer">
            List container 2
        </div>
    </div>
    <div class="AknColumnConfigurator-column">
        <div class="AknColumnConfigurator-columnHeader">
            List header
            <div class="AknButton">Button text</div>
        </div>
        <div class="AknColumnConfigurator-listContainer">
            List container 3
        </div>
    </div>
</div>

AknFooter Show code

Description

Prints a discreet list of information.

Footer item 1
Footer item 2
<div class="AknFooter">
    <div class="AknFooter-item">Footer item 1</div>
    <div class="AknFooter-item">Footer item 2</div>
</div>

AknHeader Show code

Akeneo 

<header class="AknHeader">
    <div class="AknHeader-menus">
        <div class="AknHeader-leftMenus">
            <h1 class="AknHeader-logo">
                <a href="/" title="Akeneo">
                    <img class="AknHeader-logoImage" src="../web/bundles/pimui/images/logo.png" alt="Akeneo">
                </a>
            </h1>
            <ul class="AknMainMenu">
    <li class="AknMainMenu-item">
        <a class="AknMainMenu-link" href="#">Main A</a>
        <ul class="AknMainMenu-submenu AknMainMenu-level1">
            <li class="AknMainMenu-item">
                <a class="AknMainMenu-link" href="#">Sub 1</a>
            </li>
            <li class="AknMainMenu-item">
                <a class="AknMainMenu-link" href="#">Sub 2</a>
            </li>
        </ul>
    </li>
    <li class="AknMainMenu-item">
        <a class="AknMainMenu-link" href="#">Main B</a>
        <ul class="AknMainMenu-submenu AknMainMenu-level1">
            <li class="AknMainMenu-item">
                <a class="AknMainMenu-link" href="#">Sub 1</a>
            </li>
            <li class="AknMainMenu-item">
                <a class="AknMainMenu-link" href="#">Sub with content</a>
                <ul class="AknMainMenu-submenu AknMainMenu-level2">
                    <li class="AknMainMenu-item">
                        <a class="AknMainMenu-link" href="#">Item 1</a>
                    </li>
                    <li class="AknMainMenu-item">
                        <a class="AknMainMenu-link" href="#">Item 2</a>
                    </li>
                    <li class="AknMainMenu-item">
                        <a class="AknMainMenu-link" href="#">Item 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
        </div>
        <ul class="AknHeader-userMenu">
            <li class="AknBell AknDropdown">
                <a href="javascript:void(0);" class="AknBell-link" data-toggle="dropdown">
                    <i class="AknBell-icon icon-bell"></i>
                    <span class="AknBell-countContainer"><span class="AknBell-count AknBell-count">5</span></span>
                </a>
                <ul class="AknNotificationList AknDropdown-menu AknDropdown-menu--right">
                    <ol></ol>
                    <p class="AknNotificationList-footer"></p>
                </ul>
            </li>
            <li class="AknDropdown">
                <a href="javascript: void(0);" class="AknHeader-userLink" data-toggle="dropdown">
                    John  Doe
                    <i class="AknCaret AknCaret--inverse"></i>
                </a>
                <ul class="AknDropdown-menu AknDropdown-menu--right">
                    <li><a href="#" class="AknDropdown-menuLink">My Account</a></li>
                    <li><a href="#" class="AknDropdown-menuLink">Logout</a></li>
                </ul>
            </li>
            <li>
                <a class="AknHeader-helpLink" href="#">
                    <i class="icon-question-sign"></i>
                </a>
            </li>
        </ul>
    </div>
</header>

AknNotification Show code

  • Mass Edit
    Mass edit Set family attribute requirements finished
     
    • <li class="AknNotification">
    <a href="#" class="AknNotification-link">
        <div class="AknNotification-header">
            <div class="AknNotification-icon AknNotification-icon--massEdit">
                <i class="AknNotification-status AknNotification-status--success icon-ok"></i>
            </div>
            <div class="AknNotification-metas">
                <time class="AknNotification-time">2016-12-14 14:36:02</time>
                <span class="AknNotification-title">Mass Edit</span>
            </div>
            <i class="AknIconButton AknIconButton--light icon-trash action"></i>
        </div>
        <div class="AknNotification-message">Mass edit <strong>Set family attribute requirements</strong> finished</div>
        <button class="AknNotification-button AknButton AknButton--micro AknButton--grey AknButton--withIcon">
            <i class="AknButton-icon icon-file-text-alt"></i>
            Report
        </button>
    </a>
</li>

    Modifiers

    Unread Show code

  • Mass Edit
    Mass edit Set family attribute requirements finished
     
    • <li class="AknNotification">
    <a href="#" class="AknNotification-link AknNotification-link--new">
        <div class="AknNotification-header">
            <div class="AknNotification-icon AknNotification-icon--massEdit">
                <i class="AknNotification-status AknNotification-status--success icon-ok"></i>
            </div>
            <div class="AknNotification-metas">
                <time class="AknNotification-time">2016-12-14 14:36:02</time>
                <span class="AknNotification-title">Mass Edit</span>
            </div>
            <i class="AknIconButton AknIconButton--light icon-trash action"></i>
        </div>
        <div class="AknNotification-message">Mass edit <strong>Set family attribute requirements</strong> finished</div>
        <button class="AknNotification-button AknButton AknButton--micro AknButton--grey AknButton--withIcon">
            <i class="AknButton-icon icon-file-text-alt"></i>
            Report
        </button>
    </a>
</li>

    Icon List Show code 

    <div class="AknNotification-icon AknNotification-icon--import"></div>
<div class="AknNotification-icon AknNotification-icon--export"></div>
<div class="AknNotification-icon AknNotification-icon--massEdit"></div>
<div class="AknNotification-icon AknNotification-icon--pimeeWorkflowProductDraftNotificationNewProposal"></div>
<div class="AknNotification-icon AknNotification-icon--pimeeWorkflowImportNotificationNewProposals"></div>
<div class="AknNotification-icon AknNotification-icon--rule"></div>
<div class="AknNotification-icon AknNotification-icon--projectCalculation"></div>

    AknNotificationList Show code 

    <ul class="AknNotificationList">
    <ol>
        <li class="AknNotification">
    <a href="#" class="AknNotification-link">
        <div class="AknNotification-header">
            <div class="AknNotification-icon AknNotification-icon--massEdit">
                <i class="AknNotification-status AknNotification-status--success icon-ok"></i>
            </div>
            <div class="AknNotification-metas">
                <time class="AknNotification-time">2016-12-14 14:36:02</time>
                <span class="AknNotification-title">Mass Edit</span>
            </div>
            <i class="AknIconButton AknIconButton--light icon-trash action"></i>
        </div>
        <div class="AknNotification-message">Mass edit <strong>Set family attribute requirements</strong> finished</div>
        <button class="AknNotification-button AknButton AknButton--micro AknButton--grey AknButton--withIcon">
            <i class="AknButton-icon icon-file-text-alt"></i>
            Report
        </button>
    </a>
</li>
        <li class="AknNotification">
    <a href="#" class="AknNotification-link">
        <div class="AknNotification-header">
            <div class="AknNotification-icon AknNotification-icon--massEdit">
                <i class="AknNotification-status AknNotification-status--success icon-ok"></i>
            </div>
            <div class="AknNotification-metas">
                <time class="AknNotification-time">2016-12-14 14:36:02</time>
                <span class="AknNotification-title">Mass Edit</span>
            </div>
            <i class="AknIconButton AknIconButton--light icon-trash action"></i>
        </div>
        <div class="AknNotification-message">Mass edit <strong>Set family attribute requirements</strong> finished</div>
        <button class="AknNotification-button AknButton AknButton--micro AknButton--grey AknButton--withIcon">
            <i class="AknButton-icon icon-file-text-alt"></i>
            Report
        </button>
    </a>
</li>
    </ol>
    <li class="AknNotificationList-footer">
        <div class="AknButton AknButton--grey">Button text</div>
    </li>
</ul>

    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
    <div class="AknProjectWidget">
    <div class="AknProjectWidget-topBar">
        <div class="AknButtonList">
            <div class="AknButtonList-item">
                <div class="select2-container project-selector-select2">
                    <a href="javascript:void(0)" class="select2-choice">
                        <span class="select2-chosen">
                            <div class="AknProjectWidget-mainSelectorCurrent">
                                <span class="AknProjectWidget-mainSelectorCurrentTitle">
                                    ProjectWidget main selector
                                </span>
                                additional information
                            </div>
                        </span>
                        <abbr class="select2-search-choice-close"></abbr>
                        <span class="select2-arrow"><b></b></span>
                    </a>
                </div>
            </div>
            <div>
                <div class="select2-container contributor-selector-select2">
                    <a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1">
                        <span class="select2-chosen">
                            <div class="AknProjectWidget-secondarySelectorCurrent">
                                <span class="AknProjectWidget-secondarySelectorCurrentTitle">
                                    ProjectWidget secondary selector
                                </span>
                            </div>
                        </span>
                        <abbr class="select2-search-choice-close"></abbr>
                        <span class="select2-arrow"><b></b></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="AknProjectWidget-info">
            ProjectWidget info
        </div>
    </div>


    <div class="AknProjectWidget-boxes">
         <div class="AknProjectWidget-boxContainer">
            <span class="AknProjectWidget-boxLabel">ProjectWidget box label</span>
            <div class="AknProjectWidget-box AknProjectWidget-box--important">
                <div class="AknProjectWidget-boxData">10</div>
                ProjectWidget Important box
            </div>
        </div>
        <div class="AknProjectWidget-boxContainer">
            <span class="AknProjectWidget-boxLabel">ProjectWidget box label</span>
            <div class="AknProjectWidget-box AknProjectWidget-box--warning">
                <div class="AknProjectWidget-boxData">20</div>
                ProjectWidget Warning box
            </div>
        </div>
        <div class="AknProjectWidget-boxContainer">
            <span class="AknProjectWidget-boxLabel">ProjectWidget box label</span>
            <div class="AknProjectWidget-box AknProjectWidget-box--success">
                <div class="AknProjectWidget-boxData">30</div>
                ProjectWidget Success box
            </div>
        </div>
    </div>
    <div class="AknProjectWidget-resume">
        <div class="AknProjectWidget-resumeTitle">ProjectWidget resume title</div>
        <div class="AknProjectWidget-resumeContent">ProjectWidget resume content</div>
    </div>
</div>

    AknSequentialEdit Show code

    Previous
    Next 
    <div class="AknSequentialEdit">
    <span class="AknSequentialEdit-previous">
        <a href="#"><i class="icon-chevron-left"></i> Previous</a>
    </span>
    <div class="AknProgress AknSequentialEdit-progress">
    <div class="AknProgress-bar" style="width: 10%"></div>
</div>
    <span class="AknSequentialEdit-next">
        <a href="#">Next <i class="icon-chevron-right"></i></a>
    </span>
</div>

    AknTitleContainer Show code

    Button text
    Button text

    Acer S 240HL Abid

    Button text
    Button text
    Meta item 1 Meta item 2
    Badge text 
    <header class="AknTitleContainer">
    <div class="AknTitleContainer-backContainer">
        <a class="AknTitleContainer-backLink" href="#"><i class="icon-chevron-left"></i></a>
    </div>
    <div class="AknTitleContainer-contentContainer">
        <div class="AknTitleContainer-mainLine">
            <div class="AknTitleContainer-titleContainer">
                <div class="AknButtonList AknTitleContainer-titleButtons">
    <div class="AknButton AknButtonList-item">Button text</div>
    <div class="AknButton AknButtonList-item">Button text</div>
</div>
                <h1 class="AknTitleContainer-title">Acer S 240HL Abid</h1>
            </div>
            <div class="AknTitleContainer-rightButtons">
                <div class="AknButtonList AknTitleContainer-titleButtons">
    <div class="AknButton AknButtonList-item">Button text</div>
    <div class="AknButton AknButtonList-item">Button text</div>
</div>
            </div>
        </div>
        <div class="AknTitleContainer-metaLine">
            <div class="AknTitleContainer-meta">
                <span class="AknTitleContainer-metaItem">Meta item 1</span>
                <span class="AknTitleContainer-metaItem">Meta item 2</span>
            </div>
            <div class="AknTitleContainer-state">
                <div class="AknBadge AknBadge--warning">
    <i class="AknBadge-icon icon-remove"></i>
    Badge text
</div>
            </div>
        </div>
    </div>
</header>

    AknWidget Show code

    Widget header
    Widget sub title
    Widget content
    Widget footer 
    <div class="AknWidget">
    <div class="AknWidget-header">
        Widget header
    </div>
    <div class="AknWidget-subTitle">
        Widget sub title
    </div>
    <div class="AknWidget-content">
        Widget content
    </div>
    <div class="AknWidget-content">
        Widget footer
    </div>
</div>

    Modifiers

    withPadding Show code

    Widget header
    Widget sub title
    Widget content
    Widget footer 
    <div class="AknWidget">
    <div class="AknWidget-header">
        Widget header
    </div>
    <div class="AknWidget-subTitle">
        Widget sub title
    </div>
    <div class="AknWidget-content AknWidget-content--withPadding">
        Widget content
    </div>
    <div class="AknWidget-content">
        Widget footer
    </div>
</div>

    AknInfoBlock Show code

    Description

    Prints a centered text for additional information.

    Info block
    <div class="AknInfoBlock">Info block</div>

    AknPanelContainer Show code

    Description

    Prints a panel for lateral information. The PanelContainer has a height of 100% of the page.

    Panel title

    Content
    Footer 
    <div style="height: 115px;">
    <div class="AknPanelContainer">
        <header class="AknPanelContainer-header">
            <button class="AknIconButton AknIconButton--grey"><i class="icon-remove"></i></button>
            <h1 class="AknPanelContainer-title">Panel title</h1>
        </header>
        Content
        <div class="AknPanelContainer-footer">
            Footer
        </div>
    </div>
</div>

    AknCommentPanel Show code

    1. admin John Doe 2016-12-20T11:43:44+01:00
      Comment
    2. admin John Doe 2016-12-20T11:43:54+01:00
      Comment reply 
    <div class="AknCommentPanel">
    <ol class="AknCommentPanel-thread">
        <li class="AknCommentPanel-item">
            <div class="AknCommentPanel-header">
                <img class="AknCommentPanel-avatar" src="../web/bundles/pimui/images/info-user.png" alt="admin">
                <span class="AknCommentPanel-author"><strong>John Doe</strong></span>
                <span class="AknCommentPanel-date">2016-12-20T11:43:44+01:00</span>
                <span class="AknCommentPanel-icon AknIconButton AknIconButton--small AknIconButton--grey">
                    <i class="icon-trash"></i>
                </span>
            </div>
            <span class="AknCommentPanel-message message">Comment</span>
        </li>
        <li class="AknCommentPanel-item">
            <div class="AknCommentPanel-header">
                <img class="AknCommentPanel-avatar" src="../web/bundles/pimui/images/info-user.png" alt="admin">
                <span class="AknCommentPanel-author"><strong>John Doe</strong></span>
                <span class="AknCommentPanel-date">2016-12-20T11:43:54+01:00</span>
                <span class="AknCommentPanel-icon AknIconButton AknIconButton--small AknIconButton--grey">
                    <i class="icon-trash"></i>
                </span>
            </div>
            <span class="AknCommentPanel-message">Comment reply</span>
        </li>
    </ol>
</div>

    AknCompletenessBlock Show code

    Locale
    10/20
    Channel Title 1
    60%
    Missing values
    Channel Title 2
    80%
    Missing values 
    <div class="AknCompletenessBlock">
    <header class="AknCompletenessBlock-header">
        <span class="AknCompletenessBlock-headerLocale">
            Locale
        </span>
        <span class="AknCompletenessBlock-headerStats">
            <div class="AknProgress AknProgress--warning">
                <div class="AknProgress-bar" style="width: 50%;"></div>
            </div>
            <span class="AknCompletenessBlock-progressRatio">10/20</span>
        </span>
        <span class="AknCompletenessBlock-headerButton">
            <i class="AknCompletenessBlock-arrow icon-angle-down"></i>
        </span>
    </header>
    <div class="AknCompletenessBlock-content content">
        <div class="AknCompletenessBlock-channel">
            <span class="AknCompletenessBlock-channelTitle">Channel Title 1</span>
            <div class="AknCompletenessBlock-progressContainer">
                <div class="AknCompletenessBlock-progress AknProgress AknProgress--small AknProgress--warning">
                    <div class="AknProgress-bar" style="width: 60%;"></div>
                </div>
                <span class="AknCompletenessBlock-progressRatio">60%</span>
            </div>
            <div class="AknCompletenessBlock-missing">
                Missing values
            </div>
        </div>
        <div class="AknCompletenessBlock-channel">
            <span class="AknCompletenessBlock-channelTitle">Channel Title 2</span>
            <div class="AknCompletenessBlock-progressContainer">
                <div class="AknCompletenessBlock-progress AknProgress AknProgress--small AknProgress--warning">
                    <div class="AknProgress-bar" style="width: 80%;"></div>
                </div>
                <span class="AknCompletenessBlock-progressRatio">80%</span>
            </div>
            <div class="AknCompletenessBlock-missing">
                Missing values
            </div>
        </div>
    </div>
</div>

    AknTabContainer Show code

    Middle panel

    Panel title

    Content
    Footer 
    <div class="AknTabContainer">
    <div class="AknHorizontalNavtab">
    <ul class="AknHorizontalNavtab-list">
        <li class="AknHorizontalNavtab-item">
            <a class="AknHorizontalNavtab-link" href="#">General properties</a>
        </li>
        <li class="AknHorizontalNavtab-item AknHorizontalNavtab-item--active">
            <a class="AknHorizontalNavtab-link" href="#">Content</a>
        </li>
        <li class="AknHorizontalNavtab-item">
            <a class="AknHorizontalNavtab-link" href="#">History</a>
        </li>
    </ul>
</div>
    <div class="AknTabContainer-contentThreeColumns">
        <div class="AknTabContainer-notPanels tab-container tab-content">
            <div class="tabs-left">
                <ul class="AknVerticalNavtab">
    <li class="AknVerticalNavtab-item AknVerticalNavtab-header"></li>
    <li class="AknVerticalNavtab-item AknVerticalNavtab-item--active">
        <a class="AknVerticalNavtab-link" href="#">Active link</a>
    </li>
    <li class="AknVerticalNavtab-item">
        <a class="AknVerticalNavtab-link" href="#">Link</a>
    </li>
</ul>
                <div class="AknTabContainer-content tab-content">
                    Middle panel
                </div>
            </div>
        </div>
        <div class="AknTabContainer-panels ">
            <div style="height: 115px;">
    <div class="AknPanelContainer">
        <header class="AknPanelContainer-header">
            <button class="AknIconButton AknIconButton--grey"><i class="icon-remove"></i></button>
            <h1 class="AknPanelContainer-title">Panel title</h1>
        </header>
        Content
        <div class="AknPanelContainer-footer">
            Footer
        </div>
    </div>
</div>
        </div>
    </div>
</div>

    Modifiers

    Right panel closed Show code

    Middle panel

    Panel title

    Content
    Footer 
    <div class="AknTabContainer">
    <div class="AknHorizontalNavtab">
    <ul class="AknHorizontalNavtab-list">
        <li class="AknHorizontalNavtab-item">
            <a class="AknHorizontalNavtab-link" href="#">General properties</a>
        </li>
        <li class="AknHorizontalNavtab-item AknHorizontalNavtab-item--active">
            <a class="AknHorizontalNavtab-link" href="#">Content</a>
        </li>
        <li class="AknHorizontalNavtab-item">
            <a class="AknHorizontalNavtab-link" href="#">History</a>
        </li>
    </ul>
</div>
    <div class="AknTabContainer-contentThreeColumns">
        <div class="AknTabContainer-notPanels tab-container tab-content">
            <div class="tabs-left">
                <ul class="AknVerticalNavtab">
    <li class="AknVerticalNavtab-item AknVerticalNavtab-header"></li>
    <li class="AknVerticalNavtab-item AknVerticalNavtab-item--active">
        <a class="AknVerticalNavtab-link" href="#">Active link</a>
    </li>
    <li class="AknVerticalNavtab-item">
        <a class="AknVerticalNavtab-link" href="#">Link</a>
    </li>
</ul>
                <div class="AknTabContainer-content tab-content">
                    Middle panel
                </div>
            </div>
        </div>
        <div class="AknTabContainer-panels  AknTabContainer-panels--closed">
            <div style="height: 115px;">
    <div class="AknPanelContainer">
        <header class="AknPanelContainer-header">
            <button class="AknIconButton AknIconButton--grey"><i class="icon-remove"></i></button>
            <h1 class="AknPanelContainer-title">Panel title</h1>
        </header>
        Content
        <div class="AknPanelContainer-footer">
            Footer
        </div>
    </div>
</div>
        </div>
    </div>
</div>

    AknBadge Show code

    Badge text
    <div class="AknBadge">Badge text</div>

    Modifiers

    With icon Show code

    Badge text 
    <div class="AknBadge">
    <i class="AknBadge-icon icon-remove"></i>
    Badge text
</div>

    Success Show code

    Badge text
    <div class="AknBadge AknBadge--success">Badge text</div>

    Important Show code

    Badge text
    <div class="AknBadge AknBadge--important">Badge text</div>

    Warning Show code

    Badge text
    <div class="AknBadge AknBadge--warning">Badge text</div>

    Grey Show code

    Badge text
    <div class="AknBadge AknBadge--grey">Badge text</div>

    Highlight Show code

    Badge text
    <div class="AknBadge AknBadge--highlight">Badge text</div>

    Light Show code

    Badge text
    <div class="AknBadge AknBadge--light">Badge text</div>

    AknBell Show code

    7 
    <div class="AknBell">
    <a class="AknBell-link" href="#">
        <i class="AknBell-icon icon-bell"></i>
        <span class="AknBell-countContainer">
            <span class="AknBell-count">7</span>
        </span>
    </a>
</div>

    AknCaret Show code 

    <div class="AknCaret"></div>

    Modifiers

    Big Show code 

    <div class="AknCaret AknCaret--big"></div>

    Important Show code 

    <div class="AknCaret AknCaret--important"></div>

    Apply Show code 

    <div class="AknCaret AknCaret--apply"></div>

    Inverse Show code 

    <div class="AknCaret AknCaret--inverse"></div>

    AknFlash Show code

    Flash message 
    <div class="AknFlash">
    <button class="AknFlash-closeButton">&times;</button>
    Flash message
</div>

    Modifiers

    Success Show code

    Flash message 
    <div class="AknFlash AknFlash--success">
    <button class="AknFlash-closeButton">&times;</button>
    Flash message
</div>

    Danger Show code

    Flash message 
    <div class="AknFlash AknFlash--danger">
    <button class="AknFlash-closeButton">&times;</button>
    Flash message
</div>

    AknLoadingMask Show code

    Description

    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.

    <div class="AknLoadingMask" style="height: 100px;">
    <div class="AknLoadingMask-wrapper" style="position: inherit">
    </div>
    <div id="loading-frame" class="AknLoadingMask-frame loading-frame" style="top: -80px; position: relative">
        <div class="AknLoadingMask-box">
            <div class="AknLoadingMask-content"></div>
        </div>
    </div>
</div>

    AknMessageBox Show code

    Title
    • List item 1
    • List item 2
    <div class="AknMessageBox">
    <div class="AknMessageBox-title">Title</div>
    <ul class="AknMessageBox-list">
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div>

    Modifiers

    Apply Show code

    Title
    • List item 1
    • List item 2
    <div class="AknMessageBox AknMessageBox--apply">
    <div class="AknMessageBox-title">Title</div>
    <ul class="AknMessageBox-list">
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div>

    Warning Show code

    Title
    • List item 1
    • List item 2
    <div class="AknMessageBox AknMessageBox--warning">
    <div class="AknMessageBox-title">Title</div>
    <ul class="AknMessageBox-list">
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div>

    Danger Show code

    Title
    • List item 1
    • List item 2
    <div class="AknMessageBox AknMessageBox--danger">
    <div class="AknMessageBox-title">Title</div>
    <ul class="AknMessageBox-list">
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div>

    Centered Show code

    Title
    • List item 1
    • List item 2
    <div class="AknMessageBox AknMessageBox--centered">
    <div class="AknMessageBox-title">Title</div>
    <ul class="AknMessageBox-list">
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div>

    AknProgress Show code 

    <div class="AknProgress">
    <div class="AknProgress-bar" style="width: 10%"></div>
</div>

    Modifiers

    Apply Show code 

    <div class="AknProgress AknProgress--apply">
    <div class="AknProgress-bar" style="width: 10%"></div>
</div>

    Warning Show code 

    <div class="AknProgress AknProgress--warning">
    <div class="AknProgress-bar" style="width: 10%"></div>
</div>

    Small Show code 

    <div class="AknProgress AknProgress--small">
    <div class="AknProgress-bar" style="width: 10%"></div>
</div>

    Micro Show code 

    <div class="AknProgress AknProgress--micro">
    <div class="AknProgress-bar" style="width: 10%"></div>
</div>

    Main Show code 

    <div class="AknProgress AknProgress--main">
    <div class="AknProgress-bar" style="width: 10%"></div>
</div>

    AknVerticalList Show code 

    <ul class="AknVerticalList">
    <li class="AknVerticalList-item">
        <a href="#" class="AknVerticalList-itemLink">Item 1</a>
    </li>
    <li class="AknVerticalList-item">
        <a href="#" class="AknVerticalList-itemLink">Item 2</a>
    </li>
    <li class="AknVerticalList-item">
        <a href="#" class="AknVerticalList-itemLink">Item 3</a>
    </li>
</ul>

    Modifiers

    Without border Show code 

    <ul class="AknVerticalList AknVerticalList--withoutBorder">
    <li class="AknVerticalList-item">
        <a href="#" class="AknVerticalList-itemLink">Item 1</a>
    </li>
    <li class="AknVerticalList-item">
        <a href="#" class="AknVerticalList-itemLink">Item 2</a>
    </li>
    <li class="AknVerticalList-item">
        <a href="#" class="AknVerticalList-itemLink">Item 3</a>
    </li>
</ul>

    Selectable items Show code 

    <ul class="AknVerticalList">
    <li class="AknVerticalList-item selectableItems">
        <a href="#" class="AknVerticalList-itemLink">Item 1</a>
    </li>
    <li class="AknVerticalList-item selectableItems">
        <a href="#" class="AknVerticalList-itemLink">Item 2</a>
    </li>
    <li class="AknVerticalList-item selectableItems">
        <a href="#" class="AknVerticalList-itemLink">Item 3</a>
    </li>
</ul>

    Movable items Show code

    • Item 1
    • Item 2
    • Item 3
    <ul class="AknVerticalList">
    <li class="AknVerticalList-item AknVerticalList-item--movable">
        <div><i class="icon-th"></i>Item 1</div>
    </li>
    <li class="AknVerticalList-item AknVerticalList-item--movable">
        <div><i class="icon-th"></i>Item 2</div>
    </li>
    <li class="AknVerticalList-item AknVerticalList-item--movable">
        <div><i class="icon-th"></i>Item 3</div>
    </li>
</ul>

    AknAcl Show code

    ACL 
    <dif class="AknAcl">
    <i class="AknAcl-icon icon-circle"></i>
    ACL
</dif>

    Modifiers

    Granted Show code

    ACL 
    <dif class="AknAcl">
    <i class="AknAcl-icon AknAcl-icon--granted icon-ok"></i>
    ACL
</dif>

    Non granted Show code

    ACL 
    <dif class="AknAcl">
    <i class="AknAcl-icon AknAcl-icon--nonGranted icon-remove"></i>
    ACL
</dif>

    Centered Show code

    ACL 
    <dif class="AknAcl AknAcl--centered">
    <i class="AknAcl-icon icon-circle"></i>
    ACL
</dif>

    AknDiff Show code

    Description

    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. 
    Lorem ipsum <span class="AknDiff">inline text</span> ipsum lorem.

    Modifiers

    Remove Show code

    Lorem ipsum inline text ipsum lorem. 
    Lorem ipsum <span class="AknDiff AknDiff--remove">inline text</span> ipsum lorem.

    Add Show code

    Lorem ipsum inline text ipsum lorem. 
    Lorem ipsum <span class="AknDiff AknDiff--add">inline text</span> ipsum lorem.

    AknList Show code

    • Item 1
    • Item 2
    • Item 3
    <ul class="AknList">
    <li class="AknList-item">Item 1</li>
    <li class="AknList-item">Item 2</li>
    <li class="AknList-item">Item 3</li>
</ul>

    Modifiers

    With discs Show code

    • Item 1
    • Item 2
    • Item 3
    <ul class="AknList AknList--withDisc">
    <li class="AknList-item">Item 1</li>
    <li class="AknList-item">Item 2</li>
    <li class="AknList-item">Item 3</li>
</ul>