Skip to content

V3 #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jlchilders11 merged 3 commits into from
Mar 16, 2026
Merged

V3 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9e446ed
Story: Add aria labels to buttons (#2185)
jlchilders11 Mar 16, 2026
aac9aed
Bug: Fix class on mailing list header (#2184)
jlchilders11 Mar 16, 2026
d50f702
Add horizontal card component (#2173)
gregjkal Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions core/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1154,6 +1154,14 @@ def get_context_data(self, **kwargs):
"image": "/static/img/v3/demo_page/Calendar.png",
}

context["horizontal_card_data"] = {
"title": "Build anything with Boost",
"text": "Use, modify, and distribute Boost libraries freely. No binary attribution needed.",
"image_url": f"{settings.STATIC_URL}img/checker.png",
"button_url": "#",
"button_label": "See license details",
}

context["demo_cards_carousel_cards"] = [
{
"title": "Get help",
Expand Down
39 changes: 39 additions & 0 deletions static/css/v3/card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,42 @@
border: none;
margin: 0;
}

/* Horizontal card — text + image side by side */

.horizontal-card {
max-width: 459px;
}

.horizontal-card__content-row {
display: flex;
align-items: flex-start;
gap: var(--space-large, 16px);
align-self: stretch;
padding: 0 var(--space-large, 16px);
}

.horizontal-card__text {
flex: 1 0 0;
padding: 0;
color: var(--color-text-secondary, #585a64);
font-family: var(--font-sans, 'Mona Sans VF'), sans-serif;
font-size: var(--font-size-base, 16px);
font-weight: var(--font-weight-regular, 400);
line-height: var(--line-height-default, 1.2);
letter-spacing: var(--letter-spacing-tight, -0.01em);
}

.horizontal-card__image {
flex: 1 0 0;
aspect-ratio: 1 / 1;
border-radius: var(--border-radius-l, 8px);
overflow: hidden;
}

.horizontal-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
9 changes: 9 additions & 0 deletions templates/v3/examples/_v3_example_section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,15 @@ <h4 class="py-large">Card with one button</h4>
{% endwith %}
</div>

<div class="v3-examples-section__block">
<h3>Horizontal Card</h3>
{% with horizontal_card_data as card %}
<div class="v3-examples-section__example-box">
{% include "v3/includes/_horizontal_card.html" with title=card.title text=card.text image_url=card.image_url button_url=card.button_url button_label=card.button_label %}
</div>
{% endwith %}
</div>

<div class="v3-examples-section__block">
<h3>Learn Card</h3>
<div class="v3-examples-section__example-box">
Expand Down
5 changes: 3 additions & 2 deletions templates/v3/includes/_button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@
- error
Defaults to primary
extra classes (optional) : Any extra classes that the button should have, as a string
aria_label (optional): An optional label for assistive technology. Defaults to the button label
Icon must be wrapped in <span class="btn-icon" aria-hidden>...</span>.
Usage: {% include "v3/includes/_button.html" with label="Get started" icon_html='<span class="btn-icon" aria-hidden><i class="fas fa-arrow-right"></i></span>' style="secondary" extra_classes="btn-flex" %}
{% endcomment %}
{% if url %}
<a href="{{ url }}" class="btn btn-{{style|default:"primary"}} {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</a>
<a href="{{ url }}" class="btn btn-{{style|default:"primary"}} {{extra_classes}}" aria-label="{{aria_label|default:label}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</a>
{% else %}
<button type="{{ type|default:'button' }}" class="btn btn-{{style|default:"primary"}} {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</button>
<button type="{{ type|default:'button' }}" class="btn btn-{{style|default:"primary"}} {{extra_classes}}" aria-label="{{aria_label|default:label}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</button>
{% endif %}
6 changes: 3 additions & 3 deletions templates/v3/includes/_button_hero_primary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{% comment %}
V3 foundation button: hero primary (larger, for hero section). Optional leading icon.
Variables: label (required), url (optional), icon_html (optional; HTML for icon, use with |safe), type (optional), extra_classes (optional).
Variables: label (required), url (optional), icon_html (optional; HTML for icon, use with |safe), type (optional), extra_classes (optional), aria_label(optional).
Icon must be wrapped in <span class="btn-icon" aria-hidden>...</span>.
Usage: {% include "v3/includes/_button_hero_primary.html" with label="Get started" icon_html='<span class="btn-icon" aria-hidden><i class="fas fa-arrow-right"></i></span>' %}
{% endcomment %}
{% if url %}
<a href="{{ url }}" class="btn btn-hero btn-primary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</a>
<a href="{{ url }}" aria-label="{{aria_label|default:label}}" class="btn btn-hero btn-primary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</a>
{% else %}
<button type="{{ type|default:'button' }}" class="btn btn-hero btn-primary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</button>
<button type="{{ type|default:'button' }}" aria-label="{{aria_label|default:label}}" class="btn btn-hero btn-primary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</button>
{% endif %}
6 changes: 3 additions & 3 deletions templates/v3/includes/_button_hero_secondary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{% comment %}
V3 foundation button: hero secondary.
Variables: label (required), url (optional), icon_html (optional), type (optional), extra_classes (optional).
Variables: label (required), url (optional), icon_html (optional), type (optional), extra_classes (optional), aria_label (optional).
Usage: {% include "v3/includes/_button_hero_secondary.html" with label="Learn more" %}
{% endcomment %}
{% if url %}
<a href="{{ url }}" class="btn btn-hero btn-secondary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</a>
<a href="{{ url }}" aria-label="{{aria_label|default:label}}" class="btn btn-hero btn-secondary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</a>
{% else %}
<button type="{{ type|default:'button' }}" class="btn btn-hero btn-secondary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</button>
<button type="{{ type|default:'button' }}" aria-label="{{aria_label|default:label}}" class="btn btn-hero btn-secondary {{extra_classes}}">{% if icon_html %}{{ icon_html|safe }}{% endif %}{{ label }}</button>
{% endif %}
34 changes: 34 additions & 0 deletions templates/v3/includes/_horizontal_card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{% comment %}
Horizontal card: title, side-by-side text + image, and CTA button.

Variables:
title (string, required) — card heading
text (string, required) — description text beside the image
image_url (string, required) — URL of the image
image_alt (string, optional) — alt text for image, defaults to ""
button_url (string, optional) — CTA link destination
button_label (string, optional) — CTA button text
button_style (string, optional) — button style variant, defaults to "primary"

Usage:
{% include "v3/includes/_horizontal_card.html" with title="Build anything with Boost" text="Use, modify, and distribute..." image_url="/static/img/example.png" button_url="#" button_label="See license details" %}
{% endcomment %}

<div class="horizontal-card card py-large">
<div class="card__header">
<span class="card__title">{{ title }}</span>
</div>
<hr class="card__hr" />
<div class="horizontal-card__content-row">
<p class="horizontal-card__text">{{ text }}</p>
<div class="horizontal-card__image">
<img src="{{ image_url }}" alt="{{ image_alt|default:'' }}" />
</div>
</div>
{% if button_url and button_label %}
<hr class="card__hr" />
<div class="px-large btn-row">
{% include 'v3/includes/_button.html' with style=button_style url=button_url label=button_label extra_classes="btn-flex" only %}
</div>
{% endif %}
</div>
2 changes: 1 addition & 1 deletion templates/v3/includes/_mailing_list_card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% comment %}Card with an input to sign up for the mailing list{% endcomment %}

<div class="basic-card card py-large">
<div class="card__center">
<div class="card__header">
<span class="card__title">Join the Boost Developers Mailing List</span>
</div>
<hr class="card__hr" />
Expand Down
Loading