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.

Last updated: 18 Jun 2019

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-primary

#

$red

$bluegray

$vanilla

Brand Blue Color Set


$brand-light

#

$brand-info

#

$brand-primary

#

$brand-logo

#

$brand-dark

#

$brand-darker

#

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.

$brand-success

#

$brand-warning ($gold)

#

$brand-danger ($red)

#

$orange

#

$purple

#

$red-dark

#

$gray-light

#

$gray

#

$gray-dark

#

$bluegray-light

#

$bluegray

#

$bluegray-dark

#

$vanilla-light

#

$vanilla

#

$vanilla-dark

#

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 14px. 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.

An example of default 14px text.
An example of main 16px text.

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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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: 880px
The widest main text column available is approximately 880px, so images or graphics sized to this width appear consistently at all screen sizes. Images wider than this are used only in special cases.

A placeholder demonstrating 880 pixels width

Screen sizes and max column widths
Main text Main text with table of contents
Large desktop 880px 600px
Small desktop 680px 470px
Tablet 510px 530px
Mobile 730px n/a

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, circle, thumbnail
float: options are left or right
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:

rounded placeholder

style=“rounded”

circle placeholder

style=“circle”

thumbnail placeholder

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:

left float placeholder

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.

right float placeholder

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 left float:

{{< image src="https://via.placeholder.com/250x150" alt="left float placeholder" float="left" >}}Lorem ipsum dolor sit amet ...

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

caption placeholder
I am a short bit of text that adds context to the above image!
{{< image src="https://via.placeholder.com/880x100" 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:

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 1760px for an 880px 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:

fa-user

fa-users

fa-exclamation-triangle

fa-question-circle

fa-search

fa-lock

fa-unlock

fa-dashboard

fa-plus-square

fa-minus-square

fa-external-link

fa-file-pdf-o

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

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

 

Bootstrap Defaults

This is the basic responsive grid structure underpinning Bootstrap v3.3.7.

col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-2
col-sm-2
col-sm-2
col-sm-2
col-sm-2
col-sm-2
col-sm-3
col-sm-3
col-sm-3
col-sm-3
col-sm-4
col-sm-4
col-sm-4
col-sm-6
col-sm-6

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

Button Text

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

The shortcode also accepts any of the defined button classes, for example:

Button Text

{{< button primary >}}
[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.

Panel Default

panel-default

Panel Primary

panel-primary

Panel Success

panel-success

Panel Info

panel-info

Panel Warning

panel-warning

Panel Danger

panel-danger

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 >}}

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

This text information should draw your eyes!

{{< 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 three boxes that fill their containing space horizontally. Structurally, each content box is an h3.

Group Title

Header title 1

Content header content

Header title 2

Content header content

Header title 3

Content header content

Content header content

Content header content


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.

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.

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.

Superseded Versions
Version Effective Dates Board of Trustees Meeting
7 January 2009 1/7/2009 - 1/13/2013 7 January 2013
28 March 2006 3/28/2006 - 1/6/2009 3 December 2008
22 January 2004 1/22/2004 - 3/27/2006 12 February 2006
1 April 2001 4/1/2001 - 1/21/2004 22 December 2003

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](https://www.arin.net/vault/policy/archive/pdp_archive_20090107.html) | 1/7/2009 - 1/13/2013 | [7 January 2013](https://www.arin.net/vault/about_us/bot/bot2013_0107.html) |
| [28 March 2006](https://www.arin.net/vault/policy/archive/iprep_archive_20060328.html) | 3/28/2006 - 1/6/2009 | [3 December 2008](https://www.arin.net/vault/about_us/bot/bot2008_1203.html) |
| [22 January 2004](https://www.arin.net/vault/policy/archive/iprep_archive_20040122.html) | 1/22/2004 - 3/27/2006 | [12 February 2006](https://www.arin.net/vault/about_us/bot/bot2006_0212.html) |
| [1 April 2001](https://www.arin.net/vault/policy/archive/iprep_archive_20010401.html) | 4/1/2001 - 1/21/2004 | [22 December 2003](https://www.arin.net/vault/about_us/bot/bot2003_1222.html) |
{{< /table-panel >}}


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

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