Accordion

Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.

Also, check the JS tab for an example of a jQuery "scroll to active panel" script, which is a preferred interaction for opened accordion panels (the only exception being accordion used within modals, which should not have this animation).

BS5 Accordion from https://getbootstrap.com/docs/5.0/components/accordion/

BS4 Accordion Currently in the PL

Alerts

Alert controls retain color palette specified in variables with a few twists. View colors here.

Alerts - Default

Use alerts to show the user a message.

You could save $29.95 on this order if you become a member. Log in to your account OR learn about membership today!

You could save $29.95 on this order if you become a member.

You need to log in to checkout these items.

Are you sure you want to continue?

This thing works! Great Job!

This is a light alert. Good for general notifications within an app.

This is a dark alert. Good for general notifications within an app.

Small Alerts

Use a small alert if you need to put an alert within a card.

You could save $29.95 on this order if you become a member.

You could save $29.95 on this order if you become a member.

You need to log in to checkout these items.

Are you sure you want to continue?

This thing works! Great Job!

This is a light alert. Good for general notifications within an app.

This is a dark alert. Good for general notifications within an app.

Dismissable Alerts

You could save $29.95 on this order if you become a member. Log in to your account OR learn about membership today! ×

You could save $29.95 on this order if you become a member. ×

You need to log in to checkout these items. ×

Are you sure you want to continue? ×

This thing works! Great Job! ×

This is a light alert. Good for general notifications within an app. ×

This is a dark alert. Good for general notifications within an app. ×

Alerts Bullet List

You could save $29.95 on this order if you become a member.

• This is one line.
• This is the second one..
• And a third.

You could save $29.95 on this order if you become a member.

• This is one line.
• This is the second one..
• And a third.

You need to log in to checkout these items.

• This is one line.
• This is the second one..
• And a third.

Are you sure you want to continue?

• This is one line.
• This is the second one..
• And a third.

This thing works! Great Job!

• This is one line.
• This is the second one..
• And a third.

This is a light alert. Good for general notifications within an app.

• This is one line.
• This is the second one..
• And a third.

This is a dark alert. Good for general notifications within an app.

• This is one line.
• This is the second one..
• And a third.

Alerts - Timeout

Apply a 5-second timeout for alerts without a close. This excludes error messages. (Refresh the page and scroll to this section to see an example.)

This is a primary alert.

Badges

A small count and labeling component.

Default Example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Heading 1 Primary

Heading 2 Primary

Heading 3 Primary

Heading 4 Primary

Heading 5 Primary

Heading 6 Primary

Contextual Variations

Add any of the below mentioned modifier classes to change the appearance of a badge. Please note that this is also the default sizing of a badge. This default size would appear when there is no font size defined within the parent element.

Primary Secondary Success Danger Warning Light Dark

Casing Options

Should be the opposite casing of the buttons so that users do not confuse it with a button.

Uppercase

Primary Secondary Success Danger Warning Light Dark

Lowercase

Primary Secondary Success Danger Warning Light Dark

Capitalize

Primary Secondary Success Danger Warning Light Dark

Defined Sizes

Add any of the below mentioned modifier classes to set a specific size of a badge.

Small

Primary Secondary Success Danger Warning Light Dark

Medium

Primary Secondary Success Danger Warning Light Dark

Large

Primary Secondary Success Danger Warning Light Dark

Notifications

Badges can be used as part of links or buttons to provide a counter for notifications. Use the .badge-pill class for notifications.

My List 500

Cart 1

My List 500

Cart 1

Breadcrumbs

We prefer using arrows to slashes when creating a breadcrumb.

Buttons

For practical reasons APA applications adhere to Bootstrap's semantic buttons.

Yellow CTA’s should be used sparingly and only for e-commerce layouts. General CTA’s should contrast the background color (blue on white, white on blue).

Responsive Buttons

We recommend making some buttons full width on mobile devices. You could use the following code within the mobile viewport. You might need to add margin to the top or bottom of the mobile button depending on your layout.

          @media only screen and (max-width: 767px) {
              .btn-responsive {
                  width: 100%;
              }
          }
          

Core Buttons

APA Publishing Buttons

Button Sizes & Types

Add New Item Button

Used mostly in forms for users to add new fields or values.

Add New Item

Kebab Menu

Used in menus and menu bars to show additional options. The icon is most often located at the top-right or top-left of the screen or window.

MENU

Action Another action Something else here

Dropdown Button

Button Group

USAGE: Button groups are used as an alternative for radio buttons, and work well for the UI when you need a more prominent display on the form and a larger tapping target than a radio button component has. Button groups are also commonly used as filter options or acting like "tabs," or for rating scales like the Net Promoter Score (NPS).

An example of a simple button group acting as radio buttons is on the Course Adoption System Request screen, for the Country field when picking either "United States" or "Canada." Here, choosing one of the options controls the "State/Province/Region" select list values.

STYLING: Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups (all of the demo examples are using .btn-group-sm except the NPS demo which is using the default size). The "primary" style for button groups is modeled after the .btn-outline button class, while the Publications Style is modeled after the .btn-pubs-8 button class. Also, if using a button group with labels and input radio type components, add .btn-group-toggle to the div containing the button group to style the <input>s within your buttons.

RESPONSIVENESS: The amount of buttons and horizontal length of the button group will determine the best approach to achieve responsiveness. Some options are to convert the button group to a dropdown at smaller screen widths, as shown on the Polaris Explore All Notifications mockup for the sort and filter buttons. Or, coverting a horizontal display to a vertical display for the button groups, as shown on the Polaris Record Views mockup for the Time Period field. Another option is to set a min-width with overflow-x: auto; for a container of the button group to make a horizontal scroll bar appear below a certain screen width.

ACCESSIBILITY: Accessibility elements include a role="group" and aria-label="description of the button group" in the .btn-group div, and <fieldset> tags and a <legend> which can be .sr-only and/or specifying the field as required field using .sr-only.

PURE CSS vs. JAVASCRIPT: For checkbox behavior with button groups, no additional JavaScript is needed. If you apply data-toggle="buttons" to the wrapper element the child buttons will automatically have .active applied to whichever button is clicked. Note that this .active class can be applied to any number of <button> elements within the group; if your intention is to make .active unique with radio button behavior, you need to use JavaScript. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button>.

To achieve radio button behavior with button groups, additional JavaScript is needed for the styling of selected/checked buttons when using button components, but not necessary when using labels and input radio type components (e.g., the NPS example in the demo). For certain types of responsive switches with button groups, JavaScript may be needed.

Cards

APA applications adhere to Bootstrap card containers for markup. In general, content cards should always be lighter than their backgrounds (e.g., white cards on light gray backgrounds). Below are a few basic styles:

Card Header: Semantics

When creating cards, be mindful of section heading semantics. Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. For more information, visit W3C's web accessibility tutorials on headings.

Card with Customization

Card with image cap, card title, subtitle, text, list group, and medium primary button.

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

• Cras justo odio
• Dapibus ac facilisis in
• Vestibulum at eros

MEDIUM

Text goes here

MEDIUM

Card with Header and Chevron Expandable Section

Used to hide/show additional content within a card.

Responsive Card Group

Used for a 4-card row desktop design which goes to 2 cards per row and then 1 card per row, all with rounded corners around all cards based on the breakpoints.

Header

Card text here.

Button

Header

Card text here.

Button

Header

Card text here.

Button

Header

Card text here.

Button

Footer

Apps need a slim minimal footer for all pages which contains a link to APA's Privacy Policy for General Data Protection Regulation (GDPR) compliance.

Sticky Footer

To make the footer stick to the bottom of the page, add a surrounding div with a unique id around your content. In this demo, we named the div id #mainBodyContainer.

Be sure not to wrap the div around the footer.

Here is an example of the markup:

                                
                                <html>
                                  <head>...</head>
                                  <body>
                                    <div id="mainBodyContainer">
                                      <!-- main content here -->
                                    </div>
                                    <!-- /#mainBodyContainer -->
                                    <footer>
                                      <!-- footer content here -->
                                    </footer>
                                  </body>
                                </html>   
                                
                                

You then want to add this CS for the body and unique ID:

                                
                                body {
                                  display: flex;
                                  height: 100vh;
                                  flex-direction: column;
                                }
                                #mainBodyContainer {
                                  flex: 1 0 auto;
                                }  
                                
                                

Footer - Basic

Here a very minimal footer for web apps.

Forms

General Form Field

APA applications adhere to Bootstrap forms.

Forms are a crucial component of many ITS applications. If you have something that you would like to add to this section, please send us an email at ux-services@apa.org with your feedback.

Below is the general structure for a text field input. The field label should be clear and properly describe the input. Placeholder text should simple and straightforward (Example: "Enter {Field Label Name}"). Also, if needed, provide helper text to help users add the correct input. We generally recommend single column format for all fields except for first and last name. We also recommend using title casing for field labels and placeholders. Helper text should use sentence casing. The following fields are accessible as well.

From W3C: The name attribute specifies the name of an <input> element. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted. Note: Only form elements with a name attribute will have their values passed when submitting a form.

Also, autocomplete attributes ("autofill") should be used for input fields when appropriate. See documentation here.

Field Label Anything that would be important for the user to know should go here instead of the placeholder.

Required & Optional

Required Usage

All required fields should be marked with a red asterisk

The "All fields marked with * are required" statement (see example in demo) should be displayed at the top of every form with required field asterisks. The statement only needs to be displayed once at the "top" of the screen (e.g., if there are multiple cards with form fields, put the statement on the first/top-most card with fields).

Use an asterisk (*) with the form field label:

• <span class="text-danger required-asterisk">*</span>

Add text for a screen reader that a field is required:

• <span class="sr-only">required</span>

Provide HTML and ARIA required attributes.

• HTML5: <input type="text" id="first-name1" name="first-name" required>
• ARIA: <input type="text" id="first-name2" name="first-name" aria-required="true">

Optional Usage

For optional fields, "(optional)" can be displayed if it makes sense for the specific form/screen (e.g., on the ecommerce redesigns, with the Phone Extension field). If using Optional display instead of Required, include the statement "All fields are required unless marked as Optional" at the top of the form.

When marking an optional field, use <span class="optionalText">(optional)</span>

Circumstances that you can utilize Optional form fields:

• When asking for an address from a user, additional address fields beyond the first can be marked as optional.
• When asking for a user's name and the middle name or initial is optional.

Ideally, a combination of the above methods to mark that fields are required and optional within forms to make it clearest to all users. This will reduce the number of errors when filling out forms and allow a smoother user experience for users.

All fields marked with * are required

Field Label*required

Field Label(optional)

Email & Password

Email

Password Password should use uppercase and lowercase letters.

First Name & Last Name

First Name and Last Name are two input fields which can be placed horizontally.

First Name*required

Last Name*required

Address Form Example

To make the first option in the select list be "disabled", which adds an effect similar to input field placeholder text, use code such as: <option selected="true" disabled="disabled">Choose section...</option>

For the Country dropdown, put the "United States" select option on the top of the list if appropriate, but also include this option alphabetically in the select list. For a horizontal line separator in the select list, you can use <option value="" disabled="disabled">&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;</option>

Country*required Choose Country... United States ──────── Afghanistan Åland Islands Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia, Plurinational State of Bonaire, Sint Eustatius and Saba Bosnia and Herzegovina Botswana Bouvet Island Brazil British Indian Ocean Territory Brunei Darussalam Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Cape Verde Cayman Islands Central African Republic Chad Chile China Christmas Island Cocos (Keeling) Islands Colombia Comoros Congo Congo, the Democratic Republic of the Cook Islands Costa Rica Côte d'Ivoire Croatia Cuba Curaçao Cyprus Czech Republic ...

Address*required Street address, P.O. box, company name, c/o. (Example: 1234 Main Street)

Additional Address Information (optional) Apartment, suite, unit, building, floor, etc. (Example: Suite 203)

City*required

State*required Choose State... ...

ZIP/Postal Code*required

Checkboxes and Radios

Checkboxes allow users to select multiple options, where radio groups allow users to select one option from a group.

Use fieldsets to group related form controls. The first element inside a fieldset must be a legend element which describes the group. Please note that single checkboxes do not need to have fieldsets or legends.

Any general text which is important for filling in the form and cannot be put into a hint, should be in that legend (as shown in the first checkbox group example). But the legend shouldn't be too long either.

Radio Buttons

Radio Button Example

Option 1

Option 2

Single Checkbox

Checkbox Group

Checkbox Group Example

Select all that apply.

Checkbox Label

Checkbox Label 2

Checkbox Group (Hint outside of legend)

Avoid links in legends when possible. Links inside legends are not read by some screen readers, most notably Internet Explorer 11, paired with JAWS. If you need a pattern like this, put the link outside of the legend element, but keep all other useful hint text in the legend. You will need to use the aria-describedby attribute to show the relationship between the legend to the hint.

Checkbox Group Example 2

Find additional information in the help section.

Checkbox Label

Checkbox Label 2

Other Fields

For certain fields, such as the search input fields, the label can be hidden with .sr-only.

Search Input

Search Autocomplete

Counter

Checkbox Toggle

A checkbox toggle is a good solution for minimizing the amount of fields shown at once on the screen. Currently, we are using this toggle on two systems–APA ecommerce screens and Course Adoption System.

Click Me

Field Name*required

Form Validation Example

Here is an example of form validation (using the jQuery Validate library). The Email field here is validated as being required and it needs to be a valid email format.

In most cases, the validation message should include the field label and be written in the following format: Enter your [FIELD LABEL]. In some cases, a top error container should be used in addition to contextually placed error messages.

The cursor should be focused to the top-most invalid field on the page after a form submit.

For fields with errors, we recommend highlighting the input field border red (#a94442) along with a red message (#990000) underneath the field. On form submit, successfully validated input fields should have a green border (#2a8c3a) with no corresponding message. On focus of valid fields should have a box shadow of box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #51cb65; and on focus of invalid fields should have a box shadow of box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ff0000;

Email*

Character Count

This character count is modeled after the gov.uk component for accessibility. An example of usage is the Polaris onboarding and preference management forms.

This design allows user input to exceed the maximum characters, but applies an error class to the character count when the input exceeds the maximum allowed characters. This lets users type or copy and paste their full input, then edit it down. In addition to this message, frontend validation should be used to prevent form submission when the input exceeds the maximum allowed characters.

The JavaScript for this component makes the character count work.

Also included in this example is a script making the textarea autogrow based on input.

Can you provide more detail?

Do not include personal or financial information like your Social Security Number or credit card details.

200 characters left

Headers

Most applications can utilize a simplified header, with a minimalist design of the APA logo or specific app logo, and other elements such as a "cart" button and "log in" button (e.g., the Course Adoption System site).

The APA logo could be replaced with an app-specific logo (with changes to the destination anchor of the logo also). Note there are responsive media queries to resize and switch the logos from horizontal to stacked on smaller devices.

Header - Basic

The most basic, simplified app header, used for pages that focus on a main conversion in the page's body section (e.g., login forms).

Header - Basic with Cart and Log In Buttons

A simplified app header with additional buttons/links, used for apps which need additional top buttons (e.g., to show items in a shopping cart or "log in/log out" links.

(1) Log In

---

---

---

---

---

---