2-columns-responsive.html

{% extends "_layouts/examples.html" %}
{% from "_macros/vf_equal-heights.jinja" import vf_equal_heights %}
{% block title %}Equal heights / 2 columns{% endblock %}

{% block standalone_css %}patterns_all{% endblock %}

{% block content %}

{% call(slot) vf_equal_heights(
  title_text="Keep this heading to 2 lines on large screens.",
  attrs={ "id": "2-columns-responsive" },
  subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.",
  items=[
    {
      "title_text": "A strong hardware ecosystem",
      "image_html":  "<img src='https://assets.ubuntu.com/v1/ff6a068d-kernelt-vanilla-ehp-1.png' class='p-image-container__image' width='284' height='426' alt='Kernelt' />",
      "description_html": "<p>We enable Ubuntu Core with the best ODMs and silicon vendors in the world. We continuously test it on leading IoT and edge devices and hardware.</p>",
      "cta_html": "<a href='#'>Browse all certified hardware&nbsp;&rsaquo;</a>"
    },
    {
      "title_text": "A strong hardware ecosystem",
      "image_html":  "<img src='https://assets.ubuntu.com/v1/7aa4ed28-kernelt-vanilla-ehp-2.png' class='p-image-container__image' width='284' height='426' alt='Kernelt' />",
      "description_html": "<p>We enable Ubuntu Core with the best ODMs and silicon vendors in the world. We continuously test it on leading IoT and edge devices and hardware.</p>",
      "cta_html": "<a href='#'>Browse all certified hardware&nbsp;&rsaquo;</a>"
    },
  ]
) %}
{% endcall %}
{% endblock %}