vanilla-framework/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html at 5cf472374db3ba5ba2d7033c0bcac074ac8ffbfa · britneywwc/vanilla-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{% extends "_layouts/examples.html" %}
{% from "_macros/vf_equal-heights.jinja" import vf_equal_heights %}
{% block title %}Equal heights / 4 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": "4-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>"
    },
    {
      "title_text": "A strong hardware ecosystem",
      "image_html":  "<img src='https://assets.ubuntu.com/v1/4936d43a-kernelt-vanilla-ehp-3.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/bbe7b062-kernelt-vanilla-ehp-4.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>"
    }
  ]
) %}
  {% if slot == "description" %}
    <p>
      Ensure this block is taller than the heading on its left. Cloud types vary depending on who owns or
      operates
      them. It is also possible to use more than one cloud at a time in a hybrid or multi-cloud architecture. Cloud
      types vary depending on who owns or operates them. It is also possible to use more than one cloud at a time
      in
      a hybrid or multi-cloud architecture. Cloud types vary depending on who owns or operates them. It is also
      possible to use more than one cloud at a time in a hybrid or multi-cloud architecture.
    </p>
  {% endif %}
  {% if slot == "cta" %}
    <a href="#" class="p-button">Learn more</a>
    <a href="#">Contact us&nbsp;&rsaquo;</a>
  {% endif %}
{% endcall %}
{% endblock %}