canonical / canonical/vanilla-framework
[Extra arguments]: Basic/Divided sections
- 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
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