The large message box above is an example of a jumbotron element, for use in highlighting important information.

Below is the Hugo shortcode that will produce a jumbotron in markdown.

{{< jumbotron >}}
# We've got style.

This pattern library contains style information and markup best practices for ARIN.net. The color palettes, typefaces, icons and more detailed below reflect those in use on ARIN's main website, and this document will be updated to reflect changes.
{{< /jumbotron >}}

Base UI Colors

In addition to ARIN’s $brand-logo blue, the site employs a core color set for main UI items. The $brand-primary is an accessible shade of the logo blue.

Core Color Set

Brand Blue Color Set

Expanded Palette

Some UI elements employ additional colors based on the core set. Several $brand- colors, listed below, have associated meanings; these have been adapted from the Bootstrap framework.

Accessibility

ARIN.net’s goal is to meet level AA of the World Wide Web Consortium’s Web Content Accessibility Guidelines 2.0 (WCAG 2.0).

Elements of this palette have been designed to meet or exceed minimum contrast ratios. For example, all colors including a dark label may be combined with white text, and all colors with a light label (except $gray-light) may be combined with the default text color at any size.

Combinations appearing in this guide have been tested and found to be in compliance. Other elements appearing on the site – including images and graphics – are tested with both automated tools, such as axe and manual tools, such as contrast-ratio.com.

Font Family

ARIN.net employs a common system font stack meant to create a more consistent typographical look across operating systems and screen sizes.

Body text

The default text size, used most often in ancillary elements, is 14.4px. Main text areas use a 16px size with a relative line height of 1.5 for readability. The default color is $gray-dark, or #333.

Intro text

Some pages include a stylized paragraph of introductory text like the sentence below:

This is an example of introductory text.

This can be included in markdown with the following Hugo shortcode:

{{< intro-text >}}
This is an example of introductory text.
{{< /intro-text >}}

Headings

Below are examples of the default style applied to section headings. They retain their sizing from the Bootstrap framework. Heading 1 page titles are $brand-logo blue, heading 2 titles are $brand-dark, and heading 3 titles are $brand-darker.

In most cases on ARIN.net, images and graphics – as well as embedded videos – fill the width of the column where they appear. By default, if the image or graphic file is at least as wide as the column, it will fill the space and resize dynamically. This applies to any main text area.

Widths

Max width: 990px
The widest main text column available is approximately 990px, so images or graphics sized to this width appear consistently at all screen sizes. Images wider than this are used only in special cases.

Note: Because the site is responsive and has a variable column layout, images and graphics that would become illegible at small widths should be avoided. Modern screen sizes vary widely; see http://screensiz.es/ for a comprehensive reference.

Alt text

All images and graphics should include accessible alt text that conveys the same meaning as the image. See the WCAG 2.0 standards for an explanation of best practices and examples.

Advanced Displays

For cases in which a full-width image or graphic won’t work, the image Hugo shortcode provides additional options:

src: the filepath (required)
alt: the alternate text (required)
style: options are rounded, rounded-circle, thumbnail
float: options are start or end
caption: text to display below the image or graphic

Basic syntax:

{{< image src="/path/to/file.jpg" alt="Alternate text" >}}

Adding style makes use of Bootstrap’s included image classes:

style=“rounded”

style=“rounded-circle”

style=“thumbnail”

Adding float allows text to flow around the image or graphic. To preserve readability, a floated image’s width is limited to 50% of the column; however, if larger, it will expand at mobile sizes:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu metus libero. Nullam risus nisi, molestie nec enim eu, euismod eleifend enim. Vestibulum porttitor dapibus lectus et iaculis. Maecenas sit amet convallis velit. Vestibulum vitae libero sed leo vestibulum blandit. Sed at sem ultrices, sollicitudin mauris a, fermentum augue. Nam quis velit placerat, mattis arcu dictum, aliquet metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu metus libero. Nullam risus nisi, molestie nec enim eu, euismod eleifend enim. Vestibulum porttitor dapibus lectus et iaculis. Maecenas sit amet convallis velit. Vestibulum vitae libero sed leo vestibulum blandit. Sed at sem ultrices, sollicitudin mauris a, fermentum augue. Nam quis velit placerat, mattis arcu dictum, aliquet metus.

Example of a start float:

{{< image src="https://placehold.co/250x150" alt="start float placeholder" float="start" >}}Lorem ipsum dolor sit amet ...

Adding a caption displays the text below the image in $gray 14px text:

{{< image src="https://placehold.co/990x100" alt="caption placeholder" style="rounded" caption="I am a short bit of text that adds context to the above image!" >}}

Note: Captions and alt text serve different purposes and should not be the same.

File types

ARIN follows generally accepted practices for image formats considering clarity and file size:

• Full color, photographic images are presented in JPEG (or JPG) format.
• Most informational graphics, especially those with a lot of detail, are presented in PNG format.
• When appropriate, illustrative or informational graphic elements may be presented in SVG format.

Modern, high-resolution displays have introduced new considerations to sizing images online. To reproduce clearly on such screens, images are often sized twice as large as their intended display size. That would mean sizing the max-width image described in this section to 1980px for an 990px space, for example. The site may employ this tactic to improve visual quality when it does not unreasonably increase file sizes.

Accessibility

ARIN.net’s goal is to meet level AA of the World Wide Web Consortium’s Web Content Accessibility Guidelines 2.0 (WCAG 2.0). This includes providing appropriate text alternatives for all non-text content. See the Colors section of this guide for additional information.

Font Awesome

ARIN.net uses a customized Font Awesome icon set. For most instances, the fixed-width fa-fw size class is used for consistency. Icons used for purely decorative purposes should include aria-hidden="true" in the markup.

The following are commonly used icons:

By default, the icons respond to classes that increase their size relative to the surrounding content.

Bootstrap Defaults

This is the basic responsive grid structure underpinning Bootstrap v4.3.1.

Primary Secondary Success Danger Warning Info Light Dark Payment Link

In a markdown document, buttons can be created by wrapping a link in the button Hugo shortcode. The default is button light.

Button Text

{{< button >}}
[Button Text](/styleguide/)
{{< /button >}}

The shortcode also accepts any of the defined button classes as well as sizes sm or lg, for example:

Button Text

{{< button primary lg >}}
[Button Text](/styleguide/)
{{< /button >}}

An inline link within a normal paragraph will appear $brand-primary blue with an underline.

Bootstrap panels expand to fill their container width and are responsive by default. They follow the site’s base UI color scheme.

Organizationally, panel headings are h2. For panels that don’t fit in the regular document flow, use panel-display-only.

Panels can be created in markdown documents with the panel Hugo shortcode, which requires a valid class type (danger in the example below) and a title for the panel (“Panel Danger” below).

{{< panel danger "Panel Danger" >}}
panel-danger
{{< /panel >}}

Two or more panels can be laid out alongside one another by using the group Hugo shortcode.

{{< group >}}
...
{{< /group >}}

Infoboxes are a way to highlight short pieces of information in larger sections of text. The infobox Hugo shortcode creates the element. For example:

{{< infobox >}}
This text information should draw your eyes!
{{< /infobox >}}

Content headers are responsive boxes for providing content overview or highlighting information. A companion element to the jumbotron, they are structured as two or three boxes that fill their containing space horizontally. Structurally, each content box is an h3.

Group Title

The corresponding Hugo shortcodes are content_header for the unit and a content_box for each section:

## Group Title

{{< content_header >}}

{{< content_box >}}
### Header title 1

Content header content
{{< /content_box >}}

{{< content_box >}}
### Header title 2

Content header content
{{< /content_box >}}

{{< content_box >}}
### Header title 3

Content header content

Content header content

Content header content
{{< /content_box >}}

{{< /content_header >}}

Wells provide another option for highlighting information. They fill their container horizontally by default.

Wells can be created with any valid markdown inside the well Hugo shortcode:

{{< well >}}
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
{{< /well >}}

Blocks of code on ARIN.net can be contained in Bootstrap’s default pre block, which can be implemented with the codeblock Hugo shortcode, such as in this meta-example:

{{< codeblock >}}
<h3><id="resource"></a>What is a Resource?</h3>
{{< /codeblock >}}

Note: The styling detailed here is best for simple tables. More complex data may require individualized solutions to be sufficiently responsive and accessible.

Panel Table

Tables are common element on ARIN.net. Tables that serve as a primary or prominent element of the page are usually enclosed in a panel. The most common structure places a table inside of a default panel.

This format can be created by placing a markdown table inside of the table-panel shortcode, which requires a title (Superseded Versions here):

{{< table-panel "Superseded Versions" >}}
| Version | Effective Dates | Board of Trustees Meeting |
| --- | --- | --- |
| [7 January 2009](/vault/participate/policy/archive/pdp_archive_20090107/) | 1/7/2009 - 1/13/2013 | [7 January 2013](/vault/about/welcome/board/meetings/2013_0107/) |
| [28 March 2006](/vault/participate/policy/archive/iprep_archive_20060328/) | 3/28/2006 - 1/6/2009 | [3 December 2008](/vault/about/welcome/board/meetings/2008_1203/) |
| [22 January 2004](/vault/participate/policy/archive/iprep_archive_20040122/) | 1/22/2004 - 3/27/2006 | [12 February 2006](/vault/about/welcome/board/meetings/2006_0212/) |
| [1 April 2001](/vault/participate/policy/archive/iprep_archive_20010401/) | 4/1/2001 - 1/21/2004 | [22 December 2003](/vault/about/welcome/board/meetings/2003_1222/) |
{{< /table-panel >}}

Basic styling can be applied to any markdown table with the default table Hugo shortcode:

{{< table "Users" >}}
| #   | First Name | Last Name | Username   |
| --- | ---------- | --------- | ---------- |
| 1   | Mark       | Otto      | @mdo       |
| 2   | Jacob      | Thornton  | @fat       |
| 3   | Larry      | the Bird  | @twitter   |
{{< /table >}}