Jekyll use kramdown as the default markdown processor. kramdown can adding attributes to block and span-level elements throw ALDs1 feature. with the help of ALDs, we can defined class names to an element by {:.class-name1.class-name-2}.
TeXt offer some class names that you can use in the post.
Alert
| Class Names |
|---|
| success |
| info |
| warning |
| error |
Success Text.
Info Text.
Warning Text.
Error Text.
markdown:
Success Text.
{:.success}
Info Text.
{:.info}
Warning Text.
{:.warning}
Error Text.
{:.error}
Photo Frame
| Class Names |
|---|
| border |
| shadow |
| rounded |
| circle |
| Border | Shadow |
|---|---|
 |
|
{:.border} |
{:.shadow} |
| Rounded | Circle |
|---|---|
|
|
{:.rounded} |
{:.circle} |
| Border + Rounded | Circle + Shadow |
|---|---|
|
|
{:.border.rounded} |
{:.circle.shadow} |
Button
| Type | Class Names |
|---|---|
| base | button |
| type | button--primary, button--secondary, button--success, button--info, button--warning, button--error |
| shape | button--pill, button--rounded, button--circle |
| size | button--md(default), button--sm, button--lg |
[BUTTON](#){:.button.button--primary.button--pill}
[BUTTON](#){:.button.button--secondary.button--pill}
[BUTTON](#){:.button.button--primary.button--rounded}
[X](#){:.button.button--primary.button--circle}
[BUTTON](#){:.button.button--secondary.button--rounded.button--sm}
[BUTTON](#){:.button.button--secondary.button--rounded.button--lg}