|
1 | 1 | {% comment %} |
2 | | - Basic Card — base template for simple header + body + CTA cards. |
3 | | - Can be used directly via {% include %} for a title/text/buttons card, |
4 | | - or extended via {% extends %} + block overrides for a custom body. |
| 2 | + Basic Card — simple header + body + optional CTA buttons. |
5 | 3 |
|
6 | | - Variables (used by default block content): |
7 | | - title (string, required for default header) |
8 | | - text (string, required for default body) |
| 4 | + Variables: |
| 5 | + title (string, required) |
| 6 | + text (string, required) |
9 | 7 | theme (string, optional) — "green", "yellow", or "teal" — applies an accent background colour |
10 | | - primary_button_url (string, optional) — when url+label are both set, renders a primary button in the footer |
| 8 | + primary_button_url (string, optional) — paired with primary_button_label |
11 | 9 | primary_button_label (string, optional) |
12 | | - secondary_button_url (string, optional) — when url+label are both set, renders a secondary button in the footer |
| 10 | + secondary_button_url (string, optional) — paired with secondary_button_label |
13 | 11 | secondary_button_label (string, optional) |
14 | 12 |
|
15 | | - Blocks (override when extending): |
16 | | - extra_classes — appended to outer `<div class="basic-card card ...">`; include a leading space |
17 | | - header_content — everything inside `.card__header`; override to swap the title tag (e.g. <h2>) |
18 | | - card_title — title text only; keeps the default `<span class="card__title">` wrapper |
19 | | - body_classes — replaces `.card__column` modifier classes; default: "px-large" |
20 | | - body — content inside the body column; default: <span>{{ text }}</span> |
21 | | - |
22 | | - Usage (direct include): |
| 13 | + Usage: |
23 | 14 | {% include "v3/includes/_basic_card.html" with title="..." text="..." primary_button_url="..." primary_button_label="..." %} |
24 | | - |
25 | | - Usage (extend): |
26 | | - {% extends "v3/includes/_basic_card.html" %} |
27 | | - {% block body %}<img src="..." alt="">{% endblock %} |
28 | 15 | {% endcomment %} |
29 | | -<div class="basic-card card {% if theme %}basic-card--{{ theme }}{% endif %} {% block extra_classes %}{% endblock %}"> |
| 16 | +<div class="basic-card card {% if theme %}basic-card--{{ theme }}{% endif %} "> |
30 | 17 | <div class="card__header"> |
31 | | - {% block header_content %} |
32 | | - <span class="card__title"> |
33 | | - {% block card_title %}{{ title }}{% endblock %} |
34 | | - </span> |
35 | | - {% endblock %} |
| 18 | + <span class="card__title">{{ title }}</span> |
36 | 19 | </div> |
37 | 20 | <hr class="card__hr" aria-hidden="true" /> |
38 | | - <div class="card__column {% block body_classes %}px-large{% endblock %}"> |
39 | | - {% block body %}<span>{{ text }}</span>{% endblock %} |
| 21 | + <div class="card__column px-large"> |
| 22 | + <span>{{ text }}</span> |
40 | 23 | </div> |
41 | 24 | {% if primary_button_url and primary_button_label or secondary_button_url and secondary_button_label %} |
42 | 25 | <hr class="card__hr" aria-hidden="true" /> |
|
0 commit comments