# Snippets, CSS and assets

## Reusable markup with snippets

Create `snippets/link.html`:

```html
<a class="theme-link" href="[[ safe_url(href) ]]" gs-text="label"></a>
```

Call it from a block:

```html
<template gs-component="link" gs-prop-href="block.settings.url" gs-prop-label="block.settings.label"></template>
```

A snippet has an isolated parameter scope. Pass the values it needs explicitly. Global `site`, `page`, `settings` and `locale` remain available. A snippet has no editor entry or independent settings schema; use a block when customers need independently configurable instances.

## Scoped CSS

Put CSS in `assets/theme.css`. The renderer includes theme CSS under an `@scope` boundary identified by `data-loom-theme`. Use theme classes within that boundary, not `body` or editor UI selectors.

```css
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}
.offer-card { padding: 24px; }
```

Use CSS for responsive structure and schema values for editable dimensions. Do not hardcode a radius in CSS and simultaneously promise a schema radius control without using its value. On narrow screens, avoid fixed content widths and test long translations.

## Images and files

The current importer accepts text assets, not PNG/JPEG uploads or custom JavaScript. Reference media-library URLs or HTTPS images. `asset_url` resolves assets included in the installed bundle; it is not permission to read server files. Compiled text assets are copied to `api/public/template-assets/<key>/`.

Loom runs without filesystem or network access. The renderer drops unsupported HTML and event-handler attributes. Inline styles containing URL functions, expressions or imports are filtered by the markup adapter. Put supported CSS in the package stylesheet and verify it in both preview and public output.

## Escaping and URLs

Output is escaped by default. User text containing markup should display as text. Do not introduce raw HTML bypasses for convenience. Use `safe_url` for destinations. It allows HTTP(S), mail, telephone, root-relative and anchor links; it rejects executable schemes, whitespace and backslashes. Snippets only load from the installed package.