Styling
Suchi comes with some basic styling to quickly setup an article or page. However, you can easily style the Index according to your design.
Colors
You can use a custom color palette for your page by replacing these CSS Variables. Use the palette generator (comming soon) to style your Suchi Component.
Use the !important flag while styling to override default CSS styling.
| Variable | Target |
|---|---|
| --suchi-accentColor | Active section item and indicator |
| --suchi-inactive-indicator | Inactive indicator |
| --suchi-inactive-item | Inactive items in the Index Tray |
| --suchi-background-color | Background Color for the Index Tray |
| --suchi-scrollbar-color | Scrollbar in the Index Tray |
Indicators
On desktop, there are indicators for each section that is derived from a Section.
The accentColor is used to highlight the active section.
| Data attributes | Description |
|---|---|
| [data-suchi-indicators] | <ul> that holds all indicators |
| [data-suchi-indicator] | <li> each individual indicator |
| [data-suchi-indicator="active"] | Targets the active section indicator |
| [data-suchi-indicator="inactive"] | Targets the inactive section indicator |
Items
The items in the Index Tray. The items in the Index Tray are each derived from a corresponding Section.
| Data attributes | Description |
|---|---|
| [data-suchi-items] | Holds all the items in the Index Tray |
| [data-suchi-item="active"] | Targets the active section |
| [data-suchi-item="inactive"] | Targets the inactive sections |