Worked 1CL examples
These snippets are compiled and rendered by documentation tests. They illustrate template patterns; retain the matching seeded framework's complete choices and disclosures when integrating them.
Notice with runtime actions
Use custom banner mode to keep preferences and the reopening control maintained by 1Consent. This example keeps localized text, links, and core actions; merge the structure into the existing notice while retaining its category controls, framework disclosures, branding, and configured close affordance.
@view main
<!-- example: notice -->
<section class="brand-notice" role="dialog" aria-modal="false" aria-label="{{ ui.title }}">
<h2>{{ ui.title }}</h2>
<p>{{ ui.description }}</p>
<ul>
[[each link in ui.legalLinks]]
<li><a href="{{ link.url }}">{{ link.label }}</a></li>
[/each]
</ul>
<div class="brand-actions">
<button type="button" data-1c="command:acceptAll">{{ ui.button.acceptAll }}</button>
<button type="button" data-1c="command:rejectAll">{{ ui.button.rejectAll }}</button>
<button type="button" data-1c="view:details">{{ ui.templateLabels.preferencesLink }}</button>
</div>
</section>Add notice-scoped CSS. The existing runtime handles actions without custom scripts.
Category cards and caller-owned children
<!-- example: category-cards -->
<template data-1c-template="category-card">
<section class="brand-category">
<h3>{{ props.title }}</h3>
<div>{{ children }}</div>
</section>
</template>
[[each category in categories]]
<template data-1c-use="category-card" data-1c-title="{{ category.name }}">
<p>{{ category.description }}</p>
<label>
<input type="checkbox" data-1c="consent:gdpr.category" data-1c-id="{{ category.id }}" />
<span>{{ category.name }}</span>
</label>
<ul>
[[each service in category.services]]
<li>{{ service.name }}</li>
[/each]
</ul>
</template>
[/each]This is a GDPR preferences component, not a complete preferences view. Retain Save/Cancel, links, disclosures, and uncategorized services. The mounted runtime owns input state.
Empty-state branching
<!-- example: conditional-categories -->
[[if categories]]
<section>
[[each category in categories]]
<p>{{ category.name }}</p>
[/each]
</section>
[[/if]]
[[if not categories]]
<p>{{ ui.description }}</p>
[[/if]]An empty array takes the negated branch. Categories do not guarantee all services are categorized: preserve uncategorizedServices in a full details view.
Action component with a boolean prop
<!-- example: action-component -->
<template data-1c-template="brand-action">
<button type="button" disabled="{{ props.disabled }}" data-1c="{{ props.action }}">
{{ props.label }}
</button>
</template>
<template data-1c-use="brand-action" data-1c-disabled="false"
data-1c-action="command:rejectAll" data-1c-label="ui.button.rejectAll"></template>False removes disabled, keeping Reject usable. When extracting brand-action.1cl.html, save only the inner button; keep the invocation in the view.