Skip to main content
brickwork
GitHub Log in Get started
Display
Theme
Density
Direction
Brand

Documentation

Section

The shared structural section shell and layout class contract.

All components Marketing Brickwork 4.3.1

Try it

Tinted reveal section

Open full-page preview

An extends-based soft-stage section with intro classes.

Guidance

Composed by contract

Each component documents its public inputs.

Use as an extends base when a reusable section needs a content block, or write its public class pair directly for ordinary page markup.

Use it

Working invocation

This code creates the configuration shown above. Copy the template and the required Python context together.

templates/your_app/component.html

Django template

{% extends "brickwork_marketing/components/_section.html" %}
{% block section_content %}
  <div class="bw-section__intro">
    <p class="bw-section__overline">Guidance</p>
    <h2 class="bw-section__heading">Composed by contract</h2>
    <p class="bw-section__lede">Each component documents its public inputs.</p>
  </div>
{% endblock %}

your_app/views.py

Python

context = {'width': 'bleed', 'band': 'tint', 'atmosphere': 'soft-stage', 'reveal': 'enter'}

Guide

Add it to your project

  1. Use the public include path "brickwork_marketing/components/_section.html" from the installed django-brickwork package.
  2. For the template API, extend this template and fill section_content.
  3. For page composition, write section.bw-section and div.bw-section__inner directly; do not include this file expecting it to wrap a body string.
  4. Choose width and band independently.
  5. Use atmosphere and reveal as CSS-only presentation axes.

View this component's source for the installed release

Options

Public API

Option Type Default Required Description
width string contained No Section rail: `contained` stays within the marketing measure; `bleed` escapes to the viewport edge. Allowed: contained, bleed. Constraint: Allowed values are `contained` and `bleed`.
band string plain No Section background: `plain` uses the page surface; `tint` adds the marketing-tint treatment. Allowed: plain, tint. Constraint: Allowed values are `tint` and `plain`; unsupported values use the documented default behaviour.
atmosphere string none No Decorative background layer. Allowed: none, soft-stage. Constraint: Allowed values are `none` and `soft-stage`; unknown values fall back to none.
reveal string none No CSS entrance treatment. Allowed: none, enter. Constraint: Allowed values are `none` and `enter`; unknown values fall back to none.

Named blocks

Fill these only when you extend the component template. They are not values passed to an include or tag.

Block What it replaces
section_content Supplies the required content inside the section shell.

Behaviour

Accessibility and responsive behaviour

Accessibility
Structural only: callers own headings. Atmosphere layer is aria-hidden.
Responsive
Bleed and inner gutters are fluid at every width.
Without JavaScript
Reveal rests without JavaScript and respects reduced-motion behaviour.

Need help?

Troubleshooting

Content disappears after including the section template.

This is an extends-style shell. Extend it and fill `section_content`, or author the documented section classes directly; an include cannot wrap caller content.

Documentation