Code Snippet Library
The code on this page can be used to create sample correspondence such as letters, office memos, proposals, and so on.
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
<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>
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
<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>
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
<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>
| 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!
<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.
<div> tag with the <blockquote> tag when used for quoted content.