Kiln for Bricks Buy Kiln

Modules / Elements

Elements: Blockquote, Divider with text, Logo with text

Three elements in a Kiln category in the builder's Elements panel: a Blockquote with author and source, a Divider with text, and a Logo with text. Each is a regular builder element, with typography, color and dynamic data controls.

#2 of 39 modules by votes · 1,386 votes across 3 requests

  • On by default
  • Needs Bricks 2.4 or newer
  • Tested with Bricks 2.4.3
Buy Kiln · all 39 modules, US$79 a yearBrowse the other 38 modules
Recording: in the Bricks builder, someone clicks Blockquote in the Elements panel’s Kiln category and it lands in the page; then they raise its quote mark from 45 px to 120 px.Recorded in Bricks 2.4.3

How to use it

Blockquote

  1. Add Blockquote from the Kiln category.
  2. In the Quote group, write the Quote. Optionally set Typography, Left accent width, Left accent color and Quote padding.
  3. In the Quote mark group, choose a Style: None, Typographic “ (the default) or Icon. For an icon, pick it in Icon. Set Position (Above the quote or Left of the quote), Size and Color.
  4. In the Author & source group, fill in Author and Source (work, role, company). Add a Source link to link the source. Choose a Prefix (a dash, or None), and set Typography and Gap above.

The markup is a <figure> with a <blockquote> and a <figcaption>. The source sits in a <cite> element. The Source link is also written to the blockquote's cite attribute.

Divider with text

  1. Add Divider with text.
  2. Write the Text (the default is "or") and choose a Text position: Center, Start or End.
  3. Set the text Typography and the Gap around text.
  4. Under Line, set the Style, Thickness and Color.
  5. For Start or End, set Short side width (start / end position).

Start and End follow the reading direction, so they flip on right-to-left sites. The divider is marked as a separator with the text as its label.

Logo with text

  1. Add Logo with text.
  2. Choose an Image and set the Image width.
  3. Fill in the Title and Tagline. They default to the dynamic tags {site_title} and {site_tagline}. Set Title typography and Tagline typography.
  4. Set the Layout: Image before text or Image above text, and the Gap.
  5. The element links to the home page. Set a Link to point elsewhere, or tick No link.

If you leave Image empty, the element uses the site logo set in WordPress, then the Customizer logo if a theme set one, then the site icon.

Where it appears in Bricks

  • The Elements panel, in the Kiln category.
  • All controls are on the Content tab. Blockquote groups them as Quote, Quote mark and Author & source.

How it works with your own styles

Every rule in Kiln's stylesheet is wrapped in :where(), so it adds no specificity. Anything you set in Bricks wins, including settings on global elements and components. The stylesheet loads only on pages that use one of the three elements.

Limits

  • Text fields (Quote, Author, Source, Text, Title, Tagline) take dynamic data and a short list of inline HTML: br, em, strong, b, i, span and a. Other tags are removed.
  • The defaults, such as the sample quote, the author "Charles Eames" and the divider text "or", fill in when you add the element. If you clear a field later, it stays empty.
  • Bricks has no global logo setting, so pick an Image in Logo with text for a predictable result.
  • The logo image is output with empty alt text, so screen readers skip it. Keep a Title if the logo needs a name.

Settings

None. Turn the module on in Bricks > Kiln (it is on by default).

Requirements

Bricks 2.4 or newer.