تخطَّ إلى المحتوى
English
المحتويات

Reference

Tag reference

13 built-in hk-* tags. Write props as kebab-case attributes (padding-y sets the prop paddingY). A responsive prop also takes tablet-<attr> (≤ 1023px) and mobile-<attr> (≤ 639px); a prefix on any other prop is SN2004. Unknown props are SN2004, missing required props SN2005, children a tag does not accept SN2006.

Every tag also accepts the passthrough attributes class, id, role, title, data-* and aria-*, written on its root element (class and id reduced to safe tokens; data-hk-* is reserved and dropped). They are not listed per tag.

Colour props take #hex or theme:<token> (e.g. theme:accent → var(--hk-color-accent)); anything else is ignored. Number props are clamped to their range when rendered.

Category Tags
layout hk-section hk-container hk-stack hk-grid
typography hk-heading hk-text hk-badge
media hk-image
ui hk-button hk-card
commerce hk-price hk-product-card hk-product-grid

Built into the language (not in the registry): <hk-schema> (settings JSON), <hk-slot name="content" /> and <hk-sections /> (layout and templates only), <hk-block of="{{ block }}" /> (renders a block inside a section). See language.md.

<hk-section>

Section · قسم
Category layout
Children any content (elements, hk-* tags, text)
Responsive props padding-y
Attribute Type Default Responsive Options / range Label (en · ar)
full-bleed boolean false no — Full bleed · بعرض الشاشة
background color — no — Background · الخلفية
padding-y number 64 yes: tablet-padding-y mobile-padding-y min 0, max 240 Vertical padding · المسافة الرأسية

<hk-container>

Container · حاوية
Category layout
Children any content (elements, hk-* tags, text)
Responsive props padding-x
Attribute Type Default Responsive Options / range Label (en · ar)
max-width number — no min 200, max 1920 Max width · أقصى عرض
padding-x number 16 yes: tablet-padding-x mobile-padding-x min 0, max 120 Horizontal padding · المسافة الأفقية

<hk-stack>

Stack · صف/عمود
Category layout
Children any content (elements, hk-* tags, text)
Responsive props direction gap
Attribute Type Default Responsive Options / range Label (en · ar)
direction select column yes: tablet-direction mobile-direction row column Direction · الاتجاه
gap number 16 yes: tablet-gap mobile-gap min 0, max 160 Gap · المسافة
align select — no start center end stretch Align · المحاذاة
justify select — no start center end between Justify · التوزيع
wrap boolean false no — Wrap · التفاف

<hk-grid>

Grid · شبكة
Category layout
Children any content (elements, hk-* tags, text)
Responsive props columns gap
Attribute Type Default Responsive Options / range Label (en · ar)
columns range 3 yes: tablet-columns mobile-columns min 1, max 12 Columns · الأعمدة
gap number 24 yes: tablet-gap mobile-gap min 0, max 160 Gap · المسافة
min-item number — no min 80, max 600 Min item width · أقل عرض للعنصر

<hk-heading>

Heading · عنوان
Category typography
Children none (self-closing: <hk-heading … />)
Responsive props size
Attribute Type Default Responsive Options / range Label (en · ar)
text text `` no — Text · النص
level select h2 no h1 h2 h3 h4 Level · المستوى
size number — yes: tablet-size mobile-size min 12, max 160 Size · الحجم
align select — no start center end Align · المحاذاة
color color — no — Colour · اللون

<hk-text>

Text · نص
Category typography
Children none (self-closing: <hk-text … />)
Responsive props size
Attribute Type Default Responsive Options / range Label (en · ar)
text textarea `` no — Text · النص
size number — yes: tablet-size mobile-size min 10, max 64 Size · الحجم
align select — no start center end Align · المحاذاة
color color — no — Colour · اللون

<hk-badge>

Badge · شارة
Category typography
Children text and {{ }}
Responsive props none
Attribute Type Default Responsive Options / range Label (en · ar)
text text — no — Text · النص
tone select accent no accent neutral success warning Tone · اللون

<hk-image>

Image · صورة
Category media
Children none (self-closing: <hk-image … />)
Responsive props none
Attribute Type Default Responsive Options / range Label (en · ar)
src image — no — Image · الصورة
alt text `` no — Alt text · وصف الصورة
width number — no min 16, max 2400 Width · العرض
aspect-ratio select — no 1/1 4/5 3/4 16/9 21/9 Aspect ratio · النسبة
fit select cover no cover contain Fit · الملاءمة
loading select lazy no lazy eager Loading · التحميل
radius number — no min 0, max 200 Radius · استدارة

<hk-button>

Button · زر
Category ui
Children none (self-closing: <hk-button … />)
Responsive props none
Attribute Type Default Responsive Options / range Label (en · ar)
label text `` no — Label · النص
href link # no — Link · الرابط
variant select solid no solid outline ghost Style · النمط
size select md no sm md lg Size · الحجم

<hk-card>

Card · كارت
Category ui
Children any content (elements, hk-* tags, text)
Responsive props padding
Attribute Type Default Responsive Options / range Label (en · ar)
background color — no — Background · الخلفية
radius number 12 no min 0, max 64 Radius · استدارة
padding number 16 yes: tablet-padding mobile-padding min 0, max 96 Padding · الحشو
border boolean false no — Border · حد
shadow select none no none sm md lg Shadow · ظل

<hk-price>

Price · السعر
Category commerce
Children none (self-closing: <hk-price … />)
Responsive props none
Attribute Type Default Responsive Options / range Label (en · ar)
amount number — no — Price · السعر
compare-at number — no — Compare at · السعر قبل الخصم

<hk-product-card>

Product card · كارت منتج
Category commerce
Children none (self-closing: <hk-product-card … />)
Responsive props none
Attribute Type Default Responsive Options / range Label (en · ar)
product product — no — Product · المنتج

<hk-product-grid>

Product grid · شبكة منتجات
Category commerce
Children none (self-closing: <hk-product-grid … />)
Responsive props columns
Attribute Type Default Responsive Options / range Label (en · ar)
products collection — no — Products · المنتجات
limit range 8 no min 1, max 48 Count · العدد
columns range 4 yes: tablet-columns mobile-columns min 1, max 6 Columns · الأعمدة
Tag reference · Sneferu | هيكانا