Skip to main content

Concorde HTML Layout Overview: Maintained Classes & ID formatBETA

This document gives an overview of the Concorde HTML layout structure for better targeting with custom CSS selectors.

Concorde is epilot's open-source component library for Journeys. [GitHub]

All maintained classes and IDs are prefixed with Concorde- for easy identification. Use these selectors in your Custom CSS to target specific components, blocks, steps, and layout regions.

Concorde Components: Maintained HTML Classes​

The following classes will be maintained for Concorde components:

  • Concorde-Autocomplete
  • Concorde-Badge
  • Concorde-BlockHeading
  • Concorde-Button
    • Concorde-Button__Primary
    • Concorde-Button__Ghost
    • Concorde-Button__Outlined
  • Concorde-Checkbox
  • Concorde-Chip
  • Concorde-CircularProgress
  • Concorde-Card
  • Concorde-DatePicker
  • Concorde-Divider
  • Concorde-DottedLine
  • Concorde-DropdownX
  • Concorde-ExpandIcon
  • Concorde-IbanInput
  • Concorde-Icon
  • Concorde-IconButton
  • Concorde-Image
  • Concorde-ImageStepper
  • Concorde-Input
  • Concorde-LinearProgress
  • Concorde-Link
  • Concorde-List
  • Concorde-ListItem
  • Concorde-Menu
  • Concorde-MenuItem
  • Concorde-MobileStepper
  • Concorde-Modal
  • Concorde-PopoverContent
  • Concorde-Radio
  • Concorde-RadioGroup
  • Concorde-Rating
  • Concorde-Reveal
  • Concorde-Skeleton
  • Concorde-Spacing
  • Concorde-StepperInput
  • Concorde-SwipeableDrawer
  • Concorde-Switch
  • Concorde-Textarea
  • Concorde-TextField
  • Concorde-ToggleButton
  • Concorde-ToggleGroup
  • Concorde-Tooltip
  • Concorde-Typography
  • Concorde-UploadZone

Concorde Blocks: Maintained HTML Classes​

The following classes will be maintained for Concorde Blocks:

  • Concorde-Account-Block
  • Concorde-ActionBar-Block
    • Concorde-ActionBar__BackButton
    • Concorde-ActionBar__CTAButton
  • Concorde-Address-Block
  • Concorde-AttributeEditor-Block
  • Concorde-App-Block
  • Concorde-AvailabilityCheck-Block
  • Concorde-BinaryInput-Block
  • Concorde-Consents-Block
  • Concorde-Contact-Block
  • Concorde-Custom-Block
  • Concorde-Date-Block
  • Concorde-DigitalSignature-Block
  • Concorde-EntityFinder-Block
  • Concorde-HyperlinkButton-Block
  • Concorde-Image-Block
  • Concorde-InputCalculator-Block
  • Concorde-JourneyLauncher-Block
  • Concorde-LoginRegistration-Block
  • Concorde-MeterReading-Block
  • Concorde-MultipleChoice-Block
    • Concorde-MultipleChoice-Button-Block
    • Concorde-MultipleChoice-Checkbox-Block
    • Concorde-MultipleChoice-Image-Block
    • Concorde-MultiChoice-Chip-Block
    • Concorde-MultiChoice-Chip__Selected
    • Concorde-MultiChoice-Button__Selected
    • Concorde-MultiChoice-Checkbox__Selected
    • Concorde-MultiChoice-Image__Selected
  • Concorde-NumberInput-Block
  • Concorde-Paragraph-Block
  • Concorde-PaymentMethod-Block
  • Concorde-PdfUserInputSummary-Block
  • Concorde-PersonalInformation-Block
  • Concorde-PreviousProvider-Block
  • Concorde-Products-Block
    • Concorde-ProductTile
    • Concorde-ProductTile__Featured
  • Concorde-ProductCategories-Block
  • Concorde-ProductsRecommendations-Block
  • Concorde-PVRooftopNavigator-Block
  • Concorde-SingleChoice-Block
    • Concorde-SingleChoice-Button-Block
    • Concorde-SingleChoice-Dropdown-Block
    • Concorde-SingleChoice-Image-Block
    • Concorde-SingleChoice-Radio-Block
    • Concorde-SingleChoice-Chip-Block
    • Concorde-SingleChoice-Chip__Selected
    • Concorde-SingleChoice-Button__Selected
    • Concorde-SingleChoice-Image__Selected
  • Concorde-ShoppingCart-Block
  • Concorde-SuccessConfirmation-Block
  • Concorde-TextInput-Block
  • Concorde-Upload-Block
  • Concorde-UserInputSummary-Block

Concorde Steps: Maintained HTML Classes​

The following classes will be maintained for Concorde steps:

  • Concorde-Step

Concorde Layout: Maintained HTML Classes​

The following classes will be maintained for the Concorde layout:

  • Concorde-Topbar
  • Concorde-Layout-Container
  • Concorde-Layout-Header
  • Concorde-Layout-Content
  • Concorde-Layout-Footer
  • Concorde-Group-Layout

Concorde Dark Mode: Maintained HTML Classes​

The following classes will be maintained for dark mode:

  • Concorde-Dark

Concorde Block & Concorde Step HTML IDs​

Block and Step HTML ids are unique and autogenerated, but remain the same throughout the lifetime of the step/block.
If a block or step is deleted, their respective ids are removed from the DOM.

ID Formats:

  • Block HTML id format: Concorde-Block---123456789100
  • Step HTML id format: Concorde-Step---123456789100

Sample HTML Structure​

<div class="Concorde-Step" id="Concorde-Step---a1d9b0de98ac">
  <div class="Concorde-Topbar">...</div>
  <div class="Concorde-Layout-Container">
    <div class="Concorde-Layout-Header">...</div>
    <div class="Concorde-Layout-Content">
      ...
      <div class="Concorde-TextInput-Block" id="Concorde-Block---e982566808ed">
        ...
      </div>
      <div
        class="Concorde-NumberInput-Block"
        id="Concorde-Block---fec2535864ed"
      >
        ...
      </div>
      ...
    </div>
    <div class="Concorde-Layout-Footer">...</div>
  </div>
</div>

Concorde Design Tokens​

To view Concorde Design Tokens, visit Concorde Design tokens