feat(primitives): attrs passthrough on Icon, Badge, Box, CheckboxGroup

docs/components.md

@@ -46,6 +46,7 @@ an unstyled element.
 | `variant` | `"neutral"` | |
 | `size` | `"normal"` | Inert on Bootstrap and Foundation |
 | `extra_class` | `""` | |
+| `attrs` | `{}` | Extra HTML attributes — see [Attribute passthrough](primitives.md#attribute-passthrough) |
 
 ### `Cf:Heading` / `<c-cf.heading>`
 
@@ -72,6 +73,7 @@ an unstyled element.
 | `size` | `"normal"` | Inert on Foundation |
 | `label` | `""` | Empty ⇒ `aria-hidden`. Non-empty ⇒ `role="img"` + that name |
 | `extra_class` | `""` | |
+| `attrs` | `{}` | Extra HTML attributes — see [Attribute passthrough](primitives.md#attribute-passthrough) |
 
 cf-ui ships no icons — put your own `<i>` or `<svg>` in the slot.
 
@@ -124,6 +126,7 @@ A labelled input with error display.
 | `selected` | `[]` | List of checked values |
 | `error` | `""` | |
 | `extra_class` / `control_class` | `""` | |
+| `attrs` | `{}` | Extra HTML attributes, on the **wrapper** — not a per-choice `<input>`. See [Attribute passthrough](primitives.md#attribute-passthrough) |
 
 ## Feedback
 

docs/primitives.md

@@ -265,9 +265,14 @@ JinjaX's own arg-filtering routes it straight into that prop before
 caller's real prop, if also passed, wins). This is a JinjaX-level gap, not
 a cf-ui one; never pass one of a component's own prop names through
 `attrs`/`_attrs` — pass it as that prop directly. See
-[Escaping](escaping.md). Ships today on `Button`, `Select`, `Textarea` and
-`FormField` (#76, #77) — the same shape is expected to roll out to the rest
-of Tier 1 as separate follow-up work.
+[Escaping](escaping.md). Ships today on `Button`, `Select`, `Textarea`,
+`FormField` (#76, #77), `Icon`, `Badge`, `Box` and `CheckboxGroup` (#70).
+
+`CheckboxGroup` is the one exception to "the control, not the wrapper": it
+renders N `<input type="checkbox">` elements from `choices`, so there is no
+single control to target. `attrs` lands on the outer wrapper element instead
+(the `field`/`mb-3`/`form-control`/`ui form`/`fieldset` container) — see its
+entry in [Components](components.md#cfcheckboxgroup-c-cfcheckbox-group).
 
 ### Disabled links
 
@@ -290,6 +295,7 @@ so it renders a real `<button disabled>`.
 | `variant` | `"neutral"` | |
 | `size` | `"normal"` | Inert on Bootstrap and Foundation |
 | `extra_class` / `class` | `""` | |
+| `attrs` | `{}` | See [Attribute passthrough](#attribute-passthrough) above |
 | slot | — | The badge text |
 
 Renders a `<span>` on every theme, with no `role` and no ARIA. `role="status"`
@@ -370,6 +376,7 @@ print and high-contrast stylesheets, and its announcement is inconsistent.
 | `size` | `"normal"` | Inert on Foundation; mixed scale on Bootstrap |
 | `label` | `""` | Empty ⇒ decorative. Non-empty ⇒ the accessible name |
 | `extra_class` / `class` | `""` | |
+| `attrs` | `{}` | See [Attribute passthrough](#attribute-passthrough) above. `role`, `aria-label` and `aria-hidden` are reserved — pass `label` instead |
 | slot | — | Your `<i>`, `<svg>`, or `<span>` |
 
 The accessibility decision is most of what this component buys you, and it is
@@ -401,6 +408,7 @@ choose its consumers' icon vendor.
 |---|---|---|
 | `variant` | `"neutral"` | Inert on Bulma — see below |
 | `extra_class` / `class` | `""` | |
+| `attrs` | `{}` | See [Attribute passthrough](#attribute-passthrough) above |
 | slot | — | Arbitrary content |
 
 `box` is a plain bordered or elevated container: one element, no imposed

src/cf_ui/primitives.py

@@ -813,6 +813,14 @@ def validate(component: str, **axes: Any) -> str:
             "aria-describedby",
         }
     ),
+    "icon": frozenset({"class", "role", "aria-label", "aria-hidden"}),
+    "badge": frozenset({"class"}),
+    "box": frozenset({"class"}),
+    # Rendered on the field wrapper, not a per-choice checkbox — see
+    # docs/primitives.md: unlike the other form controls, checkbox-group has
+    # no single control to target (it renders N inputs from `choices`), so
+    # `attrs` lands on the one element the call site actually identifies.
+    "checkbox-group": frozenset({"class"}),
 }
 
 

src/cf_ui/templates/cotton/_themes/bootstrap/badge.html

@@ -1,3 +1,5 @@
+{% load cf_ui %}
 <span
   class="badge{% if variant == 'primary' %} text-bg-primary{% elif variant == 'secondary' %} text-bg-secondary{% elif variant == 'success' %} text-bg-success{% elif variant == 'warning' %} text-bg-warning{% elif variant == 'danger' %} text-bg-danger{% elif variant == 'info' %} text-bg-info{% elif variant == 'neutral' %} text-bg-light{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "badge" attrs %}
 >{{ slot }}</span>

src/cf_ui/templates/cotton/_themes/bootstrap/box.html

@@ -1,7 +1,9 @@
+{% load cf_ui %}
 {% comment %}Bootstrap has no box component. `card` would be wrong — it imposes a
 header/body/footer structure the caller cannot opt out of — so this is the
 utility composition Bootstrap's own docs reach for. `neutral` maps to nothing
 because `.border` already sets the default border colour.{% endcomment %}
 <div
   class="border rounded p-3{% if variant == 'primary' %} border-primary{% elif variant == 'secondary' %} border-secondary{% elif variant == 'success' %} border-success{% elif variant == 'warning' %} border-warning{% elif variant == 'danger' %} border-danger{% elif variant == 'info' %} border-info{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "box" attrs %}
 >{{ slot }}</div>

src/cf_ui/templates/cotton/_themes/bootstrap/checkbox-group.html

@@ -1,4 +1,8 @@
-<div class="mb-3 {{ class }}">
+{% load cf_ui %}
+<div
+  class="mb-3 {{ class }}"
+  {% cf_ui_render_attrs "checkbox-group" attrs %}
+>
   <label class="form-label">{{ label }}</label>
   <div{% if control_class %} class="{{ control_class }}"{% endif %}>
     {% for choice in choices %}

src/cf_ui/templates/cotton/_themes/bootstrap/icon.html

@@ -1,4 +1,6 @@
+{% load cf_ui %}
 <span
   class="{% if size == 'small' %}small{% elif size == 'large' %}fs-4{% endif %}{% if class %} {{ class }}{% endif %}"
   {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  {% cf_ui_render_attrs "icon" attrs %}
 >{{ slot }}</span>

src/cf_ui/templates/cotton/_themes/bulma/badge.html

@@ -1,3 +1,5 @@
+{% load cf_ui %}
 <span
   class="tag{% if variant == 'primary' %} is-primary{% elif variant == 'secondary' %} is-link{% elif variant == 'success' %} is-success{% elif variant == 'warning' %} is-warning{% elif variant == 'danger' %} is-danger{% elif variant == 'info' %} is-info{% endif %}{% if size == 'normal' %} is-medium{% elif size == 'large' %} is-large{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "badge" attrs %}
 >{{ slot }}</span>

src/cf_ui/templates/cotton/_themes/bulma/box.html

@@ -1,4 +1,8 @@
+{% load cf_ui %}
 {% comment %}Bulma ships no colour modifier for `.box`, so `variant` is inert here.
 `has-background-*` exists but sets a saturated background without touching text
 colour, which would render unreadable rather than themed.{% endcomment %}
-<div class="box{% if class %} {{ class }}{% endif %}">{{ slot }}</div>
+<div
+  class="box{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "box" attrs %}
+>{{ slot }}</div>

src/cf_ui/templates/cotton/_themes/bulma/checkbox-group.html

@@ -1,4 +1,8 @@
-<div class="field {{ class }}">
+{% load cf_ui %}
+<div
+  class="field {{ class }}"
+  {% cf_ui_render_attrs "checkbox-group" attrs %}
+>
   <label class="label">{{ label }}</label>
   <div class="control{% if control_class %} {{ control_class }}{% endif %}">
     {% for choice in choices %}

src/cf_ui/templates/cotton/_themes/bulma/icon.html

@@ -1,4 +1,6 @@
+{% load cf_ui %}
 <span
   class="icon{% if size == 'small' %} is-small{% elif size == 'large' %} is-large{% endif %}{% if class %} {{ class }}{% endif %}"
   {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  {% cf_ui_render_attrs "icon" attrs %}
 >{{ slot }}</span>

src/cf_ui/templates/cotton/_themes/daisy/badge.html

@@ -1,3 +1,5 @@
+{% load cf_ui %}
 <span
   class="badge{% if variant == 'primary' %} badge-primary{% elif variant == 'secondary' %} badge-secondary{% elif variant == 'success' %} badge-success{% elif variant == 'warning' %} badge-warning{% elif variant == 'danger' %} badge-error{% elif variant == 'info' %} badge-info{% elif variant == 'neutral' %} badge-neutral{% endif %}{% if size == 'small' %} badge-sm{% elif size == 'large' %} badge-lg{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "badge" attrs %}
 >{{ slot }}</span>

src/cf_ui/templates/cotton/_themes/daisy/box.html

@@ -1,8 +1,10 @@
+{% load cf_ui %}
 {% comment %}The border colour lives entirely in the variant, `neutral` included.
 Splitting it — a default colour in the base and an override in the variant —
 puts two border-color utilities of equal specificity on one element, and which
 one wins is then decided by Tailwind's emission order rather than by the class
 map.{% endcomment %}
 <div
   class="rounded-box border bg-base-100 p-4{% if variant == 'primary' %} border-primary{% elif variant == 'secondary' %} border-secondary{% elif variant == 'success' %} border-success{% elif variant == 'warning' %} border-warning{% elif variant == 'danger' %} border-error{% elif variant == 'info' %} border-info{% else %} border-base-300{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "box" attrs %}
 >{{ slot }}</div>

src/cf_ui/templates/cotton/_themes/daisy/checkbox-group.html

@@ -1,4 +1,8 @@
-<div class="form-control {{ class }}">
+{% load cf_ui %}
+<div
+  class="form-control {{ class }}"
+  {% cf_ui_render_attrs "checkbox-group" attrs %}
+>
   <label class="label"><span class="label-text">{{ label }}</span></label>
   <div
     class="flex flex-wrap gap-4{% if control_class %} {{ control_class }}{% endif %}"

src/cf_ui/templates/cotton/_themes/daisy/icon.html

@@ -1,4 +1,6 @@
+{% load cf_ui %}
 <span
   class="inline-flex items-center justify-center{% if size == 'small' %} text-[0.75em]{% elif size == 'large' %} text-[1.5em]{% endif %}{% if class %} {{ class }}{% endif %}"
   {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  {% cf_ui_render_attrs "icon" attrs %}
 >{{ slot }}</span>

src/cf_ui/templates/cotton/_themes/fomantic/badge.html

@@ -1,3 +1,5 @@
+{% load cf_ui %}
 <span
   class="ui label{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} green{% elif variant == 'warning' %} yellow{% elif variant == 'danger' %} red{% elif variant == 'info' %} teal{% endif %}{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "badge" attrs %}
 >{{ slot }}</span>

src/cf_ui/templates/cotton/_themes/fomantic/box.html

@@ -1,8 +1,10 @@
+{% load cf_ui %}
 {% comment %}Real hues, not the literal words `primary` and `secondary`. Those two are
 Fomantic's *emphasis* variation on a segment rather than colours —
 `.ui.primary.segment` renders a subdued treatment, not a brand fill — so
 mapping the variant onto them would silently produce the wrong thing on the one
 theme where the name happens to match.{% endcomment %}
 <div
   class="ui segment{% if variant == 'primary' %} blue{% elif variant == 'secondary' %} grey{% elif variant == 'success' %} green{% elif variant == 'warning' %} yellow{% elif variant == 'danger' %} red{% elif variant == 'info' %} teal{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "box" attrs %}
 >{{ slot }}</div>

src/cf_ui/templates/cotton/_themes/fomantic/checkbox-group.html

@@ -1,4 +1,8 @@
-<div class="ui form {{ class }}">
+{% load cf_ui %}
+<div
+  class="ui form {{ class }}"
+  {% cf_ui_render_attrs "checkbox-group" attrs %}
+>
   <div
     class="grouped fields{% if control_class %} {{ control_class }}{% endif %}{% if error %} error{% endif %}"
   >

src/cf_ui/templates/cotton/_themes/fomantic/icon.html

@@ -1,4 +1,6 @@
+{% load cf_ui %}
 <span
   class="ui text{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %}{% if class %} {{ class }}{% endif %}"
   {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  {% cf_ui_render_attrs "icon" attrs %}
 >{{ slot }}</span>

src/cf_ui/templates/cotton/_themes/foundation/badge.html

@@ -1,3 +1,5 @@
+{% load cf_ui %}
 <span
   class="label{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} success{% elif variant == 'warning' %} warning{% elif variant == 'danger' %} alert{% elif variant == 'info' %} secondary{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "badge" attrs %}
 >{{ slot }}</span>

src/cf_ui/templates/cotton/_themes/foundation/box.html

@@ -1,6 +1,8 @@
+{% load cf_ui %}
 {% comment %}Foundation spells danger `alert` and ships no `info` hue, so `info`
 folds onto `secondary` — the same two substitutions the badge partial makes for
 this theme.{% endcomment %}
 <div
   class="callout{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} success{% elif variant == 'warning' %} warning{% elif variant == 'danger' %} alert{% elif variant == 'info' %} secondary{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "box" attrs %}
 >{{ slot }}</div>

src/cf_ui/templates/cotton/_themes/foundation/checkbox-group.html

@@ -1,7 +1,11 @@
 {% comment %} Foundation groups checkboxes in a fieldset/legend and pairs a *sibling*
    `label[for]` with each input rather than wrapping it, so every box needs an
 id of its own — a shared one would point every label at the first input. {% endcomment %}
-<fieldset class="fieldset {{ class }}">
+{% load cf_ui %}
+<fieldset
+  class="fieldset {{ class }}"
+  {% cf_ui_render_attrs "checkbox-group" attrs %}
+>
   <legend>{{ label }}</legend>
   <div class="{{ control_class }}">
     {% for choice in choices %}

src/cf_ui/templates/cotton/_themes/foundation/icon.html

@@ -1,4 +1,6 @@
+{% load cf_ui %}
 <span
   class="{% if class %}{{ class }}{% endif %}"
   {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  {% cf_ui_render_attrs "icon" attrs %}
 >{{ slot }}</span>

src/cf_ui/templates/cotton/cf/badge.html

@@ -1,4 +1,9 @@
-<c-vars variant="neutral" size="normal" class="" />
+<c-vars
+  variant="neutral"
+  size="normal"
+  class=""
+  attrs="{}"
+/>
 {% load cf_ui %}
 {% cf_ui_validate "badge" variant=variant size=size %}{% cf_ui_theme_path "badge" as cf_ui_partial %}
 {% include cf_ui_partial %}

src/cf_ui/templates/cotton/cf/box.html

@@ -1,4 +1,8 @@
-<c-vars variant="neutral" class="" />
+<c-vars
+  variant="neutral"
+  class=""
+  attrs="{}"
+/>
 {% load cf_ui %}
 {% cf_ui_validate "box" variant=variant %}{% cf_ui_theme_path "box" as cf_ui_partial %}
 {% include cf_ui_partial %}

src/cf_ui/templates/cotton/cf/checkbox-group.html

@@ -6,6 +6,7 @@
   selected="[]"
   control_class=""
   class=""
+  attrs="{}"
 />
 {% load cf_ui %}
 {% cf_ui_theme_path "checkbox-group" as cf_ui_partial %}

src/cf_ui/templates/cotton/cf/icon.html

@@ -1,4 +1,9 @@
-<c-vars size="normal" label="" class="" />
+<c-vars
+  size="normal"
+  label=""
+  class=""
+  attrs="{}"
+/>
 {% load cf_ui %}
 {% cf_ui_validate "icon" size=size %}{% cf_ui_theme_path "icon" as cf_ui_partial %}
 {% include cf_ui_partial %}

src/cf_ui/templates/jinja/bootstrap/Badge.jinja

@@ -1,11 +1,13 @@
-{#def content="", variant="neutral", size="normal", extra_class="" #}
+{#def content="", variant="neutral", size="normal", extra_class="", attrs={} #}
 {% autoescape true %}
   {% set content = content if content is defined else "" %}
   {% set variant = variant if variant is defined else "neutral" %}
   {% set size = size if size is defined else "normal" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set attrs = attrs if attrs is defined else {} %}
   {{- cf_ui_validate("badge", variant=variant, size=size) -}}
   <span
     class="badge{% if variant == 'primary' %} text-bg-primary{% elif variant == 'secondary' %} text-bg-secondary{% elif variant == 'success' %} text-bg-success{% elif variant == 'warning' %} text-bg-warning{% elif variant == 'danger' %} text-bg-danger{% elif variant == 'info' %} text-bg-info{% elif variant == 'neutral' %} text-bg-light{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {{- cf_ui_render_attrs("badge", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}

src/cf_ui/templates/jinja/bootstrap/Box.jinja

@@ -1,14 +1,16 @@
-{#def content="", variant="neutral", extra_class="" #}
+{#def content="", variant="neutral", extra_class="", attrs={} #}
 {% autoescape true %}
   {% set content = content if content is defined else "" %}
   {% set variant = variant if variant is defined else "neutral" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set attrs = attrs if attrs is defined else {} %}
   {{ cf_ui_validate("box", variant=variant) }}
   {# Bootstrap has no box component. `card` would be wrong — it imposes a
    header/body/footer structure the caller cannot opt out of — so this is the
    utility composition Bootstrap's own docs reach for. `neutral` maps to
    nothing because `.border` already sets the default border colour. #}
   <div
     class="border rounded p-3{% if variant == 'primary' %} border-primary{% elif variant == 'secondary' %} border-secondary{% elif variant == 'success' %} border-success{% elif variant == 'warning' %} border-warning{% elif variant == 'danger' %} border-danger{% elif variant == 'info' %} border-info{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {{- cf_ui_render_attrs("box", attrs) }}
   >{{ content }}</div>
 {% endautoescape %}

src/cf_ui/templates/jinja/bootstrap/CheckboxGroup.jinja

@@ -1,11 +1,15 @@
-{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
+{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="", attrs={} #}
 {% autoescape true %}
   {% set choices = choices if choices is defined else [] %}
   {% set selected = selected if selected is defined else [] %}
   {% set error = error if error is defined else "" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
   {% set control_class = control_class if control_class is defined else "" %}
-  <div class="mb-3 {{ extra_class }}">
+  {% set attrs = attrs if attrs is defined else {} %}
+  <div
+    class="mb-3 {{ extra_class }}"
+    {{- cf_ui_render_attrs("checkbox-group", attrs) }}
+  >
     <label class="form-label">{{ label }}</label>
     <div{% if control_class %} class="{{ control_class }}"{% endif %}>
       {% for choice in choices %}

src/cf_ui/templates/jinja/bootstrap/Icon.jinja

@@ -1,12 +1,14 @@
-{#def content="", size="normal", label="", extra_class="" #}
+{#def content="", size="normal", label="", extra_class="", attrs={} #}
 {% autoescape true %}
   {% set content = content if content is defined else "" %}
   {% set size = size if size is defined else "normal" %}
   {% set label = label if label is defined else "" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set attrs = attrs if attrs is defined else {} %}
   {{ cf_ui_validate("icon", size=size) }}
   <span
     class="{% if size == 'small' %}small{% elif size == 'large' %}fs-4{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
     {%- if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+    {{- cf_ui_render_attrs("icon", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}

src/cf_ui/templates/jinja/bulma/Badge.jinja

@@ -1,11 +1,13 @@
-{#def content="", variant="neutral", size="normal", extra_class="" #}
+{#def content="", variant="neutral", size="normal", extra_class="", attrs={} #}
 {% autoescape true %}
   {% set content = content if content is defined else "" %}
   {% set variant = variant if variant is defined else "neutral" %}
   {% set size = size if size is defined else "normal" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set attrs = attrs if attrs is defined else {} %}
   {{- cf_ui_validate("badge", variant=variant, size=size) -}}
   <span
     class="tag{% if variant == 'primary' %} is-primary{% elif variant == 'secondary' %} is-link{% elif variant == 'success' %} is-success{% elif variant == 'warning' %} is-warning{% elif variant == 'danger' %} is-danger{% elif variant == 'info' %} is-info{% endif %}{% if size == 'normal' %} is-medium{% elif size == 'large' %} is-large{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {{- cf_ui_render_attrs("badge", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}

src/cf_ui/templates/jinja/bulma/Box.jinja

@@ -1,11 +1,15 @@
-{#def content="", variant="neutral", extra_class="" #}
+{#def content="", variant="neutral", extra_class="", attrs={} #}
 {% autoescape true %}
   {% set content = content if content is defined else "" %}
   {% set variant = variant if variant is defined else "neutral" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set attrs = attrs if attrs is defined else {} %}
   {{ cf_ui_validate("box", variant=variant) }}
   {# Bulma ships no colour modifier for `.box`, so `variant` is inert here.
    `has-background-*` exists but sets a saturated background without touching
    text colour, which would render unreadable rather than themed. #}
-  <div class="box{% if extra_class %} {{ extra_class }}{% endif %}">{{ content }}</div>
+  <div
+    class="box{% if extra_class %} {{ extra_class }}{% endif %}"
+    {{- cf_ui_render_attrs("box", attrs) }}
+  >{{ content }}</div>
 {% endautoescape %}