UIkit Components

Renders social icons from a SocialLinks object. One source of truth: drop a key, the icon disappears. Three icon variants live under /public/social-icons/{variant}/.

<UkSocialLinks
  links={siteSettings.social}
  siteName={siteSettings.siteName}
  variant="circle"      // 'original' | 'circle' | 'shape-only'
  color="white"         // optional: recolors via CSS mask
  iconSize={36}
/>

variant: original (default, full brand colors)

variant: circle

variant: shape-only

The color prop: CSS mask

<img src="...svg"> is a black-box from CSS, you cannot recolor it from outside. When color is set, we render a <span> with mask-image: url(svg) and background-color. The SVG becomes a stencil, the background is the color.

⚠ SVG authoring requirements

• Carved areas must be real transparency. An inner shape "painted white over black" is opaque to the mask → renders as a solid blob. Use fill-rule="evenodd" or an SVG <mask> to subtract the inner path.
• No background frames in shape-only/. If the SVG ships with a colored rect around the mark, mask renders a filled square. Strip backgrounds before saving.
• Closing tag must be plain </svg>, no trailing attributes. Some icon-pack exports ship a malformed </svg fill="currentColor"> which breaks SVG-as-mask loading entirely.

The list view of a collection, from the booking apps (Airbnb experiences): a picture with its own round corners beside the text, no card around the row, the name first and large, one or two small grey lines, a label riding on the picture as a white chip. The picture is a share of the row, never px, so the text always has room.

When to use

The list side of a grid / list toggle (UkToggleList), or a list that reads better as rows (the blog's latest posts). Not for a grid of cards (that is the demo's own card), and not for text that must be read whole: the description is cut at two lines and off on a phone.

הכי פופולרי

חצי-יום התחדשות

4 שעות · 1 איש

1,290 ₪

ארבע שעות מלאות של ספא: הידרותרפיה, עיסוי החתימה, וסיום של 60 דקות מנוחה עם תה ופירות. החבילה הקלאסית, אם זה הביקור הראשון שלכם אצלנו, התחילו כאן.

יום מלא

בריחה ליום שלם

8 שעות · 1 איש

2,490 ₪

שמונה שעות. כל הטיפולים שאתם רוצים. שתי ארוחות. גישה לכל הסוויטות. בריחה אמיתית מהיומיום, בלי לעזוב את תל אביב.

Code

<div className="uk-list-rows">            {/* + uk-list-rows-2@m: two columns from 960 */}
  {list.map((p) => (
    <article key={p.slug} className="uk-list-row uk-card-link">
      <div className="uk-list-row__media">
        <img src={p.image} alt={p.imageAlt} loading="lazy" />
        <span className="uk-list-row__chip">{p.eyebrow}</span>
      </div>
      <div className="uk-list-row__body">
        <h3><Link href={`${ROOT}/packages/${p.slug}`} className="uk-card-link__target">{p.title}</Link></h3>
        <p className="uk-list-row__meta">{p.duration} · {p.persons}</p>
        <p className="uk-list-row__meta">{p.price}</p>
        <p className="uk-list-row__desc">{p.description}</p>
      </div>
    </article>
  ))}
</div>

Classes

• uk-list-rowsthe stack
  A column of rows, 28px apart, 40px from 768.
• uk-list-rows-2@mwith uk-list-rows
  Two columns of rows from 960 (gap 40 / 48). The half-width row steps down: titles 1.25rem, meta 0.875rem.
• uk-list-row<article>
  Picture beside text, centred, no card around it (no surface, border or shadow). Gap 16, 32 from 768, 48 from 1200.
• uk-list-row__media<div>
  The picture: 40% of the row and square on a phone, 34% and 16:10 from 768; its own rounded corners; the img covers it and zooms to 1.04 on hover.
• uk-list-row__chip<span>
  A white label on the picture, at the top end corner. One line, cut with "…" past the picture's width.
• uk-list-row__body<div>
  The text column. Its h2 / h3 is the name: 1.0625rem, 1.5rem from 768, 1.75rem from 1200, two lines at most, underlined while the row is hovered.
• uk-list-row__meta<p>
  A small grey line (0.875rem, 0.9375rem from 768). One line, cut with "…". One or two per row.
• uk-list-row__desc<p>
  Optional. Off on a phone; from 768 two lines at most, 56ch wide.

• עיצוב לפי שפת המותג של העסק
• אנימציות בגלילה, למי שרוצה חוויה מרשימה
• שורה עם קישור או בלי

UkCheck is the V alone, the one drawing of it on the site: use it wherever a line says "included". Tokens: --uk-check-size, --uk-check-color, --uk-check-list-gap.

A layer over something that is still loading (an iframe, a map embed, a video, a form on its way), a spinner on it, and a fade once it is ready. done fades it out and keeps it in the DOM, so a second load brings it back. The parent is the positioning box (position: relative). When it is done is the caller's call: UkLiveFrame (the demos on /works) lifts it once the demo has loaded and marked <html data-uk-ready> (uk_global_init, after the page's animations are bound). The load alone came too early: the entrance elements were still hidden, a blank hero.

<div className="relative">
  <iframe src="…" onLoad={() => setReady(true)} />
  <UkLoader done={ready} />                 // the page ground + spinner
</div>

<UkLoader look="veil" done={ready} />       // over a poster: veil + spinner in a chip

טוען

טוען

Load again

פס טאבים מתחת לנאבבר שעובר בין עמודים של אותה תיקייה. הטאב של העמוד הנוכחי מסומן לבד (aria-current): קו ב-primary מתחתיו, וב-hover קו ב-40% שלו. הקו תמיד שם, שקוף, אז אין קפיצה בין הטאבים. בשימוש: עמודי /webflow ו-/tags. הקוד: components/studio/WebflowTabs, Tailwind בתוכו, בלי קובץ CSS.

Rich hover tooltip (image + title + badge) over any trigger, on Tippy (the project's one tooltip engine). Desktop only: a tap on a phone shows nothing.

<UkTooltipCard img="/preview.jpg" title="Munio" subtitle="by Studio" badge="$49" tags={["WordPress"]}>
  <img src="/thumb.jpg" className="rounded cursor-pointer" />
</UkTooltipCard>