Как сделать рамку вокруг нескольких строк в Foundation for Emails - PullRequest
Новая
       30

Как сделать рамку вокруг нескольких строк в Foundation for Emails

0 голосов
/ 08 июля 2019

enter image description here
Я хотел бы добавить рамку с отступом вокруг группы строк, как на прикрепленном изображении. Прямо сейчас, серая рамка - это созданное мной, которое окружает все строки / столбцы и идет прямо к краям области содержимого. Я хотел бы, чтобы это выглядело как на прикрепленном рисунке, с отступом около 40 пикселей от края письма, затем серой рамкой, затем строками. 

---
subject: American Eagle
---

---
layout: tinyemail
---
<br>
<wrapper class="primary-color">
<container>
  <center>
    <row>
      <div style="padding-bottom: 30px;">
        <columns small="7" large="7">
          <center><img src="https://www.sailthru.com/content/uploads/2018/08/AMERICAN-EAGLE.png" style="padding-left:10%; padding-top:10px;"></center>
        </columns>
        <columns small="5" large="5">
          <center><img src="http://www.freelogovectors.net/wp-content/uploads/2019/03/aerielogo.png" style="width:100px; "></center>
        </columns>
        <!-- <spacer size="500"></spacer> -->
      </div>
    </row>

    <!-- Border is set -->
    <div style="border-color: #cfcfcf; border-width:2px; border-style:solid;">
      <spacer size="50"></spacer>
      <row>
        <columns small="12" large="12" >
          <h3 class="text-center">CATHERINE, GOOD NEWS</h3>
          <h1 class="text-center">PART OF YOUR ORDER IS ON ITS WAY.</h1>
          <spacer size="20"></spacer>
          <hr style="width:30%; margin-left:auto; margin-right:auto;">
        </columns>
      </row>

      <row>
        <columns small="6" large="6">
          <p class="text-center">Order Number:</p>
        </columns>
        <columns small="6" large="6">
          <p class="text-center">Placed On:</p>
        </columns>
      </row>
      <row>
        <columns small="6" large="6">
          <u><p class="text-center" style="font-weight:bold;">58347234951</p></u>
        </columns>
        <columns small="6" large="6">
          <p class="text-center" style="font-weight:bold;">September 25, 2018</p>
        </columns> 
      </row>

      <row>
        <columns small="2" large="2">
          <img style="height:50px; width:auto; padding-left:20px;" src="assets/img/truck-icon.png" alt="truck icon">
        </columns>
        <columns small="10" large="10">
          <h5 style="padding-top:10px; font-weight:bold;">2 ITEMS SHIPPED</h5>
        </columns>
      </row>
      <row>
        <columns small="2" large="2">
          <img style="height:50px; width:auto; padding-left:25px;" src="assets/img/hourglass.png" alt="hourglass icon">
        </columns>
        <columns small="10" large="10">
          <h5 style="padding-top:10px; font-weight:bold;">1 ITEM NOT YET SHIPPED</h5>
        </columns>
      </row>
      <row>
        <columns small="2" large="2">
          <img style="height:50px; width:auto; padding-left:20px;" src="assets/img/boxes.png" alt="multiple items">
        </columns>
        <columns small="10" large="10">
          <h5 style="padding-top:10px; font-weight:bold;">MULTIPLE SHIPMENTS</h5>
          <p>We want you to get your items ASAP so we broke them up in multiple shipments.</p>
        </columns>
      </row>
    </div>


  </center>

</container>
</wrapper>
...