Atributos

Atributos ficam entre chaves, como {size=5xl color=accent}. Esta página lista todos os atributos que o compilador aceita e os valores válidos de cada um. Para a sintaxe das chaves (.estilo, #id, aspas, posição na linha), veja Sintaxe.

Um atributo desconhecido é erro (F209) e um valor inválido também (F301); as mensagens sugerem o nome ou valor mais próximo.

Atributos de estilo

Valem em qualquer bloco, no separador de slide (--- {…}), em trechos de texto ([texto]{…}) e em imagens.

Atributo	Valores aceitos	Exemplo	Observações
color	Cor	color=accent	Cor do texto. Também vale para ícones.
bg	Cor ou gradiente cor..cor	bg=ink..violet	Fundo. O gradiente é linear, em diagonal (135°).
image	https://…, http://…, data:image/… ou asset:<id>	image=asset:<id>	Imagem de fundo, cobrindo a área e centralizada.
font	Token de fonte: body, display, mono ou um @font	font=display	Família tipográfica.
size	Escala de tamanhos ou pixels de 8 a 400	size=5xl, size=120	Tamanho do texto; em ícones, o tamanho do ícone.
weight	Peso por nome ou de 100 a 900, de 100 em 100	weight=bold, weight=600	Peso da fonte.
italic	Booleano	italic, italic=false	Itálico.
uppercase	Booleano	uppercase	Caixa alta.
align	left, center, right	align=center	Alinhamento horizontal, em qualquer layout.
valign	top, center (ou middle), bottom	valign=bottom	Alinhamento vertical, em qualquer layout.
pad	Um ou dois valores de espaçamento	pad=lg, pad="sm xl"	Espaço interno. Com dois valores: vertical e horizontal.
gap	Espaçamento	gap=xl	Espaço entre os filhos de um bloco.
radius	Arredondamento ou pixels de 0 a 9999	radius=lg	Cantos arredondados.
border	Espessura (0 a 40 px) e/ou cor, em qualquer ordem	border, border="2 coral"	Sem valor: 3 px na cor line do tema.
shadow	sm, md, lg, none	shadow, shadow=lg	Sem valor, vale md.
w	Medida ou auto	w=50%, w=480	Largura.
h	Medida ou auto	h=full	Altura.
x	Medida	x=120	Posição horizontal absoluta (distância da esquerda).
y	Medida	y=80	Posição vertical absoluta (distância do topo). Com só um de x/y, o outro vale 0.
opacity	Número de 0 a 1 ou porcentagem de 0% a 100%	opacity=0.6, opacity=60%	Transparência do bloco inteiro.
leading	tight, normal, loose ou número de 0.6 a 3	leading=tight	Altura da linha. Veja entrelinha.
tracking	tight, normal, wide ou número de -0.2 a 1 (em em)	tracking=0.1	Espaço entre letras.
step	Número inteiro de 1 a 99	step=2	Etapa em que o bloco ou trecho aparece. Veja Revelação.

Atributos booleanos aceitam true, yes ou sim para ligar e false, no ou não para desligar. Escrever só o nome ({italic}) liga o atributo.

--- {bg=paper..surface}
::: columns {gap=xl}
::: box {bg=accent color=white radius=xl pad="md lg" shadow=lg}
## Cartão quente
Fundo `accent`, cantos `xl`
:::
::: box {border="4 blue" radius=md pad=lg}
## Borda azul {color=blue}
`border="4 blue"` {italic}
:::
::: box {bg=ink..violet color=white radius=full pad="lg xl" align=center}
## Gradiente
`bg=ink..violet` {opacity=0.8}
:::
:::

Atributos de cada bloco

Além dos atributos de estilo, alguns blocos aceitam atributos próprios. Usá-los em outro lugar é erro (F209). Em um @style, todos são aceitos e só valem quando o estilo é aplicado ao bloco certo.

Atributo	Onde	Valores	Padrão	Exemplo
fit	Imagem em bloco	contain (inteira) ou cover (preenche e corta)	contain	{fit=cover}
widths	columns	Números positivos separados por espaço, um por coluna	Colunas iguais	::: columns {widths="2 1"}
cols	grid	Número inteiro de 1 a 12	Número de filhos, de 1 a 3	::: grid {cols=4}
wrap	row	Booleano: quebra os itens em mais de uma linha	Desligado	::: row {wrap}
type	chart	bar, line, area, pie, donut	bar	::: chart {type=line}
legend	chart	Booleano	Ligado com mais de uma série ou em pie/donut	{legend=false}
stacked	chart	Booleano: empilha as séries	Desligado	{stacked}
values	chart	Booleano: mostra os valores no gráfico	Desligado	{values}
colors	chart	Lista de cores separadas por espaço, uma por série	Paleta do tema	{colors="accent blue"}
cover	Separador ---	Booleano: o slide é capa e fica sem cabeçalho e rodapé	Ligado só no primeiro slide	--- {cover}
header	Separador ---	on ou off: mostra ou esconde o cabeçalho neste slide	Ligado, menos na capa	--- {header=off}
footer	Separador ---	on ou off: mostra ou esconde o rodapé neste slide	Ligado, menos na capa	--- {footer=on}

Em widths, as proporções são relativas: "2 1" dá duas partes para a primeira coluna e uma para a segunda. Se a quantidade de valores não bate com a de colunas, o compilador avisa (F302).

A paleta padrão dos gráficos usa, na ordem, accent, blue, green, yellow, violet e coral.

Escalas e unidades

Tamanhos

Usados por size. Também é possível informar pixels de 8 a 400.

Nome	Pixels
xs	20
sm	26
md	32
lg	40
xl	52
2xl	64
3xl	88
4xl	116
5xl	150
6xl	200
7xl	260

::: row {gap=lg valign=bottom}
md {size=md}
xl {size=xl}
3xl {size=3xl}
5xl {size=5xl}
7xl {size=7xl}
:::

Espaçamento

Usados por pad, gap e :: spacer. Também é possível informar pixels de 0 a 600.

Nome	Pixels
none	0
xs	8
sm	16
md	32
lg	48
xl	72
2xl	112
3xl	160

Arredondamento

Usados por radius. Também é possível informar pixels de 0 a 9999.

Nome	Pixels
none	0
sm	8
md	16
lg	28
xl	44
full	9999 (formato de pílula ou círculo)

Pesos

Usados por weight. Também é possível informar números de 100 a 900, de 100 em 100.

Nome	Peso
thin	100
light	300
regular	400
medium	500
semibold	600
bold	700
extrabold	800
black	900

O peso só aparece se a fonte tiver essa variação. Fontes declaradas com @font carregam os pesos listados na definição.

Entrelinha e espaçamento entre letras

Atributo	Palavra	Valor	Faixa numérica
leading	tight	1.05	0.6 a 3 (multiplica o tamanho da fonte)
leading	normal	1.35
leading	loose	1.7
tracking	tight	-0.02 em	-0.2 a 1 (em em)
tracking	normal	0
tracking	wide	0.08 em

Medidas

Usadas por w, h, x e y.

Forma	Exemplo	Significado
Pixels	480 ou 480px	De -4000 a 4000. O sufixo px é opcional.
Porcentagem	50%	De 0% a 100% do espaço disponível.
full	w=full	O mesmo que 100%.
auto	h=auto	Tamanho automático. Só em w e h.

O slide tem 1920×1080 pixels (ou 1440×1080 com @aspect 4:3), e todas as medidas usam esse tamanho, qualquer que seja a tela.

Cores

Usadas por color, bg, border e colors.

Forma	Exemplo	Significado
Token do tema	accent, muted, coral	Cor definida pelo tema ou por @color.
Hexadecimal	#f60, #ff6600, #ff660080	#rgb, #rgba, #rrggbb ou #rrggbbaa.
Opacidade	accent/40, #000000/20	Cor com opacidade de 0 a 100 (%), depois da barra.
Gradiente	ink..violet, accent/80..blue	Duas cores separadas por ... Só em bg.

Tokens disponíveis em todos os temas: bg, text, muted, accent, surface, line, coral, blue, green, yellow, violet, white, black, ink, paper e transparent. Os valores de cada tema estão em Temas embutidos.

Todo token de cor também funciona como estilo: {.coral} é o mesmo que {color=coral}.

::: grid {cols=4 gap=md}
::: box {bg=accent pad=md radius=md}
`accent`
:::
::: box {bg=accent/40 pad=md radius=md}
`accent/40`
:::
::: box {bg=#2f6fdb color=white pad=md radius=md}
`#2f6fdb`
:::
::: box {bg=coral..violet color=white pad=md radius=md}
`coral..violet`
:::
:::