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.

Note: Concorde refers to the new Journey design.

This document gives an overview of the Concorde HTML layout structure for better targeting with custom CSS selectors. We have prefixed classes and ids with Concorde- so they stand out and are easily recognizable.

This guide will help with custom css styling of the new journey design.

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-App-Block
• Concorde-AvailabilityCheck-Block
• Concorde-BinaryInput-Block
• Concorde-Consents-Block
• Concorde-Contact-Block
• Concorde-Date-Block
• Concorde-DigitalSignature-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-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 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