Skip to content

Email templates & grid

WARNING

🚨 Current @semcore/email package is deprecated and not recommend for use. New major version is planned and will be released one day.

Grid example

col - 6
col - 6
 
col - 4
col - 7
 
col - 4
col - 8
 
col - 3
col - 9
 
col - 2
col - 10
 
col - 1
col - 11
 
col - 12
html
<extends src="core/base.html">
  <block name="head">
    <link rel="stylesheet" href="../../../lib/grid/index.css" />
    <style>
      .column {
        height: 50px;
        background-color: #66ccf7;
        border: 1px solid black;
      }
      .column-odd {
        height: 50px;
        background-color: #ffd54f;
        border: 1px solid black;
      }
    </style>
  </block>
  <block name="content">
    <row>
      <columns large="6" class="column">col - 6</columns>
      <columns large="6" class="column-odd">col - 6</columns>
    </row>
    <spacer size="20"></spacer>
    <row>
      <columns large="5" class="column">col - 4</columns>
      <columns large="7" class="column-odd">col - 7</columns>
    </row>
    <spacer size="20"></spacer>
    <row>
      <columns large="4" class="column">col - 4</columns>
      <columns large="8" class="column-odd">col - 8</columns>
    </row>
    <spacer size="20"></spacer>
    <row>
      <columns large="3" class="column">col - 3</columns>
      <columns large="9" class="column-odd">col - 9</columns>
    </row>
    <spacer size="20"></spacer>
    <row>
      <columns large="2" class="column">col - 2</columns>
      <columns large="10" class="column-odd">col - 10</columns>
    </row>
    <spacer size="20"></spacer>
    <row>
      <columns large="1" class="column">col - 1</columns>
      <columns large="11" class="column-odd">col - 11</columns>
    </row>
    <spacer size="20"></spacer>
    <row>
      <columns large="12" class="column-odd">col - 12</columns>
    </row>
  </block>
</extends>

Released under the MIT License.

Released under the MIT License.