<section>
    <h4>Filename Formatting Examples (1/3/2018 9:01:02 PM)</h4>
    <ul class="examples">
        <li>{{"{0:MMddyyyy} = 01032018"}}</li>
        <li>{{"{0:MMddyyyy}-collection = 01032018-collection"}}</li>
        <li>{{"{0:MMddyy} = 010318"}}</li>
        <li>{{"{0:MM-dd-yyyy} = 01-03-2018"}}</li>
        <li>{{"{0:M-d-yyyy} = 1-3-2018"}}</li>
        <li>{{"{0:MM/dd/yy hh:mm:ss tt} = 01/03/18 09:01:02 PM"}}</li>
        <li>{{"{0:M/d/yy h:m:s t} = 1/3/18 9:1:2 P"}}</li>
    </ul>

    <h4>Filename Formatting Codes</h4>
    <ul class="codes">
        <li>M = 1 digit month (1)</li>
        <li>MM = 2 digit month (01)</li>
        <li>d = 1 digit day (3)</li>
        <li>dd = 2 digit day (03)</li>
        <li>yy = 2 digit year (18)</li>
        <li>yyyy = 4 digit year (2018)</li>
        <li>h = 1 digit hour (9)</li>
        <li>hh = 2 digit hour (09)</li>
        <li>m = 1 digit minute (1)</li>
        <li>mm = 2 digit minute (01)</li>
        <li>s = 1 digit second (2)</li>
        <li>ss = 2 digit second (02)</li>
        <li>t = 1 character AM/PM indicator (P)</li>
        <li>tt= 2 character AM/PM indicator (PM)</li>
    </ul>
</section>
<button mat-button class="close-button" (click)="dismiss()">Close</button>

./filename-format-help-snackbar.component.css

section {
    color: black;
}

h4 {
    margin-bottom: .5em;
}

ul {
    margin: 0;
}

.examples, .codes {
    list-style-type: none;
    padding-inline-start: 2em;
}

.close-button {
    display: block;
    float: right;
    margin-top: 1em;
    margin-right: 0;
    margin-bottom: 0;
}