foundation-emails/test/visual/pages/callout-in-grid.html

A framework for responsive emails

<container>
  <row>
    <columns>
      <callout class="secondary">
        <row>
          <columns>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque necessitatibus perferendis doloremque quod quam nisi, unde ipsum qui, nesciunt reiciendis adipisci. Ratione nemo adipisci aspernatur quaerat tempore omnis delectus ipsam!</p>
          </columns>
          <columns>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, doloremque explicabo aperiam vitae autem dolorum id placeat cumque praesentium qui, similique rerum error quibusdam sed officia eligendi obcaecati illum. Quo!</p>
          </columns>
        </row>
      </callout>
      <row>
        <columns small="6">
          <p>Not in a callout :(</p>
        </columns>
        <columns small="6">
          <callout class="secondary">
            <p>I'm in a callout!</p>
          </callout>
        </columns>
      </row>

      <callout class="primary">
        <row>
          <columns small="12">
            <p>This whole row is in a callout!</p>
          </columns>
        </row>
      </callout>

      <callout>
        <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      </callout>
      <callout class="primary">
        <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      </callout>

      <callout class="success">
        <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      </callout>

      <callout class="warning">
        <p>There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      </callout>

      <callout class="alert">
        <p>Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      </callout>
      
    </columns>
  </row>

</container>