Donate For AAD Members Search

Go to AAD Home

Navigational components



  • Use to showcase loosely connected content for quick snapshots of info. 

  • Great solution for FAQs.

  • Good for organizing related reference info. 

  • Use icons when appropriate.

  • Don’t hide vital info within an accordion—eg, if it’s a registration page, don’t hide a link to the registration form under an accordion.

  • Don't place video content in an accordion.

Accordion example

What happens during microdermabrasion?

The dermatologist uses a handheld device that gently removes the top layer of skin. You may feel a sanding sensation, but this is not painful. It takes about 30 to 40 minutes to treat the entire face and about 20 minutes to treat the neck. 

After the treatment, a moisturizer is applied. 

What will I need to do after microdermabrasion?

You may need to apply a moisturizer or other skin care product at home.

You will be given a skin-care plan that includes sun protection. Protecting your skin form the sun helps ensure the best possible results and reduces the risk of side effects.

Is there downtime?

You will not have downtime or a recovery period. Some patients’ skin turns pink or red. The skin can swell a bit. These side effects are similar to having a sunburn or windburn for a day or two. During this time, some patients feel uncomfortable returning to work or being in public. 

Accordion with icons example

Lorem ipsum dolor sit amet

Dignissim cras tincidunt lobortis feugiat vivamus. Cursus in hac habitasse platea. Imperdiet proin fermentum leo vel orci porta non pulvinar neque.

Scelerisque viverra mauris

Egestas integer eget aliquet nibh praesent tristique magna. Amet venenatis urna cursus eget nunc scelerisque viverra. Condimentum vitae sapien pellentesque habitant morbi. Vel orci porta non pulvinar neque. 

Malesuada bibendum

Tempus egestas sed sed risus pretium. Eget magna fermentum iaculis eu non diam phasellus vestibulum.

All icons available for accordions:

All icons in the "Regular icons" section in the icons asset page are available for accordions.

Inline or page tabs


Guidance for inline (or page) tabs

  • Don’t hide essential info in the tabs. 

  • Good use case: Short form of info about an award or event. 

  • No video content in inline tabs.

  • Keep it short and sweet when it comes to content within these tabs, as the mobile experience suffers when the content gets too long.

  • The inline tabs are essentially same as the accordion: The information is sandwiched between boundaries.


  • Tab content 1
  • Tab content 2
  • Tab content 3
  • 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.

    Pellentesque id nibh tortor id aliquet. Lacus viverra vitae congue eu consequat ac felis donec et. Mattis molestie a iaculis at erat pellentesque. Erat pellentesque adipiscing commodo elit. Ultrices gravida dictum fusce ut placerat orci. Imperdiet proin fermentum leo vel orci porta non. Imperdiet sed euismod nisi porta lorem mollis. In dictum non consectetur a erat nam at lectus. Eu nisl nunc mi ipsum faucibus vitae. Vel orci porta non pulvinar neque. Et pharetra pharetra massa massa ultricies mi quis. Massa ultricies mi quis hendrerit dolor. Non enim praesent elementum facilisis.

    Tellus elementum sagittis vitae et leo. Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Eget duis at tellus at urna condimentum mattis. Pretium fusce id velit ut tortor pretium. Vitae et leo duis ut diam quam nulla porttitor. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Posuere morbi leo urna molestie at elementum eu facilisis sed. 

    Quisque sagittis purus sit amet volutpat consequat mauris nunc. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Lorem ipsum dolor sit amet consectetur adipiscing elit. 


    Linked tabs


    Guidance on linked tabs

    • Guides user through a series of actions (eg, steps to report MIPS

    • Presents topics that a user would like to access easily from a single place (eg, pages on psoriasis symptoms, treatments, tips on controlling). In other words: Linked tabs are for information that is on the same level of information hierarchy.

    • For horizontal, create or import in Linked Tabs component at top of article.

    • No more than 6 tabs for horizontal tabs. 

    • For vertical, create or import in sidebar section.

    • Note: Linked tabs link individual pages. The tabs are simply a component that connects all the individual pages.

    Vertical linked tabs


    Horizontal linked tabs

    Secondary navigation

    In assets:

    Secondary navigation component

    • Secondary navigation is used only in very specific use cases, (such as the Meetings section in the member section and Diseases in Public section) that have their own information hierarchy structures and are too deep and wide to be supported by the main navigation alone.

    • It is called the secondary navigation because the global navigation is considered to be the primary navigation but in reality, it represents the 3rd level of information hierarchy.

    • This navigation should be used in very large sections of content only.

    • A very important note: This navigation does not appear in mobile at all. (There are plans to remedy this situation but when this is being written in March of 2020 those plans have not been put into process as of yet)

    • Due to this, you should make sure that the user can easily navigate these sections with mobile phone by using layers of landing pages to nest the content. To see an example of this, see how Public section pages for diseases are built.