Interxion Style Guide

An interactive guide to the UI patterns and practices used to build online content for Interxion.

Colours

Interxion’s brand is clean and simple, using generous amounts of white space to separate content and allowing the accent colours to clearly signpost calls to action. In most cases the following rules apply, though allowances can be made in some cases if felt necessary.

Use of digital brand colours

Typically, the use of green indicates a clickable item or CTA, though in some cases it can be used to differentiate content when used in conjunction with the other colours – blue, orange and pink.

Blue is the brand colour and can be used to highlight subtle elements such as content tags and titles.

Orange and pink are the least used of the digital brand colours. These are reserved for highlighting content where necessary, for example, if green and blue are already being used in close proximity, or when you want to add prominence to something without making it clickable. Though with orange the RSS feed is an edge case.


#0099CC R:000
G:153
B:204

Primary Blue

Main brand colour

#3bbcf4 R:059
G:188
B:244

Secondary blue

Used to differentiate content if necessary

#99CA3C R:153
G:202
B:060

Green

Buttons, CTA's

#F1941F R:241
G:148
B:031

Orange

Used to differentiate content if necessary

#E3097C R:227
G:009
B:124

Magenta

#FFFFFF R:255
G:255
B:255

Background White

#F7F8F8 R:247
G:248
B:248

Background Grey

#E4EBED R:228
G:235
B:237

Form Background

#333333 R:051
G:051
B:051

Background Dark Grey

Gradients and backgrounds

When applying the colours to gradients, please make sure that the you only use the following combinations: Green-Blue, Pink-Orange.

Dark grey is used to separate content blocks as a background colour to provide variation on the page.



Fonts

Typography forms an important part of the digital brand, particularly due to the contemporary nature of the website. Careful consideration is to be taken when defining line height and letter spacing as imperfections can have a significant impact on the overall finish.

Heading 01

     

Museo 300

     

Used for page
headers.

Heading 02

     

Museo 300

     

Section headings.
Lower-case.

Heading 03

     

Helvetica (TT) bold

     

Sub sections headings,
small CTA's, labels.

Body copy

     

Helvetica (TT) light

     

All icons must be
saved as a square
png with a transparent
background, and
aligned to the bottom.

BUTTON LABEL

     

Helvetica (TT) bold

     

Always upper-case

Quotes

     

Museo 300 italic

     

Used to highlight
exerts within content.

Breadcrumb

     

Museo 900

     

Used for breadcrumbs
only.


Grid

The following section illustrates how the grid system is used to layout content on the site and how this relates to the display options used within EPiServer to assign sizes to blocks.

Display Full
Display Extra Large
Display Extra Small
Display Large
Display Small
Display Medium
Display Medium
Display Small
Display Small
Display Small
Display Extra Small
Display Extra Small
Display Extra Small
Display Extra Small

View Code

<div class="container styleguide-grid">
    <div class="row">
        <div class="full">
            <div class="styleguide-grid__inner">Display Full</div>
        </div>
    </div>
    <div class="row">
        <div class="xl grid-spacing">
            <div class="styleguide-grid__inner">Display Extra Large</div>
        </div>
        <div class="xs">
            <div class="styleguide-grid__inner">Display Extra Small</div>
        </div>
    </div>
    <div class="row">
        <div class="lg grid-spacing">
            <div class="styleguide-grid__inner">Display Large</div>
        </div>
        <div class="sm">
            <div class="styleguide-grid__inner">Display Small</div>
        </div>
    </div>
    <div class="row">
        <div class="md grid-spacing">
            <div class="styleguide-grid__inner">Display Medium</div>
        </div>
        <div class="md">
            <div class="styleguide-grid__inner">Display Medium</div>
        </div>
    </div>
    <div class="row">
        <div class="sm grid-spacing">
            <div class="styleguide-grid__inner">Display Small</div>
        </div>
        <div class="sm grid-spacing">
            <div class="styleguide-grid__inner">Display Small</div>
        </div>
        <div class="sm">
            <div class="styleguide-grid__inner">Display Small</div>
        </div>
    </div>
    <div class="row">
        <div class="xs grid-spacing">
            <div class="styleguide-grid__inner">Display Extra Small</div>
        </div>
        <div class="xs grid-spacing">
            <div class="styleguide-grid__inner">Display Extra Small</div>
        </div>
        <div class="xs grid-spacing">
            <div class="styleguide-grid__inner">Display Extra Small</div>
        </div>
        <div class="xs">
            <div class="styleguide-grid__inner">Display Extra Small</div>
        </div>
    </div>
</div>

Buttons

Buttons are created through the CMS WYSIWYG editor and can be shown either as solid or outline buttons, with or without an arrow. The colour of a button is dictated by the theme colour set on the block which contains the button.

To create a button, first create a link, click on the link so the cursor is within it and select either 'small button', 'button' or 'large button' from the styles dropdown. To add an arrow, select 'arrow button' and to convert the button into an outline button select 'outline button'.

Normal Buttons

Normal Buttons

Small Normal Button
.btn-s

Medium Normal Button
.btn

Large Normal Button
.btn-l


Arrow Buttons

Arrow Buttons

Small Arrow Button
.btn-s .btn-arrow

Medium Arrow Button
.btn .btn-arrow

Large Arrow Button
.btn-l .btn-arrow


Transparent Buttons

Transparent Buttons

Small Transparent Button
.btn-o .btn-s

Medium Transparent Button
.btn-o .btn

Large Transparent Button
.btn-o .btn-l


Transparent Arrow Buttons

Transparent Arrow Buttons

Transparent Small Arrow Button
.btn-o .btn-s .btn-arrow

Transparent Medium Arrow Button
.btn-o .btn .btn-arrow

Transparent Large Arrow Button
.btn-o .btn-l .btn-arrow



Tables

Tables, particularly those containing a large number of columns, can be difficult to read easily at mobile. For this reason (and many thers) the use of tables should be restricted to displaying tabular data rather than for laying out content. To address this mobile layout issue, a style has been created to allow tables to collapse at mobile, displaying the cell contents next to the heading for the column for each cell.

To make this work it is important that tables are marked up correctly. Tables can be created through the WYSIWYG editor using the 'insert table' button. Once the table headings have been entered, click into the header row of the table, select the 'row properties' button and select a 'row type' of 'header'. Finally, select the entire table and select 'responsive table' from the styles dropdown. If the table should break out from the text column, also apply 'Table breakout' from the styles dropdown.

Table First column Second column
First row Lorem ipsum Lorem ipsum
Second row Lorem ipsum Lorem ipsum

Blocks

Any given page within the Interxion website will be constructed from a number of components known as blocks. The following section describes some of the more commonly used blocks and shows off some of the configurations of those blocks where an individual block or combination of blocks can be displayed in different ways.

Editorial

This is one of the most commonly used blocks on the site and is used to allow the display of editable, formattable content. The example below shows a number of the available formatting options that can be applied through the editor.

Heading

Sub-heading

Sub-section

Here is some lead italic content

Here's some standard paragraph content.

Bullet list:

  • ut
  • enim
  • ad
  • minim
  • veniam

Ordered list:

  1. quis
  2. nostrud
  3. exercitation
  4. ullamco

Tick list:

  • Feature 1
  • Feature 2
  • Feature 3
  • Feature 4

Quotation / Testimonial

The quotation block is used to pull out a quotation which can optionally have a photo, name and/or job title associated with it.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.


Block Holder

The block holder block is used as a container for other blocks, allowing pages to be broken into sections, often with different colour theming. As with any block on the site, specific CSS classes can be added, allowing the block holder and its contents to be used for other purposes, some examples of which are given below.

A_SAFE_HOME_FOR_YOUR_CLOUD_970x620.jpg
Carousel_Bombardier_970x620_v2.jpg

Promo

This component is created from a block holder block containing four promo menu item blocks.

Why co-location for the enterprise?

icon.png

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds

icon.png

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds

icon.png

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds

icon.png

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds


Promo Full Bleed

This component is a variant of the component above. As above, it is made up of a block holder block containing promo menu item blocks but, in this instance, a class of 'full-bleed' has been applied to to the block holder block which instructs the images in the promo menu item blocks to expand to display edge-to-edge.

Why co-location for the enterprise?

taxis.jpg

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds

taxis.jpg

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds

taxis.jpg

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds

taxis.jpg

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds


Related Contacts

This component is made from a block holder block with a class of 'related-contacts' applied, filled with promo menu item blocks.


Venn

This component is a similar block holder block filled with promo menu item blocks but in this instance a class of 'venn-stats' has been applied to the block holder.

<35

cloud and carrier-neutral data centres across Europe

1,500

customers who rely on our high-speed connections and secure facilities

500+

carriers and ISPs accessible across Europe

90m

European broadband subscribers


Lightbox Image

This block will allow the display of both images and videos. When used outside of a rich text area (e.g blog/news) this block needs to be placed in a block holder block.

When used for an image the same image is used for the thumbnail and the content inside the lightbox. The thumbnail is automatically resized to a max-width of 680px.

In order to achieve the offset effect we use on the case study page you need to set the display option to extra large and add the pull-right style category to the block.


Lightbox Video

When using this block for a video you will need to specify the image property for the video thumbnail, but the link property would be set to the URL of a youtube or vimeo video. When the link property is set, the magnifying glass icon changes to a play icon.

The lightbox block only supports one type of URL for each service

YouTube
http://www.youtube.com/watch?v=7HKoqNJtMTQ

Vimeo
http://vimeo.com/123123

The caption property will be shown beneath the thumbnail and under the lightbox when expanded.


Related Content

This component is automatically included in certain page types but can also be added as a standalone block to any page with a content area. The related content block contains a content area which can be filled with either pages from the site or, if more control is required over content, related content item blocks which allow a custom image, title, description and link to be defined. Images used in this component will be cropped to 100px X 100px, anchored from the top left of the image.


Carousel Desktop

Below is a carousel displayed both on desktop and mobile. One can choose whether he wants the navigation arrows displayed by having the "Show Navigation Arrows" option selected.

dummy-1355x689-Habitation.jpg
dummy-1355x689-Skyscraper.jpg
dummy-1355x689-Habitation.jpg
dummy-1355x689-Skyscraper.jpg
dummy-1355x689-Habitation.jpg
dummy-1355x689-Skyscraper.jpg
dummy-1355x689-Habitation.jpg
dummy-1355x689-Skyscraper.jpg

Carousel Mobile

A different example of a carousel block displayed on mobile only. This feature can be enabled by having the "Mobile Only?" option thicked. Sizes above mobile will behave similar to a Promo Block.

Cloud Onboarding Header_DE.jpg

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds

Cloud Onboarding Header_DE.jpg

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds

Cloud Onboarding Header_DE.jpg

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds

Cloud Onboarding Header_DE.jpg

Future proof

A vendor-independent, future-proof platform to connect to multiple clouds


CTA

This block is designed to be used on its own but it does need to be placed inside a block holder block. You can set the colour of this block to one of the brand colours. You can add a thumbnail for the link (optional), you can select one of the icons from the icon font using the dropdown and you can add the copy in the rich text area. The thumbnail image is resized with CSS to 100px wide, so ideally the image needs to be 100px X 142px to fit on the bar with the top and bottom protruding as per the current one.