# Concorde HTML Layout Overview

<h1 align="left" style={}>Concorde HTML Layout Overview: Maintained Classes & ID format<span
  style={}>BETA</span></h1>

### 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](https://github.com/epilot-dev/concorde-elements)]

All maintained classes and IDs are prefixed with `Concorde-` for easy identification. Use these selectors in your [Custom CSS](/docs/journeys/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

```html
<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](/docs/ui-design/concorde-design-tokens)