Skip to content

Add example for two column layout width ratio #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DeolaJ merged 1 commit into from
Apr 16, 2025
Merged

Add example for two column layout width ratio #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions docs/journeys/custom-css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,17 @@ The snippet below will change the maximum width of the journey content to 600px
}
```

### Modify the ratio between the content and sidebar of Two Column Layout

The snippet below will change the ratio between the content and sidebar of Two Column Layout to 1:1.

```css
:root {
--concorde-two-columns-content-width: 50%;
--concorde-two-columns-sidebar-width: 50%;
}
```

### Use multiple fonts on a journey

To do this, you can either use a standard font (provided on the Design builder) or a custom font (that has been uploaded). To use a custom font, you can either upload it on the design builder or use a hosted font.
Expand Down
14 changes: 7 additions & 7 deletions docs/ui-design/concorde-design-tokens.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,13 @@ sidebar_position: 3

### Navbar

| CSS Variable | Default | Description |
| ------------------------------------ | ------------------------------- | ----------------------------------------------------------------------------- |
| `--concorde-custom-layout-max-width` | `1256px` | The maximum width of the journey. |
| `--concorde-two-columns-content-width` | `calc(7 / 12 * 100%)` | For Two column layouts, the percentage of the width assigned to the Content section |
| `--concorde-two-columns-sidebar-width` | `calc(5 / 12 * 100%)` | For Two column layouts, the percentage of the width assigned to the Sidebar section |
| `--concorde-topbar-background` | `var(--concorde-primary-color)` | The background color of the navigation bar. |
| `--concorde-topbar-logo-alignment` | `center` | Changes the alignment of the header logo. Can be `flex-start` and `flex-end`. |
| CSS Variable | Default | Description |
| -------------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--concorde-custom-layout-max-width` | `1256px` | The maximum width of the journey. |
| `--concorde-two-columns-content-width` | `calc(7 / 12 * 100%)` | For Two column layouts, the percentage of the width assigned to the Content section. Ensure that together with the `--concorde-two-columns-sidebar-width` variable, the total width of the Two Column Layout is 100%. |
| `--concorde-two-columns-sidebar-width` | `calc(5 / 12 * 100%)` | For Two column layouts, the percentage of the width assigned to the Sidebar section. Ensure that together with the `--concorde-two-columns-content-width` variable, the total width of the Two Column Layout is 100%. |
| `--concorde-topbar-background` | `var(--concorde-primary-color)` | The background color of the navigation bar. |
| `--concorde-topbar-logo-alignment` | `center` | Changes the alignment of the header logo. Can be `flex-start` and `flex-end`. |

---

Expand Down
Loading