Case study templates developer guide

Case studies can be found on Case Studies | Ubuntu. Each case study is built using predefined Jinja macros. There are two types of macros, custom macros for case studies and general Vanilla defined macros. Currently, all macros are in the /templates/macros folder, but with the new Vanilla update we will be able to import macros directly from the npm package. This documentation will be updated once this change has been made. The copy doc template used to create case study can be found here.

Vanilla macros

Hero section

{% from "macros/_macros-hero.jinja" import hero %}

{%- call(slot) hero(title="Example hero title") -%}
  {% if slot == "signpost_image" %}
	{{ image(url="....", ...) }}
  {% endif %}
{%- endcall -%}

Parameters:

• title (required): Hero title text

Slots:

• signpost_image (required): Slot for signpost (left column) image content in 25/75 layout. Required for 25/75 layout.

These are the only two parameters and slots required for case study templates. There are more functionalities that the Vanilla hero macro offers.

Quote section

{% from "macros/_macros-quote.jinja" import quote_wrapper %}

{%- call(slot) quote_wrapper(
      quote_text="Example quote text",
      citation_source_name_text="John Doe",
      citation_source_title_text="ESA Mission Operations"
   ) 
-%}
{%- endcall -%}

Parameters:

• quote_text (required): The text of the quote
• citation_source_name_text (optional): The name of the source being quoted
• citation_source_title_text (optional): The organisation associated with the source being quoted

Custom case study macros

Basic text section + list

{% from "macros/_macros-text_list.jinja" import text_list %}

{%- call(slot) text_list(title="Example title for text list") -%}
  {%- if slot == "list_item_content_1" -%}
	List item content 1
  {%- endif -%}
  {%- if slot == "list_item_content_2" -%}
	List item content 2
  {%- endif -%}
  {%- if slot == "list_item_content_3" -%}
	List item content 3
  {%- endif -%}
{%- endcall -%}

Parameters:

• title (required): Title of text section

Slots:

• list_item_content_[1-10] (required): List item content

Highlights

{% from "macros/_macros-highlights.jinja" import highlights %}

{%- call(slot) highlights(num_items=3) -%}
  {%- if slot == "highlights_item_content_1" -%}
	Highlights item content 1
  {%- endif -%}
  {%- if slot == "highlights_item_content_2" -%}
	Highlights item content 2
  {%- endif -%}
  {%- if slot == "highlights_item_content_3" -%}
	Highlights item content 3
  {%- endif -%}
{%- endcall -%}

Parameters:

• num_item (requires 3-4 items): Number of highlight list items

Slots:

• highlights_item_content_[1-4] (required): Highlights list item content, it must have the same number of items as num_item.

Basic text section

{% from "macros/_macros-text.jinja" import text %}

{%- call(slot) text(title="Example title") -%}
  {%- if slot == "content" -%}
	<p>Example paragraph 1</p>
	<p>Example paragraph 2</p>
	<p>Example <a href="">rich text</p>
  {%- endif -%}
{%- endcall -%}

Parameters:

• title (optional): Title of the text section

Slots:

• content (required): Description of text section, each list item is a paragraph. The paragraph can also include rich text.

Image section

{% from "macros/_macros-image.jinja" import image_wrapper %}

{%- call(slot) image_wrapper(caption="Example caption") -%}
  {%- if slot == "image_content" -%}
	{{ image(url="...",
			 alt="...", 
			 width="...", 
			 height="...", 
			 hi_def="True", 
			 loading="lazy",
			 attrs={"class": "p-image-container__image"}) | safe
	}}
  {%- endif -%}
{%- endcall -%}

Parameters:

• caption (optional): Caption for image

Slots:

• image_content (required): Slot for image content, the image must have the class “p-image-container__image”

Footer CTA section

{% from "macros/_macros-cta.jinja" import cta %}

{{ cta(title="Contact us", link="/contact-us", has_modal="true") }}

Parameters:

• title (required): Title of the CTA
• link (required): Link of the CTA
• has_modal (optional): Whether the CTA invokes a modal. Defaults to true.

There is a default CTA applied for each case study, wrapped in {% block cta_content %}. To overwrite the default CTA, make sure to call the macro and wrap it in the cta_content block.

Last updated a month ago.