Style guide

Best Practices for Images

• Never link to an image on another website. Always upload the image locally to our webserver. This is bad form because you are using someone else's resources to present images to our visitors. Plus, if they ever deleted the image, changed the file name, or whatever, the image would be gone from our page and we wouldn't know why. We keep control by only self-hosting images.
• Never copy/paste an image into the editor window. This causes the image to be converted to text for storage in our database, then must be reconverted to an image again in the viewer's web browser. This is a high-overhead procedure on all sides of the equation. Instead, upload the file locally to the webserver, and use the image buttons on the editor toolbar to reference it.
• Choose file formats carefully. JPEG is almost always preferable to PNG, due to its smaller file size. PNG might be clearer for fine text details, though. PNG also supports transparency, whereas JPG does not.
• Image dimensions matter. You probably don't want to have an image larger than 1920x1080. Consider resizing before upload if it's a very large image. This will make for a smaller file size, and it will also look better on the screen. Also, just because you can resize the display size of the image on screen by defining the width and height, you're not actually changing the file at all.
• If you use the "Add Media Item" button, the social media open graph image will be automatically set.
• Otherwise, you can expand the "Metatags" option on the editing page and set a value for "Image". It should be the full web address of the image you want to show up when people share the page.

---

Phosfluorescently e-enable adaptive synergy for strategic quality vectors. Continually transform fully tested expertise with competitive technologies appropriately communicate.

<p class="large">Phosfluorescently e-enable adaptive synergy for strategic quality vectors. Continually transform fully tested expertise with competitive technologies appropriately communicate.</p>

Heading 2

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Linked Heading 2

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, esse, quo distinctio dolores magni reprehenderit id est at fugiat veritatis fugit dignissimos sed ut facere molestias illo impedit. Tempora, iure!

Heading 3

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Heading 4

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Heading 5

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Links

Default link

Bordered link

<a class="link--bordered" href="#">Bordered link</a>

Hover effect 2

<a class="link--hover-style-2" href="#">Hover effect 2</a>

Hover effect 3

<a class="link--hover-style-3" href="#">Hover effect 3</a>

Blockquote

Phosfluorescently e-enable adaptive synergy for strategic quality vectors. Continually transform fully tested expertise with quote link. Appropriately communicate adaptive imperatives rather than value-added potentialities. Conveniently harness frictionless outsourcing.

Messages

<div aria-label="Status message" class="messages messages--status" role="contentinfo">
<h2 class="visually-hidden">Status message</h2>
Sample status message. Page <em><strong>Typography</strong></em> has been updated.</div>

<div aria-label="Error message" class="messages messages--error" role="contentinfo">
<h2 class="visually-hidden">Status message</h2>
Sample error message. There is a security update available for your version of Drupal. To ensure the security of your server, you should update immediately! See the available updates page for more information.</div>

<div aria-label="Warningmessage" class="messages messages--warning" role="contentinfo">
<h2 class="visually-hidden">Status message</h2>
Sample warning message. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

 

Paragraph With Links

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Dropcap

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

<p class="text--drop-cap">Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec odio. Quisque volutpat mattis eros. <a href="#">Nullam malesuada</a> erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>

Ordered List

1. This is a sample Ordered List.
2. Lorem ipsum dolor sit amet consectetuer.
3. Congue Quisque augue elit dolor.
   1. Something goes here.
   2. And another here
4. Congue Quisque augue elit dolor nibh.

Unordered List

• This is a sample Unordered List.
• Condimentum quis.
• Congue Quisque augue elit dolor.
  • Something goes here.
  • And another here
    • Something here as well
    • Something here as well
    • Something here as well
  • Then one more
• Nunc cursus sem et pretium sapien eget.

Fieldset

Account information

<fieldset><legend>Account information</legend></fieldset>

Buttons & Text fields

Find out more

<a class="mt-button" href="#">Find out more</a>

Text Fields

Select Dropdown

- Any -ApartmentFamily HouseOffice

Table

Encapsulate tables within a class "table-responsive" DIV:

<div class="table-responsive">
<table>
…
</div>