Mazel provides a lot of utility elements that you can use to create complete and fully-fledged email. So, let's look at some of those. Now, we have already seen a utility element. I believe it was inside of our Notification component. Yes, here it is, this if element. Of course, this is for making a decision, and here we are conditionally showing our message. But we can also loop, we can also fetch information from a URL. So, I want to do this.

But we can also loop, we can also fetch information from a URL. So, I want to do this. We have our notification emails, but I want a digest so that every week we could get a list of all of the invoices that were approved for the prior week. So, let's take our invoice approval, and let's copy that, and let's name this simply Digest. And of course, we need to make some changes here. So, the title is going to be Invoice Approval Digest. And we don't really need any of this content, so let's get rid of our message as well as that Vue Invoice link. So, now we have our digest, and we just need to, well, build this email.

that Vue Invoice link. So, now we have our digest, and we just need to, well, build this email. But of course, we want to build a complete email that has all of the approved invoices. So, I have a web service that has all of the approved invoices. There are three, and each one of these invoices has an ID, it has a vendor, the description, the date of the invoice, the amount, and the date that it was approved. So, we want to include all of this information, and we need to fetch this information using the fetch element. It has a URL attribute, and we just specify the URL that we want to fetch. So, I have this at approvals.test, and it is the approved endpoint.

It has a URL attribute, and we just specify the URL that we want to fetch. So, I have this at approvals.test, and it is the approved endpoint. Now, this is going to give us a response object that we can use, and this is going to be the data of whatever we fetched. So, the data for our digest is an array. So, in this case, response is an array, which means that, of course, we need to iterate over that array so that we can display all of those invoices. So, we are going to use an element called each. This is essentially a forEach loop, and it has an attribute called loop where we define our loop here.

This is essentially a foreach loop, and it has an attribute called loop where we define our loop here. So, we want to work with the invoices in the response, and we can also get the index if we needed that value. But in our case, we don't need the index, we just need the invoice. Let's have an h5 element where we are going to output the vendor as well as the amount. We'll start there, and then after that h5 element, we'll have a div. Let's have some bottom padding so that we can have the invoice description inside of a p element, and then we will have an ul, and this is where we will have our dates. So, the first is the date of the invoice, and that property is invoice_date, and then

a paragraph, and then we will have an unordered list, and this is where we will have our dates. So, the first is the date of the invoice, and that property is invoiceDate, and then we need the date the invoice was approved. So, that will be approvedDate, and then the property is approvalDate. So, that should get us started, and that's great, except I don't want everything in the center here. That kind of makes everything look weird. So, let's do this. We're going to wrap this whole thing with a div, and we'll say text-left so that everything inside of this div will be aligned to the left, and that looks a lot better.

We're going to wrap this whole thing with a div, and we'll say text-left so that everything inside of this div will be aligned to the left, and that looks a lot better. But I want to take this a step further. For this digest, I want to use a web font. Now, of course, we could use whatever font that the client has, but I want to use a web font. So, we can do that by injecting a font into our template, and we do that with another element called a stack. So, let's first of all define this stack, and then we'll talk about what it is. So, basically, I want to be able to inject things into the head element on our layout,

So, let's first of all define this stack, and then we'll talk about what it is. So, basically, I want to be able to inject things into the head element on our layout, and we define a stack to do that, and I'm going to define this stack before our page.css is included in the page. So, we have this stack element, and we need to give it a name, and I'm going to call it head. So, the idea behind this is that if I need to inject anything into the head element on our layout, then I'm going to push things into this stack, and it's going to appear right here where we have defined that stack. So, inside of our template, we can push something into that stack with the push element.

right here where we have defined that stack. So, inside of our template, we can push something into that stack with the push element. We just need to use the same name that we used when we defined that stack. So, the name is head, and there is no correlation between the name and the head element. The name is arbitrary. I just picked head because, to me, this means, hey, I'm going to put things into the head of the layout. So, if I wanted to add some style here, I could, and I could change the background color to red if I wanted to do that, but I don't. Instead, I want to define a font face.

to red if I wanted to do that, but I don't. Instead, I want to define a font face. So, I'm going to paste this in. This is a Google font called Public Sans. Now, we need to go to the tailwind.config.js, and we need to go to the font family so that we can add Public Sans. And then that is simply going to be Public Sans. So, now we can go back to our template, and for this div element, I want all of this text to use this new font. So, we'll say font Public Sans, and voila, we see our font change.

to use this new font. So, we'll say font Public Sans, and voila, we see our font change. So, that's awesome. That is fantastic, except it doesn't work in Outlook for Windows. And, you know, you can say what you want about Outlook on Windows, but it is probably the most used email client in business. So, we kind of need to take that into account. Now, the reason why this won't work in Outlook for Windows is because it does not support the font-face. So, we need to provide a fallback here.

the font face. So, we need to provide a fallback here. Otherwise, it's just going to look like that, and I don't want it to look that way. So, here's what we can do. We are still going to be inside of our push element, but Mazel gives us an element called Outlook. And anything that is inside of this Outlook element is going to be specifically used for Outlook. Now, remember, this isn't for generating the email. This isn't going to change the HTML that is generated.

Now, remember, this isn't for generating the email. This isn't going to change the HTML that is generated. This is going to change how it is rendered within the different clients, because all of this has to be there, including the font face, even though Outlook doesn't support it. And so, here we can have our style, and we can go ahead and say that the font public sans is going to have a font family of sans-serif. But we need to say !important here. And the reason is very simple, because even though we are trying to target different clients, you know, the HTML is still going to be the same.

And the reason is very simple, because even though we are trying to target different clients, you know, the font public sans class is still going to be in the resulting HTML. So, therefore, in order for Outlook to display this font-family of sans-serif, we need to use !important here. Now, they've really done a really good job of providing the ability to target different versions of Outlook, because in Outlook, you would do that using conditional comments. If you've never had to worry about targeting Internet Explorer, then you don't know what conditional comments are. Conditional comments were HTML comments that were specially designed and crafted to target

conditional comments are. Conditional comments were HTML comments that were specially designed and crafted to target specific versions of Internet Explorer. The same thing is available for Outlook. So, if you needed to target only Outlook 2016, which, you know, as I'm recording this is eight years old, but people still use it, then you could use this only attribute and specify 2016. And that is going to translate into the conditional comments that Outlook needs in order to target Outlook 2016. But if you need to target 2013 and 2016, you can do that.

Outlook 2016. But if you need to target 2013 and 2016, you can do that. Just specify your different versions with a comma, and you're good to go. If you needed to provide a range, like, for example, if you wanted to include the outlooks of 2013 and below, you could use this less than or equal attribute, LTE, set that to 2013, and then that excludes everything but, well, 2016 and beyond. So, there are a variety of different options that you can use to target specific versions of Outlook. But we're not going to worry about that. We're just going to use Outlook here.

But we're not going to worry about that. We're just going to use Outlook here. If there's an Outlook element, you might think that there is a not Outlook element, and you would be correct. So, you can target Outlook, and then you can target not Outlook if you needed to. So, those are, what, three, four elements that we've talked about, and there are many others that Mazel provides. So, be sure to check the documentation.