Style & Capabilities

A reference of the building blocks this site offers: plain HTML, Bootstrap components, and every installed plugin.

Typography

Heading 2

Heading 3

Heading 4

Body text uses the self-hosted Figtree font. Bold, emphasis, a link and inline code all inherit the theme colours.

Blockquotes carry a muted colour and a left rule.

Lists

Unordered item
Another item
- Nested item

First
Second

Table

Plugin	Package	Status
Text	djangocms-text	installed
Link	djangocms-link	installed
Picture	djangocms-picture	installed

Code

def hello(name):
    return f"Hello, {name}!"

Buttons

Alerts

Success: the operation completed.

Warning: check this before continuing.

Danger: something failed. This one can be dismissed.

Cards

Card title

Cards hold a header, body and actions, and adapt to light and dark mode.

Go somewhere

Featured

First item
Second item
Third item

Forms

Accordion

Open by default. Only one section is open at a time.

Keyboard accessible: focus a header and press Enter or Space.

Bootstrap 5 plugins

Components from djangocms-bootstrap5, added through the CMS structure board.

Bootstrap 5 Alerts plugin.

New

Simplicity is prerequisite for reliability.
Edsger W. Dijkstra

print('Bootstrap5CodePlugin')

Jumbotron plugin

A large call-out block.

List group item one

List group item two (success)

Card plugin header

Card plugin body.

Inside a spacing plugin (padding 3).

Hidden until the trigger above is activated.

First tab
Second tab

First tab content.

Second tab content.

Content plugins

Each of these is a separate installed plugin, rendered live.

Link

A djangocms-link plugin pointing to the About page

Picture

djangocms-bootstrap5's picture app replaces the stock PicturePlugin with a subclass, so this is the one editors get.

Blue diagonal stripes, a generated sample image — A djangocms-picture plugin (Bootstrap5PicturePlugin subclass; filer image).

Video

An embed needs internet access to show its player; on a LAN-only network the frame stays blank.

Sample video (opens in a new tab)

File and folder

Download the sample file 17 bytes readme.txt 17 bytes
notes.txt 12 bytes

Style

Content wrapped by a djangocms-style plugin (class container plus utility classes).

Alias

Alias content: this notice is a reusable alias; edit it once and every page that uses it updates.

Google Map

The djangocms-googlemap plugin is installed. It needs a Google Maps API key and internet access, so no sample is placed here until GOOGLE_MAPS_API_KEY is set and seed_site --reset is run.

Project plugins

This paragraph is a Raw HTML block (trusted) plugin.