This repository was archived by the owner on Dec 12, 2024. It is now read-only.
CSS Components
Actions
| Class | Description |
|---|---|
actions--disabled |
Disables the available actions of the links, buttons, etc. |
Buttons
| Class | Screenshot |
|---|---|
button__solid--primary |
 |
button__solid--secondary |
 |
button__solid--danger |
 |
button__transparent--primary |
 |
button__transparent--secondary |
 |
button__transparent--danger |
 |
| Variable | Default |
|---|---|
$button-primary-background |
rgb(78, 183, 168) |
$button-primary-color |
rgb(255, 255, 255) |
$button-secondary-background |
rgb(153, 153, 153) |
$button-secondary-color |
rgb(255, 255, 255) |
$button-danger-background |
rgb(218, 60, 60) |
$button-danger-color |
rgb(255, 255, 255) |
$button-border-radius |
3px |
$button-box-shadow |
true |
For customization of the variables see the Style customization gide
Cards
| Class | Screenshot |
|---|---|
card |
 |
card--padding |
 |
card__separator |
 |
card__headline |
 |
| Variable | Default |
|---|---|
$card-border-radius |
3px |
$card-box-shadow |
0 2px 7px rgba(0, 0, 0, 0.2) |
$card-separator-color |
rgb(222, 222, 222) |
$card-title-color |
rgb(247, 133, 96) |
For customization of the variables see the Style customization gide
Links
| Class | Screenshot |
|---|---|
link--primary |
 |
link--secondary |
 |
link--danger |
 |
| Variable | Default |
|---|---|
$link-primary-color |
rgb(61, 149, 137) |
$link-secondary-color |
rgb(128, 128, 128) |
$link-danger-color |
rgb(191, 36, 36) |
For customization of the variables see the Style customization gide
Margins
| Class | Description |
|---|---|
margin--clear |
Sets all margins to 0
|
margin--top |
Sets a top margin of 30px
|
margin--bottom |
Sets a bottom margin of 30px
|
margin--left |
Sets a left margin of 30px
|
margin--right |
Sets a right margin of 30px
|
Markdown
| Class | Description |
|---|---|
markdown |
Sets markdown styles to the wrapped content, similar to GitHub markdown styles |
Scrollbox
| Class | Description |
|---|---|
scrollbox |
Generates a scrollable box when the wrapped content's height exceeds 65vh. Shows tops and bottom shadows that indicate the scroll level |
Texts
| Class | Description |
|---|---|
text__align--left |
Aligns the wrapped text to left
|
text__align--center |
Aligns the wrapped text to center
|
text__align--right |
Aligns the wrapped text to right
|
Titles
| Class | Screenshot |
|---|---|
title |
 |
| Variable | Default |
|---|---|
$title-color |
rgb(122, 118, 76) |
For customization of the variables see the Style customization gide