# Edit this page: the result on the right follows. Custom comes from custom.arcm
[import = Custom: "@/custom.arcm" !]
${ const steps = ["Write .arcm", "Run it", "Get HTML"]; }$

[h1]Hello, ArcMoon[end:h1]
[Custom = title: "A component"]It lives in custom.arcm.[end:Custom]
[ol]
  [for-each = ${ steps }$, as: "step"]
    [li]${ step }$[end:li]
  [end:for-each]
[end:ol]

# A component: main.arcm imports it as Custom, passes a title, and puts text in its slot
${ const { title = "Card" } = ArcMoon.props(); }$

[section = class: "card"]
  [h2]${ title }$[end:h2]
  [slot!]
[end:section]

[style]
  .card { margin: 12px 0; padding: 12px 16px; border: 2px solid #d7263d; border-radius: 12px; }
  h2 { margin: 0 0 4px; color: #d7263d; }
[end:style]