Dynamic Emails Component

Link to article: Dynamic Emails Component.


.help {
    display: flex;
    align-content: stretch;
    padding-top: 1em;
}

.help blockquote {
    margin: 0;
    font-size: 85%;
}

.help blockquote > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-right: 0;
    min-height: 2rem;
    margin: 0;
}

.help blockquote > p * {
    margin: 0 0.1rem;
    height: 100%;
}

.help blockquote:nth-of-type(1) {
    background: transparent;
    border: unset;
    box-shadow: unset;
    text-align: right;
    margin-right: 0;
    padding: 0;
}

.help blockquote:nth-of-type(1) > p {
    justify-content: flex-end;
}

.help blockquote:nth-of-type(2) {
    margin-left: 1em;
    width: 60%;
}


/* --- BASE CONTAINER CLASS --- */
.dyna-email-container,
.dyna-email-container *{
   box-sizing: border-box;
   margin: auto;
   margin-top: 10px;
   margin-bottom:10px;
}

.dyna-email-container{
    width: 85%;
    display: flex;
    position: relative;
}

/* --- MAIN EMAIL CLASS --- */
.dyna-email{
   display: grid;
   grid-template-areas:
      "header-box"
      "content-box"
      "bottom-box"
      "attachment-box";
   width: 100%;
   border: solid 3px #444444;
   position: relative;
}

/* --- EMAIL HEADER BOX & CONTENTS --- */
.dyna-email > .header-box{
   display: grid;
   grid-template-areas:
      "top-left-box top-middle-box top-right-box";
   width: 100%;
   min-height: 100px;
   grid-template-columns: 1fr 4fr 1fr;
   grid-template-rows: 1fr;
   justify-items: stretch;
   margin: 0 0 0 0;
}

.header-box .top-left-box{
   grid-area: top-left-box;
   grid-template-areas:
      "from-box"
      "to-box"
      "cc-box"
      "subject-box";
   grid-template-rows: 1fr 1fr 1fr 1fr;
   justify-items: end;
   padding-left: 2em;
   margin-bottom: 0px;
}

.top-left-box > .from-box, .to-box, .cc-box, .subject-box{
   display: block;
   text-align: right;
   font-weight: 700;
   margin-bottom: 0px;
   margin-top: 5px;
}

.top-left-box > .from-box{
   grid-area: from-box;
}

.top-left-box >.to-box{
   grid-area: to-box;
}

.top-left-box > .cc-box{
   grid-area: cc-box;
}

.top-left-box > .subject-box{
   grid-area: subject-box;
}

.header-box > .top-middle-box{
   grid-area: top-middle-box;
      grid-template-areas:
         "from-name-box"
         "to-name-box"
         "cc-text-box"
         "subject-text-box";
   grid-template-rows: 1fr 1fr 1fr 1fr;
   justify-items: start;
   margin-left: 5px;
   margin-bottom: 0px;
}

.top-middle-box > .from-name-box, .to-name-box, .cc-text-box, .subject-text-box{
   display: block;
   text-align: left;
   margin-top: 5px;
   margin-bottom: 0px;
   text-wrap: balance;
}

.top-middle-box > .from-name-box, .to-name-box, .cc-text-box{
   color: #b01;
}

.top-middle-box > .from-name-box{
   grid-area: from-name-box;
}

.top-middle-box > .to-name-box{
   grid-area: to-name-box;
}

.top-middle-box > .cc-text-box{
   grid-area: cc-text-box;
}

.top-middle-box > .subject-text-box{
   grid-area: subject-text-box;
}

.header-box > .top-right-box{
   width: 100%;
   grid-area: top-right-box;
   display: block;
   background-image: url("https://scp-wiki.wdfiles.com/local--files/the-great-hippo/SCP_icon%281%29.png");
   background-size: 75px 75px;
   background-position: right center;
   background-repeat: no-repeat;
   margin-top: 1em;
   margin-right: 1em;
   margin-left: -1em;
}

@media screen and (max-width: 800px){
   .header-box > .top-right-box{
      min-width: 75px;
      margin-left: -3em;
}
   .header-box > .top-left-box{
      padding-left: 1em;
}
}

/* --- EMAIL CONTENT BOX --- */
.dyna-email > .content-box{
   width: 100%;
   display: block;
   padding: 0em 1em;
   margin-top: 0px;
   margin-bottom: 0px;
   text-align: left;
   line-height: 1.5;
}

.content-box > hr{
   margin: 1em 0em;
   height: 2px;
   background-color: black;
}

/* --- EMAIL FOOTER BOX & CONTENTS --- */
.dyna-email > .footer-box{
   display: grid;
   grid-template-areas:
      "bottom-left-box bottom-right-box";
   width: 100%;
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 1fr;
   margin: 2em 0 1.5em 0;
}

.footer-box > .bottom-left-box{
   display: grid;
   grid-area: bottom-left-box;
   grid-template-areas:
      "name-box"
      "title-box"
      "sign-off-box";
   grid-template-rows: 1fr 1fr 1fr;
   justify-items: start;
   margin-left: 2em;
   padding-left: 1em;
   border-left: 2px solid black;
}

.bottom-left-box > .name-box, .title-box, .sign-off-box{
   display: block;
   text-align: left;
   width: 100%;
   margin: 2px 0;
}

.bottom-left-box > .name-box{
   grid-area: name-box;
   margin-top: 3px;
}

.bottom-left-box > .title-box{
   grid-area: title-box;
}

.bottom-left-box > .sign-off-box{
   grid-area: sign-off-box;
}

.footer-box > .bottom-right-box{
   width: 100%;
   max-height: 100px;
   grid-area: bottom-right-box;
   display: block;
   margin-top: 0;
   margin-bottom: 0;
   align-content: center;
   justify-items: center;
}

.footer-box > .bottom-right-box img{
   width: 100%;
   height: 100%;
   object-fit: contain;
   margin: 0;
}

/* --- EMAIL ATTACHMENT BOX --- */
.dyna-email > .attachment-box{
   display: block;
   grid-area: attachment-box;
   width: 85%;
   font-weight: 700;
   text-align: center;
   justify-self: center;
   border-top: 3px solid black;
   margin: 0 0 5px 0;
}

/* Hide CC Box if 'none' */
.cc-text-box.cc-none {
    display: none;
}
.cc-box.cc-none {
    display: none;
}
.top-left-box.cc-none {
   margin-top: 20px;
}
.top-middle-box.cc-none {
   margin-top: 20px;
}

/* Hide Title if 'none' */
.title-box.title-none {
    display:none;
    margin:0px;
}

.footer-box > .bottom-left-box:has(.title-box.title-none) {
       grid-template-areas:
      "name-box"
      "sign-off-box";
   grid-template-rows: 1fr 1fr;
}

.footer-box.name-noFooter {
    display: none;
}

```
background: #FFE36E;
```

border-radius: 10px; margin: 10px 10px 0 10px;

border-radius: 10px; margin: 10px 10px 0 10px;

(none)

```
blockquote
```
```
blockquote
```
```
code
```
```
blockquote
```
```
code
```
```
help
```
```
blockquote
```
```
code
```
```
blockquote
```
```
code
```
```
blockquote
```
```
code
```
```
help
```
```
blockquote
```
```
code
```
```
code
```
```
blockquote
```
```
blockquote
```
```
code
```
```
blockquote
```
```
dyna-email-container
```
```
dyna-email
```
```
header-box
```
```
top-left-box
```
```
cc-{$cc}
```
```
from-box
```
```
to-box
```
```
cc-box
```
```
cc-{$cc}
```
```
subject-box
```
```
top-middle-box
```
```
cc-{$cc}
```
```
from-name-box
```
```
to-name-box
```
```
cc-text-box
```
```
cc-{$cc}
```
```
subject-text-box
```
```
top-right-box
```
```
content-box
```
```
footer-box
```
```
name-{$name}
```
```
bottom-left-box
```
```
title-{$title}
```
```
name-box
```
```
name-{$name}
```
```
title-box
```
```
title-{$title}
```
```
sign-off-box
```
```
bottom-right-box
```
```
footer-box
```
```
bottom-left-box
```
```
name-box
```
```
title-box
```
```
sign-off-box
```
```
bottom-right-box
```
```
attachment-box
```
```
blockquote
```
```
footer-box
```
```
bottom-left-box
```
```
name-box
```
```
title-box
```
```
sign-off-box
```
```
bottom-right-box
```
```
attachment-box
```
```
blockquote
```

[[iftags +component]]

[[module css]]

.help {
    display: flex;
    align-content: stretch;
    padding-top: 1em;
}

.help blockquote {
    margin: 0;
    font-size: 85%;
}

.help blockquote > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-right: 0;
    min-height: 2rem;
    margin: 0;
}

.help blockquote > p * {
    margin: 0 0.1rem;
    height: 100%;
}

.help blockquote:nth-of-type(1) {
    background: transparent;
    border: unset;
    box-shadow: unset;
    text-align: right;
    margin-right: 0;
    padding: 0;
}

.help blockquote:nth-of-type(1) > p {
    justify-content: flex-end;
}

.help blockquote:nth-of-type(2) {
    margin-left: 1em;
    width: 60%;
}
[[/module]]

[[>]]
[[module Rate]]
[[/>]]

[[=]]
+ What is This?
[[/=]]

[[div class="blockquote"]]
This is a component by [[*user Queerious]], that allows you to include emails within your article that dynamically format based on screen size. This also comes with branding for the Foundation and a place to include a profile picture for your characters.

With this component, you get the joy of clean code to define your emails, all while avoiding having to interact with any tables!

To use this component, follow the steps below!
[[/div]]

-----
[[=]]
++ **__Step 1 - The Code__**
[[/=]]
[[div class="blockquote"]]
At the top of your page, you will need to include the following line of code:

[[div class="code"]]
@@[[include :scp-wiki:component:dynamic-emails code=--]]@@
[[/div]]

The above line only needs to be included **once** at the top of your article.
[[/div]]

-----
[[=]]
++ **__Step 2 - The Email__**
[[/=]]
[[div class="blockquote"]]
Wherever you would like to place an email in your work, you need to include the following code in total:

[[div class="code"]]
@@[[include :scp-wiki:component:dynamic-emails start=--@@
@@|from= sender@scp.int@@
@@|to= receiver@scp.int@@
@@|cc= copied@scp.int@@
@@|subject= Email Subject@@
@@]]@@
@@This is where the raw text goes, the entire body of your email. You can just write this as desired, including custom **formatting** or ##red|color## changes, and there should be no issues. @@
@@[[include :scp-wiki:component:dynamic-emails end=--@@
@@|name= Sender's Name@@
@@|title= Foundation Researcher@@
@@|signoff= Secure, Contain, Protect@@
@@|signoff-icon= https://scp-wiki.wikidot.com/local--files/component:dynamic-emails/Default_Profile_Icon.png@@
@@]]@@
[[/div]]

There's a lot going on here, so let's break it down some more.

[[/div]]

[[=]]
++ **__Step 2.1: The Start Include__**
[[/=]]

[[div_ class="help"]]
> Include for the start of the email: ↦
> 
> Text that appears in the 'from' field: ↦
> 
> Text that appears in the 'to' field ↦
> 
> Text that appears in the 'CC' field  ↦
> 
> Text that appears in the 'Subject' field  ↦
> 
> The end for the start include. ↦

> @@[[include :scp-wiki:component:dynamic-emails start=--@@
> 
> |from= @@sender@scp.int@@
> 
> |to= @@receiver@scp.int@@
> 
> |cc= @@copied@scp.int@@
> 
> |subject= Email Subject
> 
> @@]]@@
[[/div]]

[[div class="blockquote"]]
You are able to put any text into the above fields, with the following restrictions:
* You are unable to format the text in the from/to/cc field using CSS, due to it being parsed as plaintext, to prevent a hyperlink from being created.

To modify the color of the text in those fields, use the following code within your CSS Module:
[[div class="code"]]
@@.top-middle-box > .from-name-box, .to-name-box, .cc-text-box{@@
   @@color: #b01;@@
@@}@@
[[/div]]

Any color can be used. To change a single field, delete the other 'name-box' references.

[[/div]]

[[div class="blockquote" style="background: #FFE36E;"]]
= **NOTE: If you do not want to have a CC field, simply enter:**
[[div class="code"]]
@@|cc=none@@
[[/div]]

This will hide the fields.
[[/div]]

[[=]]
++ **__Step 2.2: The Email Text__**
[[/=]]

[[div class="blockquote"]]
The email body itself goes here. This can take any formatting for the text, as well as hyperlinks and more. You can also include other divs and anything else you want! (Can't 100% promise it will work, but it should!

This section should go right after the **@@]]@@** from the start include as such:

[[div class="code"]]
This is where the raw text goes. You can write whatever you want here, and it should format it correctly! There's nothing else special you need to do, this will just go between the start and end includes!
[[/div]]
[[/div]]

[[=]]
++ **__Step 2.3: The End Include__**
[[/=]]

[[div_ class="help"]]
> Include for the ending of the email: ↦
> 
> The sender's name in the signature: ↦
> 
> The sender's title in the signature: ↦
> 
> The sign-off in the signature  ↦
> 
> URL Link to the profile image ↦
> 
> The end for the include. ↦

> @@[[include :scp-wiki:component:dynamic-emails end=--@@
> 
> |name= Sender's Name
> 
> |title= Foundation Researcher
> 
> |signoff= Secure, Contain, Protect
> 
> |signoff-icon= @@https://URL.website@@
> 
> @@]]@@
[[/div]]

[[div class="blockquote"]]
You are able to put any text into the name, title and signoff fields, with standard CSS formatting.

The 'signoff-icon' specifically takes an image URL, and will resize it to fit in the given space. For convenience, a default blank profile icon is included here:

[[div class="code"]]
@@https://scp-wiki.wikidot.com/local--files/component:dynamic-emails/Default_Profile_Icon.png@@
[[/div]]

If you do not want anything to appear, instead include this link, which is a transparent image, as leaving this field empty causes the module to display incorrectly.

[[div class="code"]]
@@https://scp-wiki.wikidot.com/local--files/component:dynamic-emails/transparent.png@@
[[/div]]

[[/div]]
[[=]]
If you did everything right, you will have an email that looks something like this:
[[div class="blockquote"]]
[[image https://scp-wiki.wdfiles.com/local--files/component%3Adynamic-emails/ExampleEmail.PNG]]
[[/div]]
[[/=]]

-----

[[=]]
++ **__Step Bonus: Attachment Variant__**
[[/=]]

[[div class="blockquote"]]
As an alternative option, this component also supports emails with image attachments! To give your email an attachment, instead of following 'Step 2.3: The End Include', use the following code block:

[[div class="code"]]
**@@[[include :scp-wiki:component:dynamic-emails@@ attachment-end=@@--@@**
@@|name= Name@@
@@|title= Title@@
@@|signoff= Secure, Contain, Protect@@
@@|signoff-icon= https://scp-wiki.wikidot.com/local--files/component:dynamic-emails/Default_Profile_Icon.png@@
**@@|attachment= https://scp-wiki.wikidot.com/local--files/component:dynamic-emails/Default_Profile_Icon.png@@**
@@]]@@
[[/div]]

The main differences have been bolded in the example above, but the only element you need to pay attention to is the **"|attachment="** field. This field takes any image URL, and will appear as below:

[[image https://scp-wiki.wikidot.com/local--files/component:dynamic-emails/EmailAttachmentClosed.PNG]]

The attachment is a collapsible, that when clicked, reveals the attached image:

[[image https://scp-wiki.wikidot.com/local--files/component:dynamic-emails/EmailAttachmentOpen.PNG]]
[[/div]]

[[div class="blockquote"]]
[[=]]
+++ **__One Last Thing...__**
[[/=]]
This component is should be compatible with any Sigma, Basalt and BHL themes! If you run into technical issues, please let [[*user Queerious]] know!
@@ @@
[[/div]]
[[=]]
+ ##black|Source Code in Page Source##
[[/=]]
@@ @@
[[/iftags]]


[[iftags -component]]

[!-- {$code}]
[[module css]]

/* --- BASE CONTAINER CLASS --- */
.dyna-email-container,
.dyna-email-container *{
   box-sizing: border-box;
   margin: auto;
   margin-top: 10px;
   margin-bottom:10px;
}

.dyna-email-container{
    width: 85%;
    display: flex;
    position: relative;
}

/* --- MAIN EMAIL CLASS --- */
.dyna-email{
   display: grid;
   grid-template-areas:
      "header-box"
      "content-box"
      "bottom-box"
      "attachment-box";
   width: 100%;
   border: solid 3px #444444;
   position: relative;
}

/* --- EMAIL HEADER BOX & CONTENTS --- */
.dyna-email > .header-box{
   display: grid;
   grid-template-areas:
      "top-left-box top-middle-box top-right-box";
   width: 100%;
   min-height: 100px;
   grid-template-columns: 1fr 4fr 1fr;
   grid-template-rows: 1fr;
   justify-items: stretch;
   margin: 0 0 0 0;
}

.header-box .top-left-box{
   grid-area: top-left-box;
   grid-template-areas:
      "from-box"
      "to-box"
      "cc-box"
      "subject-box";
   grid-template-rows: 1fr 1fr 1fr 1fr;
   justify-items: end;
   padding-left: 2em;
   margin-bottom: 0px;
}

.top-left-box > .from-box, .to-box, .cc-box, .subject-box{
   display: block;
   text-align: right;
   font-weight: 700;
   margin-bottom: 0px;
   margin-top: 5px;
}

.top-left-box > .from-box{
   grid-area: from-box;
}

.top-left-box >.to-box{
   grid-area: to-box;
}

.top-left-box > .cc-box{
   grid-area: cc-box;
}

.top-left-box > .subject-box{
   grid-area: subject-box;
}

.header-box > .top-middle-box{
   grid-area: top-middle-box;
      grid-template-areas:
         "from-name-box"
         "to-name-box"
         "cc-text-box"
         "subject-text-box";
   grid-template-rows: 1fr 1fr 1fr 1fr;
   justify-items: start;
   margin-left: 5px;
   margin-bottom: 0px;
}

.top-middle-box > .from-name-box, .to-name-box, .cc-text-box, .subject-text-box{
   display: block;
   text-align: left;
   margin-top: 5px;
   margin-bottom: 0px;
   text-wrap: balance;
}

.top-middle-box > .from-name-box, .to-name-box, .cc-text-box{
   color: #b01;
}

.top-middle-box > .from-name-box{
   grid-area: from-name-box;
}

.top-middle-box > .to-name-box{
   grid-area: to-name-box;
}

.top-middle-box > .cc-text-box{
   grid-area: cc-text-box;
}

.top-middle-box > .subject-text-box{
   grid-area: subject-text-box;
}

.header-box > .top-right-box{
   width: 100%;
   grid-area: top-right-box;
   display: block;
   background-image: url("https://scp-wiki.wdfiles.com/local--files/the-great-hippo/SCP_icon%281%29.png");
   background-size: 75px 75px;
   background-position: right center;
   background-repeat: no-repeat;
   margin-top: 1em;
   margin-right: 1em;
   margin-left: -1em;
}

@media screen and (max-width: 800px){
   .header-box > .top-right-box{
      min-width: 75px;
      margin-left: -3em;
}
   .header-box > .top-left-box{
      padding-left: 1em;
}
}

/* --- EMAIL CONTENT BOX --- */
.dyna-email > .content-box{
   width: 100%;
   display: block;
   padding: 0em 1em;
   margin-top: 0px;
   margin-bottom: 0px;
   text-align: left;
   line-height: 1.5;
}

.content-box > hr{
   margin: 1em 0em;
   height: 2px;
   background-color: black;
}

/* --- EMAIL FOOTER BOX & CONTENTS --- */
.dyna-email > .footer-box{
   display: grid;
   grid-template-areas:
      "bottom-left-box bottom-right-box";
   width: 100%;
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 1fr;
   margin: 2em 0 1.5em 0;
}

.footer-box > .bottom-left-box{
   display: grid;
   grid-area: bottom-left-box;
   grid-template-areas:
      "name-box"
      "title-box"
      "sign-off-box";
   grid-template-rows: 1fr 1fr 1fr;
   justify-items: start;
   margin-left: 2em;
   padding-left: 1em;
   border-left: 2px solid black;
}

.bottom-left-box > .name-box, .title-box, .sign-off-box{
   display: block;
   text-align: left;
   width: 100%;
   margin: 2px 0;
}

.bottom-left-box > .name-box{
   grid-area: name-box;
   margin-top: 3px;
}

.bottom-left-box > .title-box{
   grid-area: title-box;
}

.bottom-left-box > .sign-off-box{
   grid-area: sign-off-box;
}

.footer-box > .bottom-right-box{
   width: 100%;
   max-height: 100px;
   grid-area: bottom-right-box;
   display: block;
   margin-top: 0;
   margin-bottom: 0;
   align-content: center;
   justify-items: center;
}

.footer-box > .bottom-right-box img{
   width: 100%;
   height: 100%;
   object-fit: contain;
   margin: 0;
}

/* --- EMAIL ATTACHMENT BOX --- */
.dyna-email > .attachment-box{
   display: block;
   grid-area: attachment-box;
   width: 85%;
   font-weight: 700;
   text-align: center;
   justify-self: center;
   border-top: 3px solid black;
   margin: 0 0 5px 0;
}

/* Hide CC Box if 'none' */
.cc-text-box.cc-none {
    display: none;
}
.cc-box.cc-none {
    display: none;
}
.top-left-box.cc-none {
   margin-top: 20px;
}
.top-middle-box.cc-none {
   margin-top: 20px;
}

/* Hide Title if 'none' */
.title-box.title-none {
    display:none;
    margin:0px;
}

.footer-box > .bottom-left-box:has(.title-box.title-none) {
       grid-template-areas:
      "name-box"
      "sign-off-box";
   grid-template-rows: 1fr 1fr;
}

.footer-box.name-noFooter {
    display: none;
}

[[/module]]
[!-- --]

[!-- {$start}]
[[div_ class="dyna-email-container"]]
   [[div_ class="dyna-email"]]
      [[div_ class="header-box"]]
         [[div_ class="top-left-box cc-{$cc}"]]
            [[div_ class="from-box"]]
               From:
            [[/div]]
            [[div_ class="to-box"]]
               To:
            [[/div]]
            [[div_ class="cc-box cc-{$cc}"]]
               CC:
            [[/div]]
            [[div_ class="subject-box"]]
               Subject:
            [[/div]]
         [[/div]]
         [[div_ class="top-middle-box cc-{$cc}"]]
            [[div_ class="from-name-box"]]
               @@{$from}@@
            [[/div]]
            [[div_ class="to-name-box"]]
               @@{$to}@@
            [[/div]]
            [[div_ class="cc-text-box cc-{$cc}"]]
               @@{$cc}@@
            [[/div]]
            [[div_ class="subject-text-box"]]
               {$subject}
            [[/div]]
         [[/div]]
         [[div_ class="top-right-box"]]
         [[/div]]
      [[/div]]
      [[div_ class="content-box"]]
-----
[!-- --]

[!-- {$end}]
      [[/div]]
      [[div_ class="footer-box name-{$name}"]]
         [[div_ class="bottom-left-box title-{$title}"]]
            [[div_ class="name-box name-{$name}"]]
               {$name}
            [[/div]]
            [[div_ class="title-box title-{$title}"]]
               {$title}
            [[/div]]
            [[div_ class="sign-off-box"]]
               {$signoff}
            [[/div]]
         [[/div]]
         [[div_ class="bottom-right-box"]]
            [[image {$signoff-icon}]]
         [[/div]]
      [[/div]]
   [[/div]]
[[/div]]
[!-- --]

[!-- {$attachment-end}]
      [[/div]]
      [[div_ class="footer-box"]]
         [[div_ class="bottom-left-box"]]
            [[div_ class="name-box"]]
               {$name}
            [[/div]]
            [[div_ class="title-box"]]
               {$title}
            [[/div]]
            [[div_ class="sign-off-box"]]
               {$signoff}
            [[/div]]
         [[/div]]
         [[div_ class="bottom-right-box"]]
            [[image {$signoff-icon}]]
         [[/div]]
      [[/div]]
      [[div_ class="attachment-box"]]
         [[collapsible show="*Open email attachment*" hide="Close"]]
            [[div class="blockquote" style="border-radius: 10px; margin: 10px 10px 0 10px;"]]
               [[image {$attachment}]]
            [[/div]]
          [[/collapsible]]
      [[/div]]
   [[/div]]
[[/div]]
[!-- --]

[!-- {$attachment-flex-start}]
      [[/div]]
      [[div_ class="footer-box"]]
         [[div_ class="bottom-left-box"]]
            [[div_ class="name-box"]]
               {$name}
            [[/div]]
            [[div_ class="title-box"]]
               {$title}
            [[/div]]
            [[div_ class="sign-off-box"]]
               {$signoff}
            [[/div]]
         [[/div]]
         [[div_ class="bottom-right-box"]]
            [[image {$signoff-icon}]]
         [[/div]]
      [[/div]]
      [[div_ class="attachment-box"]]
         [[collapsible show="*Open email attachment*" hide="Close"]]
            [[div class="blockquote" style="border-radius: 10px; margin: 10px 10px 0 10px;"]]
[!-- --]

[!-- {$attachment-flex-end}]
            [[/div]]
          [[/collapsible]]
      [[/div]]
   [[/div]]
[[/div]]
[!-- --]
[[/iftags]]

Dynamic Emails Component

Module Styles

Inline Styles

Includes

CSS Classes

Page Source