TFL Colours

Implementation is really simple, just give what ever you want to color-code a two classes.

See all supported colours and options.

Installation Instructions

Install instructions can be found on the Github repo readme.

Examples

Example 1 - Simple Usage

Code Example

<p>To get from Waterloo to Picadily Circus:</p>
<p>Take the <span class="tfl tfl-northern">Northern Line</span> to Leicester Square. Then change and take the <span class="tfl tfl-piccadilly">Piccadilly Line</span> to Piccadilly Circus</p>
<p>To get from London Bridge to Sloan Square:</p>
<p>Take the <span class="tfl tfl-jubilee">Jubilee Line</span> at London Bridge towards Stanmore, change at Westminster to either the <span class="tfl tfl-circle">Circle</span>/<span class=" tfl tfl-district">District</span> Lines to Sloane Square.</p>

Output

To get from Waterloo to Picadily Circus:

Take the Northern Line to Leicester Square. Then change and take the Piccadilly Line to Piccadilly Circus

To get from London Bridge to Sloan Square:

Take the Jubilee Line at London Bridge towards Stanmore, change at Westminster to either the Circle/District Lines to Sloane Square.

Example 2 - With Bootstrap

When you add some more CSS on top, like Bootstrap, it really comes alive...

Code Example

<p>To get from Waterloo to Picadily Circus:</p>
<p>Take the <span class="tfl tfl-northern">Northern Line</span> to Leicester Square. Then change and take the <span class="tfl tfl-piccadilly">Piccadilly Line</span> to Piccadilly Circus</p>
<p>To get from London Bridge to Sloan Square:</p>
<p>Take the <span class="tfl tfl-jubilee">Jubilee Line</span> at London Bridge towards Stanmore, change at Westminster to either the <span class="tfl tfl-circle">Circle</span>/<span class=" tfl tfl-district">District</span> Lines to Sloane Square.</p>

Output

To get from Waterloo to Picadily Circus:

Take the Northern Line to Leicester Square. Then change and take the Piccadilly Line to Piccadilly Circus

To get from London Bridge to Sloan Square:

Take the Jubilee Line at London Bridge towards Stanmore, change at Westminster to either the Circle/District Lines to Sloane Square.

Example 3 - A Table / Board

Bakerloo Line Good Service
District Line Normal Service
Hammersmith & City Line Partial Closure
Jubilee Line Engineering Works

All available lines / colours