Pixel 9 Build Manual

A live page: every example below is a real block with real settings. Under each one you can see exactly what was typed and where. Open any of them in edit mode to check.

The block panel: four fields decide everything

Click a block. The dropdown on the left is Block Template; the gear on the right opens Advanced:

Block Template — which markup the block outputs. Without the right template the classes do nothing.
Custom Class — theme keys, separated by spaces. Type the key with a colon (promo:full), not the finished CSS class (promo-full). The theme discards anything it does not recognise — that is why typing CSS classes here appears to do nothing.
Custom Element Attribute — raw attributes. Animations go here: data-animate="fadeInUp"
Block Container Class — the wrapper: narrow, wide, or none.

Blocks and areas work in opposite ways.
On a block the theme reads keys (button:border) and converts them. On an area — MAIN 1, MAIN 2 and so on — there is no lookup at all: whatever you type lands on the wrapper as-is, so there you write finished CSS classes (parallax, color-overlay). Most confusion comes from mixing these two up.

Headings

Block Content with template Pixel Page Title. Key set page_title.

Plain

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: — empty —

Centred

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:align:center

With a rule underneath

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:bottom-border

Over a parallax background

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:parallax

With a subtitle underneath

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:emphasis

The remaining heading styles

The theme offers fourteen in total. These nine were missing above.

Simple

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:simple
Plain heading block

Left border

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:left-border
Vertical rule down the left

Fancy border

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:fancy-border
Decorative rule

Fancy, single

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:fancy-border:single
Decorative rule, single line

Fancy, double

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:fancy-border:double
Decorative rule, double line

Short rule

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:bottom-border:short
Short rule underneath

Theme colour rule

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:border-color:theme
Rule in the theme colour

Right aligned

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:align:right
Heading to the right

Dark

Body text under the heading, so you can judge the spacing.

Template: Pixel Page Title · Custom Class: title:dark
For a dark background

Buttons

Block Call To Action, template Pixel Button. Key set button. All 145 buttons on this site were converted to these keys.

Template: Pixel Button · Custom Class: button:style:3d
3D — the most used style on this site

Template: Pixel Button · Custom Class: button:border button:rounded button:fill
Outline, rounded, fills in on hover — the classic combination here

Template: Pixel Button · Custom Class: button:border
Outline only

Template: Pixel Button · Custom Class: button:border-thin
Thin outline

Template: Pixel Button · Custom Class: button:rounded
Rounded

Template: Pixel Button · Custom Class: button:circle
Fully round

Template: Pixel Button · Custom Class: button:reveal
Icon slides out on hover

Template: Pixel Button · Custom Class: button:full
Full-width band

Template: Pixel Button · Custom Class: button:size:small
Small

Template: Pixel Button · Custom Class: button:size:large
Large

Template: Pixel Button · Custom Class: button:color:leaf
Leaf green

Template: Pixel Button · Custom Class: button:dark
Dark

Uppercase on buttons comes from application/css/site.css, not from the theme — production had it and Pixel 9 does not.

Promo bars

Block Call To Action, template Pixel Promo. Key set promo. promo:full is the important one — without it the template outputs no container and the bar runs to the window edges.

Template: Pixel Promo · Custom Class: promo:full
Adds the container with margins. You almost always want this

Template: Pixel Promo · Custom Class: promo:full promo:dark
Dark background, light text

Template: Pixel Promo · Custom Class: promo:full promo:light
Light background

Template: Pixel Promo · Custom Class: promo:full promo:border
Outline instead of a fill

Template: Pixel Promo · Custom Class: promo:full promo:mini
Reduced height

Template: Pixel Promo · Custom Class: promo:full promo:vertical
Text and button stacked

Template: Pixel Promo · Custom Class: promo:full promo:text:uppercase
Heading in capitals

Template: Pixel Promo · Custom Class: promo:full promo:color:theme
Filled with the theme colour

Dividers

Block Horizontal Rule, template Pixel Center — two hairlines with a dot between them, 48px of clear space above and below. Every one of the 68 dividers on this site uses it. The rules separating the sections of this page are the same block.

Below this paragraph is a divider block, exactly as it renders:

Template: Pixel Center · Custom Class: — empty —
No class needed — the template does the work.

Text colour and background

Key set utility. Available to blocks that declare it: Content, CTA, Feature, Counter and others.

Text colour

Theme colour — sample text in this colour

Custom Class: text:color:theme

Primary — sample text in this colour

Custom Class: text:color:primary

Success (green) — sample text in this colour

Custom Class: text:color:success

Danger (red) — sample text in this colour

Custom Class: text:color:danger

Warning (amber) — sample text in this colour

Custom Class: text:color:warning

Info (blue) — sample text in this colour

Custom Class: text:color:info

Muted grey — sample text in this colour

Custom Class: text:color:muted

Dark — sample text in this colour

Custom Class: text:color:dark

Block background

Background: Theme colour

Custom Class: bg:color:theme

Background: Dark

Custom Class: bg:color:dark

Background: Light

Custom Class: bg:color:light

Background: Info

Custom Class: bg:color:info

Background: Warning

Custom Class: bg:color:warning

Background: Transparent

Custom Class: bg:color:transparent

Alignment

Horizontal alignment has theme keys. Vertical alignment does not — use Bootstrap 5 classes inside the block HTML.

Horizontal — with keys

Left

Custom Class: utl:text:align:start

Centre

Custom Class: utl:text:align:center

Right

Custom Class: utl:text:align:end

Vertical — with Bootstrap classes

There are no theme keys for this. Write it in the HTML of a Content block:

Centred vertically
d-flex align-items-center

Pinned to the top
d-flex align-items-start

Bottom and centred
align-items-end justify-content-center

Left

Right — justify-content-between

Grids

Bootstrap 5. Twelve columns per row; the numbers in each row must add up to 12. Use the layout tool in the editor, or write it by hand in a Content block.

col-md-6

col-md-6

col-md-4

col-md-4

col-md-4

col-md-8

col-md-4

3

3

3

3

md means the split applies from tablet width upwards; below that the columns stack. The gap between columns is 24px and comes from Bootstrap itself.

Containers: narrow and full width

Set on the area, not the block. An area with a container keeps content within the page width; without one it runs edge to edge.

Inside a container — this is the normal page width

A full-width band cannot be shown inside this column, because this page itself sits in a container. To build one: put the block in an area of its own and leave the container off — see the parallax section below.

Animation

Written into Custom Element Attribute, not Custom Class. The theme ships Animate.css with 98 effects.

Simple fade in

Custom Class: — empty —
Custom Element Attribute: data-animate="fadeIn"

Fades in while rising — the most useful one

Custom Class: — empty —
Custom Element Attribute: data-animate="fadeInUp"

Comes in from the left

Custom Class: — empty —
Custom Element Attribute: data-animate="fadeInLeft"

Grows into place

Custom Class: — empty —
Custom Element Attribute: data-animate="zoomIn"

Bounces in

Custom Class: — empty —
Custom Element Attribute: data-animate="bounceIn"

Animations run when the block scrolls into view. In edit mode they do not play. Full list of names: animate.style

Tables

Written as HTML inside a Content block. Bootstrap 5 table classes are available.

Title	Author	Price
The Desire of Ages	E. G. White	$18.00
Steps to Christ	E. G. White	$4.50
The Great Controversy	E. G. White	$16.00

Add table-striped for alternating rows, table-bordered for full borders, table-hover to highlight the row under the cursor. A wide table should be wrapped in <div class="table-responsive"> so it scrolls on a phone instead of stretching the page.

Links and text styles

A normal link inside body text, bold, italic, underlined, ~~struck through~~, inline code and highlighted.

A block quote. Use the quote button in the editor toolbar.

Lead paragraph, small print, and muted text are available through the utility key set — see the colour section above.

Icons

Font Awesome 5. Pick them in the block itself where a block offers an icon field; write them by hand in a Content block.

fas solid · far outline · fab brands. Written as <i class="fas fa-leaf"></i>.

Version 4 names no longer work. The old site stored short names like hand-o-right; version 5 needs the set prefix and sometimes a different name. All 57 stored icons were converted. Brand icons do not render inside the editor — a missing font there only; they appear correctly on the page.

Old	New
`hand-o-right`	`fas fa-hand-point-right`
`check`	`fas fa-check`
`send-o`	`far fa-paper-plane`
`bookmark-o`	`far fa-bookmark`
`handshake-o`	`far fa-handshake`

Images

Why images stretch. Concrete writes the file's real pixel size into the tag as width and height. The theme only caps the width, so when a wide image is squeezed into a column its height stays at the original number and the picture stretches vertically. A 2251-wide banner shown at 1116 was drawn at exactly double its correct height.

This is fixed for images sitting directly in a paragraph and for banner images. It is deliberately not applied everywhere: the book covers on Free Offers have their height set on purpose so the row lines up, and a blanket rule breaks that row.

Never paste a photo straight into the editor. One newsletter had an image embedded as text — a single line of 1,018,500 characters, 86% of that page's content. Upload through the file manager and insert it as a picture.

Forms

Block Form, template Pixel Subscribe for the newsletter sign-up, or the default template for a full form. Fields are configured in the block itself.

A country field pulls in a list of 255 options and links to the state field automatically. If a form has a captcha, its image is refreshed by clicking it.

Parallax and full-width bands

Typed on the area, as finished CSS classes. The tinting classes did not exist in Pixel 9 at all — they are ported from the old theme into site.css, because Pixel 9's own overlay scheme needs three nested divs and cannot be produced from a class field.

Class	What it does
`parallax`	Background scrolls slower than the page
`dark`	Light text for a dark section. Does not darken the background
`color-overlay`	Switches the tint layer on. Required, transparent by itself
`color-overlay-black` / `-white`	Tint colour
`color-overlay-01` … `-09`	Strength, 10% to 90%

Ready-made line for a dark parallax section:
parallax dark color-overlay color-overlay-black color-overlay-05

03 — 30%

05 — 50%

07 — 70%

Any other colour — use Custom Element Attribute. A tint layer cannot be made with an inline style because it is drawn with a ::before pseudo-element, but an inset shadow with a huge spread does the same job:

style="box-shadow: inset 0 0 0 9999px rgba(60,30,0,.5)"

Page header and banner

Dashboard → Pages & Themes → Pixel → Customize → Page Title Area. Current setup: Type Left, Size Mini, Colour Dark — title left, breadcrumb right, one line.

Put an image block in the Header Bottom area and it runs under the semi-transparent menu, the way production does. Three rules in site.css make that work, and only on pages that actually have such an image:

Rule	Why
`position: absolute; z-index: 199` on the header	Takes it out of the flow so the next section starts at the top of the window. The z-index matters on phones — without it the open menu was painted under the banner
`padding-top: 101px` on the banner container	Pushes the banner content below the menu so the lettering is not covered. The background still runs full height behind it
`margin-top: 0` on the title strip	The theme's script pulls the section after the header upwards. Right for a full-height hero, wrong for the slim strip — it ended up half hidden behind the menu on every page without a banner

Header height is 101px at every breakpoint measured (375, 768, desktop), so it is one value, kept in the CSS variable --al-header-h.

Changing one page only

Page Settings → Attributes → Header Extra Content goes straight into that page's <head>. Good for one-off adjustments without touching files:

<style>#content .content-wrap{padding:0 !important}</style>

!important is not optional here. Concrete inserts this block before the theme's stylesheets, so the theme wins any tie. Measured on a live page: with it the padding becomes 0, without it stays at 80px.

Section background on one page: Page Settings → Attributes → Content Area: Background Color → type f8f5eb. This paints the section including its top and bottom padding. Colouring an area instead leaves those paddings white — that is the difference. The attribute shipped with the theme but the code applying it was commented out; it is wired up in application/bootstrap/app.php.

Cheat sheet

You want to change	Where	Format
One block's appearance	Block → gear → Custom Class	`button:border`
Animation on a block	Block → gear → Custom Element Attribute	`data-animate="fadeInUp"`
Area background, parallax	Area → Design → Custom Class	`parallax`
One page, anything at all	Page Settings → Header Extra Content	`<style>…</style>`
Section background on a page	Page Settings → Content Area: Background Color	`f8f5eb`
Site-wide, permanent	`application/css/site.css`	CSS
Theme switches	Dashboard → Pages & Themes → Pixel → Customize	form fields

Nothing happened after you typed a class? Check it exists in the tables on this page. On a block, anything the theme does not recognise is discarded silently. On an area, whatever you type is applied as-is — so an area needs the finished CSS class, not a key.

Built from the theme's own files: src/ServiceV2/Component.php (key to class map), themes/pixel/page_theme.php (which sets each block may use), themes/pixel/options/options.php (dashboard switches), plus application/css/site.css and application/bootstrap/app.php. Pixel 9 version 9.3.1 on Concrete CMS 9.5.2.

Every block the theme ships

The vendor advertises "100+ elements". Counted from the theme's own source: 26 blocks, 48 templates and 142 style keys. Everything below is that list in full — nothing invented, nothing omitted.

Read it as three columns: pick the block from Add Block, choose a template from the dropdown, then type keys into Custom Class. A block with no templates listed has only its standard look; a block with no key sets takes no styling keys.

Block	Templates	Key sets	What it is for
Call To Action `pixel_cta`	`pixel_button` `pixel_promo` `pixel_image_feature_box` `pixel_button_top_bar`	button, promo, image_feature_box, text align	Buttons, promo bars and picture cards. The most versatile block in the theme
Page List `page_list`	`pixel_blog_full` `pixel_blog_grid` `pixel_blog_sidebar` `pixel_list` `pixel_list_plain` `pixel_portfolio_carousel` `pixel_portfolio_grid`	page_list, grid	Lists of pages: blog rolls, portfolio grids, sidebar lists
Express Entry List `express_entry_list`	`pixel_client_grid` `pixel_client_carousel` `pixel_team_member_grid` `pixel_team_member_carousel` `pixel_testimonial_grid` `pixel_testimonial_carousel`	client, team_member, grid, carousel options	Data lists: staff, clients, testimonials — as a grid or a carousel
Manual Nav `pixel_manual_nav`	`pixel_footer` `pixel_list` `pixel_mega_menu` `pixel_top_bar`	nav	Hand-built menus: footer, mega menu, top bar
Auto-Nav `autonav`	`pixel_list` `pixel_main_menu` `pixel_submenu`	none	Menus generated from the page tree
FAQ `faq`	`pixel_accordion` `pixel_toggle`	faq	Question and answer lists, folding or accordion
Social Links `social_links`	`pixel` `pixel_top_bar_icons`	social_link	Social network icons
Language Switcher `switch_language`	`pixel_top_bar` `pixel_top_bar_iso`	switch_language	Language selector
Search `search`	`pixel` `pixel_nav_search`	none	Search box, standalone or inside the menu
Page Title `page_title`	`pixel` `pixel_blog_entry_title`	page_title, text align	Page heading, ordinary or blog-entry style
Content `content`	`pixel_page_title`	page_title, text align	Rich text. With the template it becomes a styled heading
Page Attribute Display `page_attribute_display`	`pixel_image_responsive` `pixel_portfolio_meta`	none	Shows a page attribute: a picture or portfolio metadata
HTML `html`	`pixel_dummy` `pixel_dummy_edit_mode`	html_dummy_area	Raw HTML, plus placeholder blocks for laying pages out
File `file`	`pixel`	file, promo, button	A file for download, with optional size, type and date
Horizontal Rule `horizontal_rule`	`pixel`	divider, icon	Dividers in every variation
Feature `feature`	`pixel_feature_box`	feature_box	Icon plus heading plus text
Testimonial `testimonial`	`pixel`	testimonial	A quote with an author
Pixel Counter `pixel_counter`	standard look only	counter, text colour	Animated number with an icon
Pixel Pie Chart `pixel_pie_chart`	standard look only	none	Circular progress indicator
Pixel Pricing Table `pixel_pricing_table`	standard look only	pricing_table, button	Price plans
Pixel Gallery `pixel_gallery`	`thumb_gallery`	image	Picture gallery with a lightbox
Pixel Slider `pixel_slider`	standard look only	button	Full-width slider. The one on the home page
Share This Page `share_this_page`	`pixel`	share_this_page, borderless	Share buttons
Tags `tags`	`pixel`	none	Tag list
Next / Previous `next_previous`	`pixel`	none	Navigation between entries
Form `express_form`	`pixel`	none	Forms: subscribe, contact, applications

Every style key

Type these into Custom Class on a block. The right-hand column is the CSS class the theme produces — useful when you are reading the page source, but never type that yourself.

Buttons — 49 keys

Shape, size and colour of buttons. Combine freely: shape plus size plus colour.

Type this	Theme produces
`button:style:3d`	`button-3d`
`button:light`	`button-light`
`button:dark`	`button-dark`
`button:full`	`button-full`
`button:border`	`button-border`
`button:border-thin`	`button-border-thin`
`button:reveal`	`button-reveal`
`button:rounded`	`button-rounded`
`button:circle`	`button-circle`
`button:desc`	`button-desc`
`button:fill`	`button-fill`
`button:fill-from-right`	`button-fill-from-right`
`button:fill-from-top`	`button-fill-from-top`
`button:fill-from-bottom`	`button-fill-from-bottom`
`button:icon:end`	`text-end`
`button:size:mini`	`button-mini`
`button:size:small`	`button-small`
`button:size:large`	`button-large`
`button:size:xlarge`	`button-xlarge`
`button:color:amber`	`button-amber`
`button:color:aqua`	`button-aqua`
`button:color:black`	`button-black`
`button:color:blue`	`button-blue`
`button:color:brown`	`button-brown`
`button:color:dirtygreen`	`button-dirtygreen`
`button:color:green`	`button-green`
`button:color:lime`	`button-lime`
`button:color:leaf`	`button-leaf`
`button:color:pink`	`button-pink`
`button:color:purple`	`button-purple`
`button:color:red`	`button-red`
`button:color:teal`	`button-teal`
`button:color:white`	`button-white`
`button:color:yellow`	`button-yellow`
`button:color:orange`	`button-orange`
`button:color:gradient-blue-purple`	`gradient-blue-purple`
`button:color:gradient-horizon`	`gradient-horizon`
`button:color:gradient-light`	`gradient-light`
`button:color:gradient-blue-green`	`gradient-blue-green`
`button:color:gradient-multiples`	`gradient-multiples`
`button:color:gradient-ocean`	`gradient-ocean`
`button:color:gradient-earth`	`gradient-earth`
`button:color:gradient-sky`	`gradient-sky`
`button:color:gradient-purple-blue`	`gradient-purple-blue`
`button:color:gradient-green-blue`	`gradient-green-blue`
`button:color:gradient-grey-orange`	`gradient-grey-orange`
`button:color:gradient-grey-brown`	`gradient-grey-brown`
`button:color:gradient-light-pink`	`gradient-light-pink`
`topbar:button:inverted`	`bg-color text-white`

Promo bars — 20 keys

Wide call-to-action strips. promo:full is nearly always needed: without it the bar has no container and runs to the window edges.

Type this	Theme produces
`promo:border`	`promo-border`
`promo:light`	`promo-light`
`promo:dark`	`promo-dark`
`promo:full`	`promo-full`
`promo:mini`	`promo-mini`
`promo:reverse`	`promo-reverse`
`promo:text:center`	`text-center`
`promo:text:end`	`text-end`
`promo:text:uppercase`	`promo-uppercase`
`promo:vertical`	`promo-vertical`
`promo:color:theme`	`bg-color`
`promo:color:primary`	`bg-primary`
`promo:color:danger`	`bg-danger`
`promo:color:warning`	`bg-warning`
`promo:color:info`	`bg-info`
`promo:color:light`	`bg-light`
`promo:color:dark`	`bg-dark`
`promo:color:transparent`	`bg-transparent`
`ifb:border`	`fbox-bg`
`ifb:content:large`	`fbox-content-lg`

Headings — 14 keys

Heading styles: rules, borders, alignment, emphasis.

Type this	Theme produces
`title:simple`	`heading-block heading-block-simple`
`title:left-border`	`title-block`
`title:fancy-border`	`fancy-title`
`title:fancy-border:single`	`fancy-title title-border`
`title:fancy-border:double`	`fancy-title title-double-border`
`title:bottom-border`	`title-bottom-border`
`title:bottom-border:short`	`heading-block`
`title:border-color:theme`	`title-border-color`
`title:align:center`	`title-center`
`title:align:left`	`title-left`
`title:align:right`	`title-right`
`title:emphasis`	`emphasis-title`
`title:dark`	`dark`
`title:parallax`	`parallax`

Feature boxes — 11 keys

Where the icon sits and how it is framed.

Type this	Theme produces
`fbox:layout:center`	`fbox-center`
`fbox:layout:bordered`	`fbox-center fbox-bg`
`fbox:effect`	`fbox-effect`
`fbox:outline`	`fbox-outline`
`fbox:border`	`fbox-border`
`fbox:plain`	`fbox-plain`
`fbox:rounded`	`fbox-rounded`
`fbox:color:dark`	`fbox-outline fbox-dark`
`fbox:color:light`	`fbox-light`
`fbox:size:small`	`fbox-sm`
`fbox:size:large`	`fbox-lg`

Social icons — 8 keys

Colour, shape and size of the icons.

Type this	Theme produces
`si:dark`	`si-dark`
`si:light`	`si-light`
`si:rounded`	`si-rounded`
`si:borderless`	`si-borderless`
`si:textcolor`	`si-text-color`
`si:colored`	`si-colored`
`si:size:small`	`si-small`
`si:size:large`	`si-large`

Counters — 6 keys

Size of the number and of the icon above it.

Type this	Theme produces
`counter:small`	`counter-small`
`counter:large`	`counter-large`
`icon:small`	`i-small`
`icon:medium`	`i-medium`
`icon:large`	`i-large`
`icon:xlarge`	`i-xlarge`

Image corners — 6 keys

Corner rounding, from slight to a full circle.

Type this	Theme produces
`rounded:1`	`rounded-1`
`rounded:2`	`rounded-2`
`rounded:3`	`rounded-3`
`rounded:4`	`rounded-4`
`rounded:5`	`rounded-5`
`rounded:circle`	`rounded-circle`

File info — 6 keys

Which details to show next to a download: size, type, date, who uploaded it.

Type this	Theme produces
`fileinfo:show-type`	`file-info-show-type`
`fileinfo:show-size`	`file-info-show-size`
`fileinfo:show-download-no`	`file-info-show-download-no`
`fileinfo:show-user`	`file-info-show-user`
`fileinfo:show-date`	`file-info-show-date`
`fileinfo:show-date-full`	`file-info-show-date-full`

Placeholders — 6 keys

Grey blocks for sketching a layout before the real content exists.

Type this	Theme produces
`dummy-area`	`dummy-area`
`dummy-area:inverted`	`dummy-area-inverted`
`dummy-area:bordered`	`dummy-area-bordered`
`dummy-area:double`	`dummy-area-double`
`dummy-area:triple`	`dummy-area-triple`
`dummy-area:for edit mode`	`dummy-area-edit-mode`

Dividers — 5 keys

Position and shape of the rule.

Type this	Theme produces
`divider:right`	`divider-right`
`divider:center`	`divider-center`
`divider:sm`	`divider-sm`
`divider:rounded`	`divider-rounded`
`divider:border`	`divider-border`

FAQ — 4 keys

Background and border for folding lists.

Type this	Theme produces
`toggle:bg`	`toggle-bg`
`toggle:border`	`toggle-border`
`accordion:bg`	`accordion-bg`
`accordion:border`	`accordion-border`

Testimonials — 2 keys

Centred or without a frame.

Type this	Theme produces
`layout:center`	`testimonial-full`
`layout:borderless`	`border-width-0`

Pricing — 2 keys

Highlight one plan, or strip the styling back.

Type this	Theme produces
`pricing:highlight`	`pricing-highlight`
`pricing:minimal`	`pricing-minimal`

Menus — 1 key

Open submenus on click instead of hover.

Type this	Theme produces
`open:on-click`	`on-click`

Language switcher — 1 key

Same, for the language list.

Type this	Theme produces
`open:on-click`	`on-click`

Clients — 1 key

List instead of a grid.

Type this	Theme produces
`team:list`	`team-list`

Counters

Block Pixel Counter. The number counts up when it scrolls into view. Key set counter.

Happy readers

Template: standard · Custom Class: — empty —
Standard

Titles in print

Template: standard · Custom Class: counter:large
Large number

K+

Booklets posted

Template: standard · Custom Class: counter:small
Small number

Years serving

Template: standard · Custom Class: icon:large
Large icon above

Testimonials

Block Testimonial. Key set testimonial: centred, or without the frame.

The booklets arrived quickly and the study guides have been a real help to our small group.

Margaret A. Rangiora Reader

Template: pixel · Custom Class: — empty —
Standard, in a frame

The booklets arrived quickly and the study guides have been a real help to our small group.

David and Ruth Christchurch Small group leaders

Template: pixel · Custom Class: layout:center
Centred, wide

The booklets arrived quickly and the study guides have been a real help to our small group.

Tom H. Nelson Volunteer

Template: pixel · Custom Class: layout:borderless
Without the frame

Question and answer lists

Block FAQ, templates Pixel Accordion (one open at a time) and Pixel Toggle (each folds on its own). Key set faq.

Type this	What changes
`accordion:bg`	Filled background behind each question
`accordion:border`	Border around each question
`toggle:bg`	Same, for the toggle template
`toggle:border`	Same, for the toggle template

Questions and answers are entered in the block itself, so there is no sample here — add one from Add Block → FAQ and try both templates.

Social icons

Block Social Links. The networks come from Dashboard → System → Social Links; the block only shows them. Key set social_link.

Type this	Result
`si:colored`	Each icon in its own brand colour
`si:dark` / `si:light`	All dark, or all light
`si:rounded`	Round buttons
`si:borderless`	No frame, icons only
`si:textcolor`	Icons take the surrounding text colour
`si:size:small` / `si:size:large`	Smaller or larger

Pictures and galleries

Block Pixel Gallery for a set of pictures with a lightbox. Key set image controls corner rounding and also works on the Image block.

rounded:1 … rounded:5 — rounding from slight to heavy. rounded:circle — a full circle, useful for staff portraits.

rounded:1 · rounded:2 · rounded:3 · rounded:5 · rounded:circle

Layout placeholders

Block HTML with template Pixel Dummy. Grey blocks for sketching a page before the real content exists — the theme's own tool, worth knowing about.

Type this	Result
`dummy-area`	A plain grey block
`dummy-area:inverted`	Dark instead of light
`dummy-area:bordered`	Outline only
`dummy-area:double` / `:triple`	Twice or three times the height

dummy-area · dummy-area:double

Files for download

Block File. Besides the download link it can show details, and it accepts the button and promo key sets — so a download can look like a button or a promo bar.

Type this	Adds
`fileinfo:show-size`	File size
`fileinfo:show-type`	File type
`fileinfo:show-date`	Date added
`fileinfo:show-date-full`	Date and time
`fileinfo:show-user`	Who uploaded it
`fileinfo:show-download-no`	Download count

Add button:border button:rounded and the download turns into a button; add promo:full and it becomes a promo bar. This is the quickest way to make a prominent "Download the newsletter" strip.