Commonly Used Modules in AFPIMS

Below you will find a sampling of the most commonly-used modules in AFPIMS available to our Content Managers. Use the Jump-Menu to help navigate through the page, reviewing what is available for use on your pages.

Please Note: DLA Content Managers may not have adequate permissions to add each of these modules onto their site. If you would like to use one of the modules below and you do not see it listed in your available modules window, please reach out to DLA Public Affairs or an AFPIMS Site Administrator for assistance.

HTML and Live HTML Module

Training: HTML and Live HTML Module

The HTML and Live HTML modules are some of the most popular module types due to their versatility. They provide two text editors for creating your own content either as HTML or as plain text. The module interfaces are very similar to most popular document editors. With these modules, you can add text, images, and links in multiple formats to fit your needs.

Which module to choose? If you are using a workflow that requires approval before content goes live, use the Live HTML module. Otherwise, every other circumstance requires the use of the HTML module. Generally at DLA, use the standard HTML module as there is no requirement for content to be formally approved via a workflow prior to going live.

This text that you are reading right now is contained within a standard HTML module.

Module Containers

Navigate to the module's Settings > Page Settings > Module Container and choose your selection from the dropdown.

You can find examples of all available containers on the Panes and Containers Training Document  (PDF - scroll to page 11). 

Partial Border Frame Corners

These directions will enable a user to activate this call out container on an HTML module.

1. Click on the gear icon and select Settings.
2. In the Advanced Settings section under the Module Settings tab, enter the following code in the Header section. <div class="pseudo-partial-border">
3. Enter the following code in the Footer section. </div> 

Headings

Headings are used to introduce the main contents of a page and organize different content areas within a page into clear sections. Headings aren't just decorative; they're functional and structural elements of the page that help with accessibility and search engine optimization.

There's only ever one H1 heading per page, serving as the title for that page. Each page requires an H1 Heading at the very top of the page.

After H1, subheadings may start at the H2 heading level. Headings have hierarchy. You can't use an H3 heading without it first sitting under an H2 heading, and you can't jump from an H2 heading to an H4 heading without first using an H3 heading. To stay consistent sitewide, keep the headings' sizes at the default size, with no bolding, underlining, or italics. With the desired text selected, choose your heading level from the Format dropdown.

Examples with default formatting. Please view at full size to see the correct scale, as this is an image of text to prevent inappropriate page formatting:

There are also module containers that will provide similar functional headings. The Labeled and Midline containers (respectively, below) can provide functional H2 headings when the H2 version of the container is used. They can be used to visually gather or offset information immediately below them. Be sparing with these containers. Most standard page content can make due with regular headings, but these can be used with layout-intensive pages.

Tables

Tables are HTML code that can be used in HTML Modules and other modules with rich content editors or WYSIWYG editors, such as the Tabbed Module. On the DLA website, we add striping to our tables; this every other row zebra striped table look and feel is implemented by including the classes "table table-striped" on the table element.

Striped Table Example

You may copy and paste the code for 508-compliant tables from the expandable modules below. Instructions:

• Replace the table caption text with a short description of what the table contains. Table captions should not wrap section headings (H1-H6). Instead, you may style the table caption with inline font-size and weight changes. Using a section heading (H2-H6) to describe the section that contains a table is appropriate and valid HTML with the heading is placed before/above the table and the table caption.
• Replace the column labels as needed.
• If your first column identifies the row, use <th scope="row"> as shown in the "with Row Headers" example; otherwise use <td>.

Accordion Menu Module

ArticleCS Dashboard Module

Training: ArticleCS Dashboard Module

The ArticleCS Dashboard module displays dashboard items such as specific lists of articles based on category designations, archived article lists displayed by date, or other similar options. All ArticleCS Dashboards work in conjunction with an ArticleCS module that is generally located on your main article landing page.

Two examples are displayed below, both of which are tied to the NEWS ArticleCS library. One uses the DOD2-Card template and the second uses the DOD2-Explore template.

Types of ArticleCS libraries that we have on DLA.mil, of which you can place Dashboards on your pages, include:

• News
• Applications
• Biographies
• Brochures
• Training

Events Module

Training: Calendar/Events Module

The Events module provides a way to display a calendar of events. Events can be a single event or a reoccurring event. This module can include information, links, and images to inform viewers of upcoming events. Also, it can be set to be seen and used by internal AFPIMS users or made public to be seen by your viewers by setting permissions.

The example below is from the Small Business Office. DO NOT MAKE CHANGES to the module shown below, as it will impact the live version on the Small Business page.

The view of the Events module can be a List or Calendar (Month or Week)

Expandable Text Module (FAQs)

Training: Expandable Text/HTML Module

The Expandable Text/HTML Module is an interactive space saving module designed to eliminate large walls of text with the use of expandable/collapsible content containers. This helps to clean up the look of a page that has links to content. The module works by connecting large blocks of text to shorter, sortable titles and providing an interface for the expansion or collapse of the larger text by toggling a [+/-] button.

Please note that styling for this module on DLA.mil is standardized via sitewide CSS. The default styling should not be overridden and standard font styling and headings should used for the header, title, and body content. Often each expandable/collapsible block should include an H2 (Heading 2) or H3 (Heading 3).

Hot Info Bar Module

Training: Hot Info Bar Module

The Hot Info Bar provides a display for information that may only be relevant at certain times. Think of it as an emergency information area for special circumstances. It can be turned on and off easily, and provides a way to link to pertinent information that affects your site. Note that it is best used on a site’s home page where it will have the most impact to visitors.

Hyperlinks with Font-Awesome Icons

Below are the Font-Awesome icons used throughout the DLA website, and what code is required to add them to a page. Add the code directly in-line with the HTML source code. For 508 / WCAG 2.1 compliance, icons that describe or clarify a link's action or destination must be part of the link itself, not placed outside of it.

Envelope

Place before link text, but within the hyperlink wrapper. The envelope icon is used with email addresses. If the space after the envelope icon makes your email address break to the next line, you can opt to remove the space.

<i class="fa fa-envelope" aria-hidden="true"></i>

Example:

<a href="mailto:example@example.mil"><i class="fa fa-envelope" aria-hidden="true"></i> example@example.mil</a>

example@example.mil

Phone

Place before link text, but within the hyperlink wrapper. This icon should be used for full phone numbers, not DSN numbers.

<i class="fa fa-phone" aria-hidden="true"></i>

Example:

<a href="tel:333333333"><i class="fa fa-phone" aria-hidden="true"></i>333333333</a>

333333333

External Link

Place after link text, but within the hyperlink wrapper. This icon is used for links that land on URLs outside of dla.mil; not internal links. External links should always open in new tabs.

<i class="fa fa-external-link" aria-hidden="true"></i>

Example:

<a href="https://example.com" target="_blank">Visit Website<i class="fa fa-external-link" aria-hidden="true"></i></a>

Visit Website

ID Badge

Place after link text, but within the hyperlink wrapper. This icon indicates that user access requires a CAC card. It is typically placed after an external link icon (no space between the two icons).

<i class="fa fa-id-badge" aria-hidden="true"></i>

Example:

<a href="/profile">View Directory<i class="fa fa-id-badge" aria-hidden="true"></i></a>

View Directory

Download

Place after link text, but within the hyperlink wrapper. This icon indicates downloading directly a file. If the file is a PDF this icon is not used. Instead use (PDF) and open the PDF in a new tab.

<i class="fa fa-download" aria-hidden="true"></i>

Example:

<a href="file.xls" download>Download Spreadsheet (XLS)<i class="fa fa-download" aria-hidden="true"></i></a>

Download Spreadsheet (XLS)

Image Gallery Module

Training: Image Gallery Module

The Image Gallery displays approved media from the Shared Media Manager and is the tool visitors use to navigate through your site’s media. Image Galleries can be filtered by Category and Tag.

Links Module

Training: Links Module

The Links module allows you to create a list of internal or external links, and even links to documents that you’ve uploaded. Links can be displayed in a list or in a dropdown menu, seen in the two examples below.

When using the Links module, remember:

• For each link you add, make sure to check the box next to the All Users Role so the public can see the link
• If you want to add the DLA emblem seen in the example below, go into the Module Settings, Links Settings tab, in the Display Icon section select Root folder and then File Name of dla-favicon.ico

Mosaic Links Module

Training: Mosaic Links Module

The Mosaic Links module allows you to create a group of large, tiled graphics that link to internal or external resources or pages on your site. Note: Users should first upload the images to the Shared Media Manager in a 16:9 aspect ratio, because the module pulls the images directly from the Shared Media Manager. Note: This module only works with responsive skins.

Mosaic modules can be created with 3, 5, or 7 mosaic tiles. 

Standard DLA Mosaic:

• Color Cast should be set to the darkest blue option
• Color Intensity should be set to 80 on all devices
• There are many pre-generated images designed by DLA personnel for use in these modules - reach out to DLA Public Affairs for more information on where to find these images

Custom Mosaic Examples:

Surprisingly, these examples use the Slideshow module with the DGOV2 template Feature Grid setting. Explore the live page to see how it was implemented. There are custom slide show settings and  custom CSS is in the H1 module's header module.

View this custom mosaic graphic on the DLA Strategic Plan page

View this mosaic on the live DLA site (2025 Annual Report)

Photo Dashboard Module

Training: Photo Dashboard Module

The Photo Dashboard module can be used in many ways to allow you the freedom of presenting images in unique and eye catching ways. Depending on your branch of service and the theme of your site, you are able to present images with text, links, floating lightboxes, and more. Other options allow you to create an automatically updating list of photos on your site or one big and bold image to grab the audience’s attention.

There are two main ways we use Photo Dashboard Modules on DLA.mil, one is a full page width banner image at the top of the page, and the other is a smaller columned banner image on top of an HTML module to draw the user's attention to the content. See the examples below.

For more information about styling and usage of the Photo Dashboard Module, go to the Webmasters SharePoint site and review the Website Redesign Guide.

When using the Photo Dashboard module as a major banner on top of a page:

• Form Type: DefenseGov
• Template: Background Image
• Ensure the image dimensions are: 1140x150
• Use the Container: DOD2-Empty-No-Padding
• Use 150px as the Image Height

When using the Photo Dashboard module as a small banner on top of columns

• Form Type: DefenseGov
• Template: Background Image
• Ensure the image dimensions are: 1200x500
• Use the Container: DOD2-Empty-With-Margin
• Use 122px as the Image Height

Simple Maps Module

Training: Simple Maps Module

The Simple Maps module allows you to embed a Google Map into the module for display on your site. You need to use Google Maps, https://www.google.com/maps, to retrieve the Embed link. Keep in mind the following process is done on a third party site, and is subject to change without notice. Once that is done, you can import the map to AFPIMS.

Slide Show Module

Training: Slide Show Module

The Slideshow module is a versatile module that allows you to display images from your Shared Media Manager in ways that are eye catching and attractive to your audience. You have several display options with the Slideshow module, including the typical slideshow that is the focal point of most AFPIMS home pages, as well as a Carousel and Top Rotator.  Whichever display options you choose, images are added in the same way. 

The example below is from the Aviation Homepage. DO NOT MAKE CHANGES to the module shown below, as it will impact the live version on the Aviation page.

TanLD Responsive HTML Tabs, aka Tabbed HTML Module

Training: Tabbed HTML Module

The HTML Tabs module is a fully customizable, responsive tabs module. It allows you to take any HTML content, including images, video, or a module, and display it in a clean, organized, and responsive tabbed navigation format.

When using the Tabbed HTML Module on DLA.mil, use the following settings:

• Container: DOD2 - Empty-With-Margin
• Theme: flat-af-blue

The following suggestions are also provided:

• Repeat each tab's Title as a heading in the content of each tab. Choose from the Format dropdown Heading 2 or Heading 3, as appropriate.
• Size is flexible, but always test the size to ensure tab titles are readable on all devices
• Style is flexible, but we suggest using either Contained or Clean - “Contained” throws a blue-gray background behind the content and adds a margin around it - “Clean” provides no background color behind the content and allows the text to span the whole width of the module
• Orientation is flexible, decision to be vertical or horizontal should be made on a case-by-case basis
• Position is suggested to be Top, but we allow for flexibility here as well depending on how you want it to look
• We suggest checking all the check-boxes, as each one enhances the style of the module
• Use Deep-Linking if you plan to use anchor links to direct users to specific tabs
• In general, the preferred Animation Setting is Effects: Fade.

This first example shows Medium Tabs, Contained Style, Horizontal Orientation, and Top-Compact Position

This second example shows xLarge Tabs, Contained Style, Vertical Orientation, and Top Position

This third example shows how we can force a "Hamburger" menu above the Tabbed HTML content in all responsive views. Typically this functionality is reserved for mobile view only.

To do this, in the Module Settings, under the Tabs Settings, find the Responsive Settings, and change "Max Rows" to 0. Otherwise, use Horizontal Orientation and Top Position. In this example, we also show what it looks like to uncheck the "Rounded" check-box - notice the hamburger menu has sharper edges than the previous two examples, which were more rounded.

  
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Page</title>
    </head>
    <body>
      <h1>Hello, World!</h1>
    </body>
    </html>
  

Note: You will need to replace special HTML characters within your code (like < and >) with their corresponding HTML entities (< and >) to ensure they are displayed correctly and not interpreted as HTML tags.