canonical / canonical/vanilla-framework

[Extra arguments]: Basic/Divided sections

Open
#5,790 4 comments 0 reactions 0 assignees View on GitHub
Priority: Low Tier: Sites WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Component/pattern to amend

Basic & Divided sections

## Visual

N/A

## Context

During a BAU I was requested to include custom section IDs, in the case of divided and basic sections, I haven't found a way to do so on the title of the section.

My code snippet:

```python

{{ vf_divided_section(
title={"text": "NVIDIA DRIVE"},
blocks=[
{
"type": "description-block",
"items": [
{
"type": "logo-block",
"item": {
"logos": [
{
"attrs": image(
url="https://assets.ubuntu.com/v1/1f419e4d-accelerated_by_nvidia.png",
alt="NVIDIA DRIVE",
width="378",
height="312",
hi_def=True,
loading="lazy",
attrs={"class": "p-image-container__image"},
output_mode="attrs"
)
}
]
}
},
{
"type": "description",
"item": {
"type": "html",
"content": (
'

Ubuntu is the open source software foundation for NVIDIA DRIVE®.

'
'

Canonical provides the production-grade Linux for NVIDIA DRIVE platforms. Ubuntu delivers a secure, maintained and widely adopted software environment that enables software-defined vehicle developers to deploy immersive experiences and autonomous driving applications at scale.

'
)
}
}
]
},
{
"type": "divided-block",
"bullet_type": "none",
"items": [
{
"contents": [
{
"type": "cta-block",
"padding": "shallow",
"item": {
"link": {
"content_html": "Get in touch to learn more about Ubuntu and NVIDIA DRIVE ›",
"attrs": {
"href": "/contact-us",
"class": "js-invoke-modal",
"aria-controls": "contact-modal"
}
}
}
},
{
"type": "cta-block",
"padding": "shallow",
"item": {
"link": {
"content_html": "Explore Canonical’s automotive solutions ›",
"attrs": {
"href": "https://canonical.com/solutions/automotive"
}
}
}
}
]
}
]
}
]
) }}
```

### Possible solutions

1. Accept argument `attrs`:
```diff
title={"text": "NVIDIA DRIVE"},
+ attrs={"id": "nvidia-drive"},
```
2. Allow for HTML title:
```diff
- title={"text": "NVIDIA DRIVE"},
+ title_html="

NVIDIA DRIVE

"
```

Contributor guide

Open the contributing guide

Research direction

Start by locating the Basic and Divided section component implementations and how their title argument is rendered. Confirm the chosen API supports a custom section ID without breaking existing titles, and verify the rendered heading or section output for both variants.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.