Add heading alignment

This commit is contained in:
Kuba Orlik 2026-08-19 22:28:18 +02:00
parent cffeb98914
commit b0ed7171a6
2 changed files with 19 additions and 1 deletions

View File

@ -1,4 +1,6 @@
.heading {
text-wrap: pretty;
text-wrap: balance;
& > * {
margin-top: 0;
margin-bottom: 0;
@ -24,6 +26,18 @@
font-size: 64px;
}
&.heading--align-left {
text-align: left;
}
&.heading--align-right {
text-align: right;
}
&.heading--align-center {
text-align: center;
}
&.heading--color-normal {
color: var(--color-brand-text-fg);
}

View File

@ -18,6 +18,9 @@ const component_arguments = {
"large",
"extra_large",
]).setDefaultValue("medium"),
align: new ComponentArguments.Enum(["left", "right", "center"]).setDefaultValue(
"left"
),
color: new ComponentArguments.Enum(["normal", "accent1", "accent2"]).setDefaultValue(
"normal"
),
@ -30,7 +33,7 @@ export class Heading extends Component<typeof component_arguments> {
}
async toHTML({
args: { title, level, font_size, color },
args: { title, level, font_size, color, align },
classes,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
return (
@ -39,6 +42,7 @@ export class Heading extends Component<typeof component_arguments> {
"heading",
`heading--font-size-${font_size}`,
`heading--color-${color}`,
`heading--align-${align}`,
...classes,
]}
>