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.

Jump To

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.

HTML using Rounded Container

There are alternative containers that Content Managers can use to enhance the HTML module on a page. This is an example of using the DOD2-Card-Rounded container.

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

HTML using Square Container

Here is another alternative container that Content Managers can use to enhance the HTML module on a page. This is an example of using the DOD2-Card-Square container.

If you do not want the Bold Blue header in your Rounded Card or Square Card Container, just go into the Module Settings and clear out the Module Title field, leaving it blank. The module will just show the text/content without a header.

Here is another commonly-used container, called DOD2-BlueBackground or DOD2-BlueBackground-NoTitle. This one is the option with No Title. It is a simple container that displays a soft blue, almost gray, background behind the content in the HTML module.

Headings

Headings are used to introduce the main contents of a page and organize different content areas within a page. 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.

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:

Four levels of text show comparisons of H1, H2, H3 and H4 headings

 

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.A labeled Heading and midline heading example

An example of a labeled heading

Accordion Menu Module

Training: Accordion Menu Module

The Accordion Menu module allows you to add expandable/collapsible navigation menus to pages within your site. These menus and sub-menus should be links to relevant and related pages within your section of DLA.mil. The expandable nature and customization to content provides a more versatile menu that helps site visitors navigate your site. 

See an example of how DLA accordion menus are formatted to the right.

Accordion menu settings should be set to:

  • Template: Army Corps of Engineers Responsive
  • Check the box labeled "Convert to Jump Menu on Mobile"
  • In the Page Settings tab, the module container should be "DOD2-Empty-No-Padding"

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:

DLA Headquarters News

DLA News

Enterprisewide | Dec. 5, 2024

Norway defense team collaborates with DLA leaders on contested logistics

Coming to terms with contested military logistics amid steadily worsening global security is crucial for all nations, a Norwegian defense leader said during a discussion about supply challenges with DLA members at the HQC.

Enterprisewide | Dec. 3, 2024

Discussing strategy over ‘100 Cups of Coffee’

Six Defense Logistics Agency employees recently had a chance to enjoy a cup of coffee and discuss the agency’s future plans with leadership during an informal gathering in the cafeteria of the McNamara Headquarters Complex Nov 26.

Enterprisewide | Nov. 27, 2024

DOD logisticians collaborate during provisioning summit

The Office of the Deputy Assistant Secretary of Defense for Logistics held its first Defense Department Provisioning Workshop and Summit in partnership with the Defense Logistics Agency Nov. 19-21 at the DLA Land and Maritime Operations Center on

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)

select
select

Expandable Text Module

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 should used for the header, title, and body content.

Expandable Text Header

Collapse All Expand All
 Expandable Item #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 Expandable Item #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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.

IMPORTANT: Broadcast emergency information quickly to your page. Link to a specific page when a user clicks on it.

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.

Metals Technology Airmen reduce two year wait time to two month
The finished plastic trunnion beam model (left) and the trunnion beam (right) rests on a work table, July 6, 2021, at Mountain Home Air Force Base, Idaho. This is the first time that a trunnion beam is being made in the Air Force, parts such as these are usually outsourced and manufactured by civilian contractors. (U.S. Air Force photo by Senior Airman Akeem K. Campbell)

Tags:
Photo by: Senior Airman Akeem K. Campbell |  VIRIN: 210708-F-RA633-1065.JPG

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. 

When using this module on DLA.mil:

  • 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

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.

The Defense Logistics Agency Aviation at Cherry Point, North Carolina, hosted leadership from the Industrial Support Activities in Jacksonville, Florida; San Diego, California; and DLA Aviation’s Retail Focus Acquisition Support Team on Oct. 29.
In support of National Disability Employment Awareness Month, the Defense Logistics Agency Aviation at San Diego Equal Employment Opportunity and Diversity Office, in collaboration with the North Island Special Emphasis team, hosted a virtual seminar Oct. 30 to help educate the workforce on the importance of disability etiquette and to provide practical tips for creating an all-embracing work environment.
The director of Defense Logistics Agency touched on several topics and answered questions from the DLA Aviation workforce during a town hall Tuesday on Defense Supply Center Richmond in Virginia.
Sustaining a resilient workforce, meeting customer needs, posturing for crisis and integrating through partnerships were among the top priorities Defense Logistics Agency Aviation leaders presented to agency heads during a Nov. 5 review of its fiscal 2025 annual operating plan, or AOP, at Aviation headquarters on Defense Supply Center Richmond, Virginia.
Building resiliency and solving challenges within military and supporting industrial supply chains drove discussions during the 2024 Senior Executive Partnership Roundtable held Oct. 29-30 at the Defense Logistics Agency Aviation headquarters in Richmond. The DLA Aviation-sponsored event focused on developing strategic partnerships and identifying issues, concerns and best practices by bringing together senior leaders and executives from DLA, the Defense Department’s Office of Small Business...

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:

  • 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, Animation Settings should be left alone

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This third example shows how we can force a "Hamburger" menu above the Tabbed HTML content.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.