Skip to content

Best practices for IDs

Many shortcodes have the option to set an ID (e.g. in HTML it is id=”id-name”, targeted in CSS using #id-name). These are some best practices for creating and using those IDs.

  • IDs must start with a letter. Don’t start an ID with a number or special character.
  • Use dashes as separators. Don’t include spaces in an ID.
  • All IDs on a page must be unique, and should be short and descriptive

Specific shortcode behavior & tips for usage

Some of our shortcodes have additional behavior related to their IDs that you may find helpful.


  • If you do not include an id or a name or title attribute on the accordion shortcode, a unique ID will be created for you. If you only include the name or title without an id, an ID will be generated using the text of the name/title with dashes between each word.
  • Accordion section shortcodes do not have automatically generated IDs.
  • Setting an ID on an accordion section allows you to directly link to the section and automatically open it.

    An accordion section has id=”harrypotter”, the link would go to that page, automatically open the harrypotter accordion section and, depending on your browser, jump down the page to the open section.


  • If multiple modals are included on a page and an ID for each is not set manually, a unique ID will be generated for each.


  • If you do not set an id manually, an ID will be generated automatically.
  • If multiple tabs/tours are on included on a page without specifying a unique ID for each, unique IDs will be generated.

Blockquotes, Buttons, Cards, Grids (both row and col) and Jumbtrons

  • All have optional IDs that will be used if provided.