canonical / canonical/vanilla-framework

[block margin amendment]: <Basic section>

Open
#5,633 3 comments 0 reactions 0 assignees View on GitHub
Priority: High 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 section](https://vanillaframework.io/docs/patterns/basic-section)

## Visual

Remove shallow bottom margin from these three blocks:
- [List](https://vanillaframework.io/docs/patterns/basic-section#:~:text=for%20more%20info.-,List,-Lists%20use%20the)

Image

- [Code](https://vanillaframework.io/docs/patterns/basic-section#:~:text=nested%20list%20configuration.-,Code,-The%20code%20pattern)

Image

- [Notification](https://vanillaframework.io/docs/patterns/basic-section#:~:text=for%20more%20info.-,Notification,-The%20Notification%20block)

Image

## Context

In what context does your amendment solve a problem?

**Concept of blocks**

- Blocks in the Basic Section is a flexible content unit (e.g. text, image, logo blocks, list, CTA) placed inside the section’s items, with optional padding control to adjust spacing without affecting the whole pattern.

**Issue**

- Some components (three in this case) come with baked-in shallow margin.
- This makes it impossible to adjust spacing at the pattern level, which makes duplicated spacing and limits flexibility.

**Impact on existing pages**

- If we remove the padding directly from the components, it could cause glitches on existing pages where those components are already in use.

**Solution**

- Remove bottom margin from the block
- In the Basic Section, blocks can be set to padding: shallow to control spacing around items, so it is more appropriate to manage spacing at the pattern level.
Image

**Result**

- Spacing can be adjusted without breaking the pattern
- When a block is placed at the bottom of a section, it avoids duplicated spacing with the section’s own bottom padding.

Image

Contributor guide

Open the contributing guide

Research direction

Start with the Basic section documentation and inspect the implementations of the List, Code, and Notification blocks. Compare their bottom spacing in the rendered examples; done means those three blocks no longer add shallow bottom margin inside Basic section while section-level padding still controls the spacing.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, sass
Domain
design, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
56/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.