Guide to Customizing your Roadmap with CSS

CSS Selectors List

This is the complete list of CSS selectors, grouped and sorted by their impact and location on the page.

1. Global / High-Level Containers

These selectors wrap the overall widget and define the main structure.

  • IDs:
    • #app
    • #roadmap-main-container

2. Header Section

Elements at the top that impact branding and navigation in the header area.

  • IDs:

    • #header-column selects the entire header area
    • #header-image
    • #header-title
    • #header-updated
    • #header-description

  • Classes:

    • .header
    • .header__container
    • .header__content
    • .header__logo
    • .header__info
    • .header__title
    • .header__updated
    • .header__description
    • .header__actions
    • .header__submit-btn
    • .card__button--primary

3. Navigation / Tabs Section

Selectors that control the tabbed navigation area.

  • Classes:
    • .tabs__list
    • .tabs__list--default
    • .tabs__item
    • #tab-indicator
    • .tabs__indicator

4. Main Content Area

The primary container for the widget’s main content. (Depending on the view, this area may host roadmap, launched, or ideas content.)

  • IDs:

    • #content-main

  • Classes:

    • tabs__list the top level page selector

5. Roadmap Tabs & Sections

Selectors defining high-level roadmap navigation and grouping.

Roadmap Tabs

  • Classes:
    • .roadmap__tabs
    • .roadmap__tab
      • Modifiers:
        • .roadmap__tab--active
        • .roadmap__tab--current
        • .roadmap__tab--0
        • .roadmap__tab--soon
        • .roadmap__tab--1
        • .roadmap__tab--future
        • .roadmap__tab--2
    • .roadmap__tab-count
      • Modifiers:
        • .roadmap__tab-count--current
        • .roadmap__tab-count--0
        • .roadmap__tab-count--soon
        • .roadmap__tab-count--1
        • .roadmap__tab-count--future
        • .roadmap__tab-count--2

Roadmap Sections

  • Classes:
    • .roadmap__sections
    • .roadmap__section
      • Modifiers:
        • .roadmap__section--current
        • .roadmap__section--active
        • .roadmap__section--0
        • .roadmap__section--soon
        • .roadmap__section--1
        • .roadmap__section--future
        • .roadmap__section--2
    • .roadmap__section-title
    • .roadmap__section-count
      • Variants:
        • .roadmap__roadmap__section-count--current
        • .roadmap__roadmap__section-count--soon
        • .roadmap__roadmap__section-count--future
        • .roadmap__roadmap__section-count--0
        • .roadmap__roadmap__section-count--1
        • .roadmap__roadmap__section-count--2
    • .roadmap__list

6. Roadmap Cards (Granular Content)

Selectors that target individual roadmap cards and their components.

  • Classes:

    • .roadmap__card

    • Card Title & Badge:

      • .roadmap__card-title
      • .roadmap__card-title-text
      • .badge
      • .badge--new
      • .roadmap__card-badge

    • Tags:

      • .tags
      • .roadmap__card-tags
      • .tags__item--content-of-card when selecting a specific tag, spaces should be changed to hypens, and specical characters are ignored

    • Description:

      • .normalize-html__content
      • .roadmap__card-desc

    • Footer & Actions:

      • .roadmap__card-footer
      • .roadmap__card-actions
        • Like Button:
          • .like-button
          • .button-tag
          • .like-button__icon
          • .like-button__count
        • Follow Button:
          • .follow-button

7. Launched Section

Selectors specific to the “Launched” view in the widget (an alternative content list to the roadmap cards).

  • Classes:
    • .launched__list
    • .launched__item
    • .launched__content
    • .launched__content-wrapper
    • .launched__title
    • .launched__title-text
    • .launched__description
    • .launched__footer
    • .launched__launch-date

8. Ideas Section

Selectors specific to the “Ideas” view introduced in the latest sample.

  • Classes:
    • .ideas
    • .ideas__header
    • .ideas__search-wrapper
    • .ideas__search-input-container
    • .ideas__search-input
    • .ideas__filter-trigger
    • .ideas__filter-trigger--closed
    • .ideas__filter-icon
    • .ideas__list
    • .ideas__item
    • .ideas__item-content
    • .ideas__item-title
    • .ideas__item-description
    • .ideas__item-actions
    • .ideas__item-buttons

9. Modal / Overlay Elements

Additional Modal & Detail View Selectors

  • Classes:

    • .modal
    • .modal__overlay
    • .modal__close
    • .modal__close-icon
    • .modal__body

  • IDs:

    • #modal-close-button

  • Detail Modal Specific:

    • .detail-modal
    • .detail-modal__content
    • .detail-modal__title
    • .detail-modal__badge
    • .detail-modal__update-time
    • .detail-modal__description
    • .detail-modal__wrapper
    • .detail-modal__actions
    • .detail-modal__form
    • .detail-modal__textarea
    • .detail-modal__form-actions
    • .detail-modal__button
    • .detail-modal__button--submit
    • .detail-modal__comments
    • .detail-modal__comment
    • .detail-modal__comment-content
    • .detail-modal__comment-info
    • .detail-modal__comment-name
    • .detail-modal__comment-time
    • .detail-modal__comment-body
    • .detail-modal__comment-team

  • Badge Variant:

    • .badge--team

Note that removing the Roadmap branding is only available as a option in the dashboard settings page for enterprise customers

  • Classes:
    • .footer
    • .footer__custom-text

How to Use This List

  • Broad Layout Changes:
    Target high-level IDs and container classes (e.g., #roadmap-main-container, .header, .tabs) to affect overall layout and structure.

  • Section-Specific Customizations:
    For modifications to headers, tabs, roadmap sections, launched items, ideas, and cards, use the relevant grouped selectors.

  • Modal/Detail Adjustments:
    To style pop-up dialogs or detail views, focus on the modal selectors (e.g., .ReactModal__Overlay, .detail-modal__title).

This comprehensive guide can be referenced and updated as your code base evolves.