git.iko.soy/htmlang
on v2026.04.16.000542 help sign in
htmlang/examples/demo.hl
41 lines 1.4 kB history raw
1@page htmlang Demo
2@let primary #3b82f6
3@let gap 20
5-- reusable card with hover effect
6@fn card $title
7 @el [padding 20, background white, rounded 8, border 1 #e5e7eb, hover:border 1 $primary, transition all 0.15s ease, cursor pointer]
8 @text [bold] $title
9 @children
11-- page layout function
12@fn page-section $title
13 @column [spacing 10]
14 @text [bold, size 24, color #333] $title
15 @children
17@column [max-width 800, center-x, padding 40, spacing $gap]
18 @row [spacing $gap]
19 @column [width fill, spacing 10]
20 @text [bold, size 32] Welcome to htmlang
21 @paragraph
22 A minimalist layout language that compiles to
23 {@text [bold, color $primary] static HTML}.
24 @image [width 80, height 80, rounded 40] https://picsum.photos/80
26 -- cards using @fn with hover
27 @page-section [title Features]
28 @row [wrap, spacing 10]
29 @card [title Simple]
30 Write layouts without CSS
31 @card [title Fast]
32 Compiles to a single HTML file
33 @card [title Minimal]
34 No JavaScript required
36 -- footer with hover button
37 @row [spacing 10]
38 @el [padding 16, background $primary, hover:background #2563eb, active:background #1d4ed8, rounded 8, transition all 0.15s ease, cursor pointer] > @link https://github.com
39 @text [color white, bold] Get Started
40 @el [width fill]
41 @text [color #888] © 2026