1. Demo
  2. Notes
  3. .html
  4. .njk & context
  5. Full Screen ↗

Section

TODO.

<section class="bg--gradient bg--cream-150-to-purple-100">
  <div class="grid">
    <div class="column" style="--span:6">
      <div class="blocks">
        <div class="block-type-text flow">
          <p class="large">Our movement is made up of people from Canada, Québec, and the many Indigenous nations contained within this territory.</p><p>We come together to win a People’s Agenda— a democratically-designed governing mandate that brings us closer to winning the world we deserve.</p>
        </div>
      </div>
    </div>
    <div class="column" style="--span:6">
      <div class="blocks">
        <div class="block-type-image flow">
          <figure data-ratio="auto"><img class="filter-orange-500" src="../../../static/images/march.jpg" alt=""></figure>
        </div>
      </div>
    </div>
  </div>
</section>
{{ c("section", {
  "context": {
    "columns": {
      "1": {
        "span": 12,
        "block": {
          "type": "text",
          "content": "<p class=\"large\">Our movement is made up of people from Canada, Québec, and the many Indigenous nations contained within this territory.</p><p>We come together to win a People’s Agenda— a democratically-designed governing mandate that brings us closer to winning the world we deserve.</p>"
        }
      }
    }
  },
  "background": "bg--gradient bg--cream-150-to-purple-100",
  "columns": {
    "1": {
      "span": 6,
      "block": {
        "type": "text",
        "content": "<p class=\"large\">Our movement is made up of people from Canada, Québec, and the many Indigenous nations contained within this territory.</p><p>We come together to win a People’s Agenda— a democratically-designed governing mandate that brings us closer to winning the world we deserve.</p>"
      }
    },
    "2": {
      "span": 6,
      "block": {
        "type": "image",
        "content": "<figure data-ratio=\"auto\"><img class=\"filter-orange-500\" src=\"../../../static/images/march.jpg\" alt=\"\"></figure>"
      }
    }
  }
}) }}