ACE Labs feature: this element is under development and the API is not bound by SemVer. Watch the changelog!

Labs: feedback phase

ACE is expanding to support more general web paradigms, beyond the data room's UI.

Module is a missing piece in the typical web content heirarchy: Application/Site → View/Page → Layout Group → Layout Item → Module → Block. Module itself uses the time-tested header-content-footer structure.

This is a flexible workhorse component intended to work with a wide range of other components. For example:

  • a Content Header within the Module Header
  • a metabar in the header or footer
  • a simple split layout inside a module section to create localised layout

As there are a lot of potential combinations, it's likely some components will not fit neatly yet.

Module was added in preference to extending Panel, as Panel is better suited to unstructured or less-heirarchical content. For example panels often show a heading as the second element rather than the first; while Modules will always have the heading at the top. There may be some crossover where either will work; but in general if no structure is required, simply use a Panel.

The roadmap includes:

  • adding a range of media blocks for use within module content areas
  • adding a menu component that will work within modules
  • defining a good pattern for expandable modules (currently works together with the Toggle Element helper, but needs some finesse)

Design

Modules are used to group and display content. A module is the smallest piece of content that makes sense stand-alone and wouldn't be broken down any further.

Modules must never be nested as this indicates significant information heirarchy problems.

Module variants

Primary Module

Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat. Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat.

Footer.

Secondary Module

Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat. Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat.

Footer.

Default Module

Provides structure but generally not useful without a style variant.

Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat. Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat.

Footer.

Common content combinations

Heading

Metaline adding extra information.

Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat. Sentio aliquos togatos contra me conspirare. Non calor sed umor est qui nobis incommodat.

Look ma, no footer!

Controls

ACE Header's controls can be used in the module header.

When a module's footer only contains a button group, the buttons are right-aligned by default. This matches other patterns such as Dropdown.

Metabar

Metabars look great in module footers.

You could imagine they were made for each other!

  • High priority
  • Assigned 20 hours ago to Kim Smith.

Code

Modules are dropped into Grid/Layout systems and fill the available space.

HTML

Example Description Code

Header

Content.

Footer

 The basic structure of a Module is Header+Content+Footer. All can be omitted, although if only content is used it may make more sense to use a Panel. 

                                                                                          <div class="ace-module ace-module-primary">
                                                                                                    <div class="ace-module-section ace-module-header">
                                                                                                      <h2 class="ace-h2">Header</h2>
                                                                                                    </div>
                                                                                                    <div class="ace-module-section ace-module-content">
                                                                                                      <p class="ace-p">Content.</p>
                                                                                                    </div>
                                                                                                    <div class="ace-module-section ace-module-footer">
                                                                                                      <p class="ace-p">Footer</p>
                                                                                                    </div>
                                                                                          </div>

Track ACECLASSIC-43 for ASP support.
n/a Variants are applied to the module according to the usual Primary/Secondary naming scheme. This should reflect their place in the information heirarchy. 

                                                                                          <div class="ace-module">
                                                                                          </div>
                                                                                          <div class="ace-module ace-module-primary">
                                                                                          </div>
                                                                                          <div class="ace-module ace-module-secondary">
                                                                                          </div>

Track ACECLASSIC-43 for ASP support.

On the edge

Module sections can be set to full-bleed if required. The content itself is responsible for setting borders and spacing.

Footer.

 Spacing and borders can be removed from a module section by applying the spacing-off class. While this works on all module sections, it is primarily intended for use on module content sections. 

                                                                                              <div class="ace-module-section ace-module-content ace-module-section-nospacing">
                                                                                              </div>

Track ACECLASSIC-43 for ASP support.

Right-aligned footer buttons

When a module's footer only contains a button group, the buttons are right-aligned by default. This matches other patterns such as Dropdown.

 Note the Button Group must be the only child of module footer; and in most cases you wan the separate variant. 

                                                                                          <div class="ace-module ace-module-primary">
                                                                                                    <div class="ace-module-section ace-module-header">
                                                                                                      <h2 class="ace-h2">Right-aligned footer buttons</h2>
                                                                                                    </div>
                                                                                                    <div class="ace-module-section ace-module-content">
                                                                                                      <p class="ace-p">When a module's footer only contains a button group, the buttons are right-aligned by default. This matches other patterns such as Dropdown.</p>
                                                                                                    </div>
                                                                                                    <div class="ace-module-section ace-module-footer">
                                                                                                          <div class="ace-button-group ace-button-group-separate">
                                                                                                                <button class="ace-button" type="button"><span>This</span></button>
                                                                                                                <button class="ace-button" type="button"><span>That</span></button>
                                                                                                          </div>
                                                                                                    </div>
                                                                                          </div>

Track ACECLASSIC-43 for ASP support.