Code Snippet Library

The code on this page can be used to create sample correspondence such as letters, office memos, proposals, and so on.

Basic Versions

Resizable

The text in this style will display in a portrait or landscape orientation depending on screen dimensions and the length of content.

Dear Person,
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus molestie nunc non blandit massa enim nec dui nunc. Odio morbi quis commodo odio aenean sed adipiscing diam. Venenatis tellus in metus vulputate eu scelerisque. Proin sagittis nisl rhoncus mattis rhoncus. Facilisis sed odio morbi quis.
Ipsum dolor sit amet consectetur adipiscing elit. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec.
Thank you,
Other Person

Resizable Correspondence Code

<article style="margin: 1.5rem 5%; width: 90%; background-color: #eeeeee; border-radius: 3px;" title="Add short description of the item for screen readers">
    <div style="position: relative; top: -4px; left: -6px; padding: 2.5rem 10%; background: #ffffff; border: 2px solid #cccccc75; font-family: monospace; font-size: 90%;">
        <p>Content</p>
    </div>
</article>

Portrait

The following style should be used for content that you want to display in portrait orientation, regardless of screen dimensions.

Dear Person,
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus molestie nunc non blandit massa enim nec dui nunc. Odio morbi quis commodo odio aenean sed adipiscing diam. Venenatis tellus in metus vulputate eu scelerisque. Proin sagittis nisl rhoncus mattis rhoncus. Facilisis sed odio morbi quis.
Ipsum dolor sit amet consectetur adipiscing elit. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec.
Thank you,
Other Person

Portrait Orientation Code

<article style="margin: 1.5rem auto; max-width: 85vmin; background-color: #eeeeee; border-radius: 3px;" title="Add short description of the item for screen readers">
    <div style="position: relative; top: -4px; left: -6px; min-height: 87.5vmin; padding: 2.5rem 10%; background: #ffffff; border: 2px solid #cccccc75; font-family: monospace; font-size: 90%;">
        <p>Content</p>
    </div>
</article>

Examples

Letterhead Stationary Example

To demonstrate a case when someone may want to maintain a portrait orientation, this example shows styled elements (image and a bottom border) mimicking letterhead stationary as part of the content. To add decorative details that match your course's content and overall design style, be sure to place that code between the opening and closing <div> tags, before and/or after the sample content. Refer to the Images and Borders and Lines modules for ideas and guidance.

Dear Person,
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus molestie nunc non blandit massa enim nec dui nunc. Odio morbi quis commodo odio aenean sed adipiscing diam. Venenatis tellus in metus vulputate eu scelerisque. Proin sagittis nisl rhoncus mattis rhoncus. Facilisis sed odio morbi quis.
Ipsum dolor sit amet consectetur adipiscing elit. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec.
Thank you,
Someone From Some Office

Letterhead Stationary Code

<article style="margin: 1.5rem auto; max-width: 85vmin; background-color: #eeeeee; border-radius: 3px;" title="Add short description of the item as this is read by screen readers">
    <div style="position: relative; top: -4px; left: -6px; min-height: 87.5vmin; padding: 2.5rem 10%; background: #ffffff; border: 2px solid #cccccc75; font-family: monospace; font-size: 90%;">
        <p style="margin-bottom: 2.5rem;"><img src="Image source" alt="concise description of the image" /></p>
        <p>Content</p>
    </div>
</article>

Sample Receipt Example

Sample Receipt   

Item 1
$5.00

Item 2
$15.00

Item 3
$5.00

Item 4
$10.00


Total
$35.00

Thank you for shopping at Sample Store!

Sample Receipt Code

<article style="margin: 1.5rem auto; max-width: 25rem; background-color: #eeeeee; border-radius: 3px;" title="Add short description of the item as this is read by screen readers">
    <div style="position: relative; top: -4px; left: -6px; min-height: 27.5rem; padding: 2.5rem 10%; background: #ffffff; border: 2px solid #cccccc75; font-family: monospace; font-size: 90%;">
        <table style="min-width: 60%; width: 95%; margin: 1.5rem auto; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="3">
            <caption style="padding-bottom: 1.5rem; font-size: 150%;">Table Caption</caption>
            <colgroup>
                <col />
                <col style="width: 7.5rem;" />
            </colgroup>
            <tbody>
                <tr>
                    <th style="text-align: left;" scope="row">Item</th>
                    <td style="text-align: right;">$#.##</td>
                </tr>
                <tr>
                    <th style="text-align: left;" scope="row">Item</th>
                    <td style="text-align: right;">$#.##</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th style="text-align: left; padding: 1rem 3px;" scope="row">Total</th>
                    <td style="text-align: right; padding: 1rem 3px;">$#.##</td>
                </tr>
            </tfoot>
        </table>
        <p style="text-align: center; margin: 2.5rem 0;">Content</p>
    </div>
</article>

This style includes a table without a border to organize the receipt data. Refer to the Tables module for guidance on styling tables.

Modifications

Replace the <div> tag with the <blockquote> tag when used for quoted content.
Add outer <div style="overflow: auto;"> to manage overflow if preceded by float.