Jump to main content

Logo section

Work in progress

Vanilla's patterns are newly released and still evolving as we receive feedback.

The logo section is a pattern where the logo block serves as the main content, combined with a muted heading, optional description, and a CTA block.

It is composed of the following elements:

Element Description
Title (required) Main heading text (h2)
Description Description text (one or more paragraphs)
Blocks Array of blocks (either cta-block or logo-block)
View example of the default logo section

Layout Options

Linked Title

The title can be made clickable by providing link attributes.

View example of the logo section pattern with linked title

Padding Variants

Logo section supports customizable padding options at the pattern level, using the section pattern. The Jinja macro for the pattern applies the section padding automatically.

By default, the pattern is wrapped in a regular section. You can also use a deep section by changing the padding parameter.

View example of the logo section pattern with different padding variants

Blocks

Blocks in logo section use a flexible model where you can pass an array of blocks representing different types. These can either be CTA Block or Logo Block.

CTA Block

The CTA block allows you to include call-to-action elements within the section.

It supports three types of CTA items:

  • Primary: 1 main call-to-action button
  • Secondary: Supporting action buttons
  • Link: Text link
View example of the logo section pattern with CTA block
{
  "type": "cta-block",
  "item": {
    "primary": {
      "content_html": "Primary button text",
      "attrs": {
        "href": "link-url",
        "class": "optional-css-class"
      }
    },
    "secondaries": [
      {
        "content_html": "Secondary button text",
        "attrs": {
          "href": "link-url"
        }
      }
    ],
    "link": {
      "content_html": "Link text",
      "attrs": {
        "href": "link-url"
      }
    }
  }
}
  • primary: Optional primary button configuration.
  • secondaries: Optional array of secondary button configurations.
  • link: Optional text link configuration.

Each of the CTA configurations accepts the following properties:

  • content_html: The inner HTML of the CTA item.
  • attrs: Dictionary of button/link attributes. These are applied to the CTA element. If href is present, the CTA item will be an <a>, otherwise it will be a <button>. See attribute forwarding docs for more info.

Note: The cta-block utilizes CTA block from Basic section pattern

Logo Block

The logo block is a list of logos, within a fixed width container. The logos are automatically wrapped.

View example of the logo section pattern with logo block
{
  "type": "logo-block",
  "item": {
    "logos": [
      {
        "attrs": {
          "src": "image-url",
          "alt": "alt-text"
        }
      }
    ]
  }
}

Logo section without description

View example of the logo section pattern without description

Logo section without CTA block

View example of the logo section pattern without CTA block

Logo section without description and CTA block

View example of the logo section pattern without description and CTA block

Default vs Minimal mode

Use the mode parameter to control how much content the pattern renders. Two modes are supported: "default" and "minimal".

  • default

    • Renders the title with a top rule, description, CTA, and logo block.
    • Renders the root element as a <section>

  • minimal

    • Renders a compact layout that displays only the logo block.
    • Title, description slot and CTA are not rendered (useful inside other patterns or tight page areas).
    • Renders the root element as a <div>

Usage

  • Add the mode property at the pattern level when invoking the macro.
Example: default
{
  "title": {"text": "Trusted by organizations worldwide"},
  "mode": "default",
  "description": "<p>We power the digital services of many public sector organizations.</p>",
  "blocks": [
    {"type": "logo-block", "item": {"logos": [{"attrs": {"src": "logo.png", "alt": "Org"}}]}},
    {"type": "cta-block", "item": {"link": {"content_html": "Learn more", "attrs": {"href": "/about"}}}}
  ]
}
View example of the "default" mode Logo section
Example: minimal
{
  "title": {"text": "Trusted by organizations worldwide"},
  "mode": "minimal",
  "blocks": [{"type": "logo-block", "item": {"logos": [{"attrs": {"src": "logo.png", "alt": "Org"}}]}}]
}
View example of the "minimal" mode Logo section

Jinja Macro

The vf_logo_section Jinja macro can be used to generate a logo section pattern. The API for the macro is shown below.

Parameters

Name Required? Type Default Description
title Yes Object N/A Title configuration object with text and optional link_attrs
title.text Yes string N/A The main title text (rendered as h2)
title.link_attrs No Object N/A Attributes of an anchor element, as a dictionary. See attribute forwarding docs for more info.
blocks Yes Array<Object> [] Array of blocks to display in the section. See Blocks for configuration details.
padding No One of:
'deep',
'default',
'none' 		'default' Padding variant for the entire section
top_rule_variant No One of:
'default',
'none' 		'default' Variant of horizontal rule to display at the top of the section."
mode No One of:
'default',
'minimal' 		'default' Layout for the pattern.
  • "default": renders a <section> as the root element, and renders title, description and cta (suitable when used standalone).
  • "minimal": renders a <div> as the root element, and does not render title, description and cta (suitable when used inside another section).

Slots

Name Required? Description
description No Descriptive content for the section.
One or more paragraphs

Import

Jinja Macro

To import the Logo Section Jinja macro, copy the following import statement into your Jinja template.

{% from "_macros/vf_logo-section.jinja" import vf_logo_section %}

View the building with Jinja macros guide for macro installation instructions.

SCSS

Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.