Racenet Global Components
Typography
Headings
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum sapiente, placeat quasi tempora dignissimos officia, ut veniam expedita quo nemo itaque optio similique numquam autem corrupti! Ipsam quia consequuntur deleniti facilis dolorum voluptate veritatis laborum vero distinctio dolor sint rerum omnis cumque, impedit beatae sed, illum numquam tempora molestiae quaerat, ab maiores! Aliquid nam ex rem! Quibusdam earum, neque facilis illum, repellat cumque veritatis nam. Error, mollitia. Perferendis repellendus tempore sunt quae cumque, quisquam unde nostrum atque qui laboriosam repellat inventore veritatis esse quibusdam magnam ad voluptate, facilis molestiae eveniet a. Blanditiis assumenda officia dolores odit eaque illo nihil!
Lists
- Unordered List item 1
- Unordered List item 2
- Unordered List item 3
- Unordered List item 4
- Ordered List item 1
- Ordered List item 2
- Ordered List item 3
- Ordered List item 4
Brand
Colour Palette
$brand-primary
#990000
$brand-primary-shade-1
#420101
$brand-primary-shade-2
#580101
$brand-primary-shade-3
#7F0202
$brand-primary-shade-4
#E80607
$brand-primary-shade-5
#F57F80
$brand-primary-shade-6
#FBBFBF
$brand-secondary
#001427
$brand-secondary-shade-1
#303E4F
$brand-secondary-shade-2
#475462
$brand-secondary-shade-3
#5E6976
$brand-secondary-shade-4
#8C949D
$brand-secondary-shade-5
#A3A9B0
$brand-secondary-shade-6
#BABEC4
$brand-secondary-shade-7
#D1D4D7
$brand-secondary-shade-8
#E8E9EB
$brand-secondary-shade-9
#F3F4F5
$brand-secondary-shade-10
#F9F9FA
$gray
#1B1B1E
$gray-shade-1
#2F2F32
$gray-shade-2
#444446
$gray-shade-3
#59595B
$gray-shade-4
#6D6D6F
$gray-shade-5
#828284
$gray-shade-6
#979798
$gray-shade-7
#ACACAD
$gray-shade-8
#C0C0C1
$gray-shade-9
#D5D5D6
$gray-shade-10
#EAEAEA
$gray-shade-lightest
#FFF
$brand-success
#48A025
$brand-success-shade-1
#0F4C5C
$brand-success-shade-2
#187278
$brand-success-shade-3
#0A6E4F
$brand-success-shade-4
#86C26F
$brand-info
#003A98
$brand-info-shade-1
#002461
$brand-info-shade-2
#255B99
$brand-info-shade-3
#BFD7EA
$brand-info-shade-4
#7EA3CC
$brand-warning
#F44710
$brand-warning-shade-1
#FF7E11
$brand-warning-shade-2
#FF9A14
$brand-warning-shade-3
#FFE09B
$brand-warning-shade-4
#9C3C19
$brand-danger
#FF5050
$brand-danger-shade-1
#BF4342
$brand-danger-shade-2
#B6455F
$brand-danger-shade-3
#550527
$brand-danger-shade-4
#FF5A5F
$brand-royalty
#43178A
$brand-royalty-shade-1
#8400FA
$brand-royalty-shade-2
#AB57F1
$brand-royalty-shade-3
#4E0094
$brand-royalty-shade-4
#D5A7FC
$brand-tanned
#A07E73
$brand-tanned-shade-1
#CCAD8F
$brand-tanned-shade-2
#E7D7C1
$brand-tanned-shade-3
#735751
$brand-tanned-shade-4
#A78A7F
Color Themes
Use the following color themes classes on any element containing text.
Text Shade
Text Primary
Text Secondary
Text Success
Text Info
Text Warning
Text Danger
Text Royalty
Text Tanned
...
...
...
...
...
...
...
...
...
Buttons
The base .btn class must be used with a modifier.
You can mix and match all the different available classes to make the required button.
Default Buttons
Outline Buttons
Small Buttons
Large Buttons
Link Buttons
A link button has the same properties as a button except for the borders and backgrounds.
Block Buttons
Spans the entire width of its parent container.
Helpers
Baked into the racenet SASS are some nice CSS class helpers to use across the site.
Spacing
You can add any of the following classes on any component when you need a margin or a padding.
Margin
margin (all four sides): rn-helper-m- then the amount of pixels required.
top margin: rn-helper-mt- then the amount of pixels required.
right margin: rn-helper-mr- then the amount of pixels required.
bottom margin: rn-helper-mb- then the amount of pixels required.
left margin: rn-helper-ml- then the amount of pixels required.
Padding
paddings (all four sides): rn-helper-p- then the amount of pixels required.
top paddings: rn-helper-pt- then the amount of pixels required.
right paddings: rn-helper-pr- then the amount of pixels required.
bottom paddings: rn-helper-pb- then the amount of pixels required.
left paddings: rn-helper-pl- then the amount of pixels required.
The pixel value can range from 0 to 50.
...
...
Bootstrap Rows and Cols
In specific cases, we don't want the bootstrap left and right padding on rows and/or columns.
Use this helper to get rid the padding.
...
Breadcrumbs
Tabs
Requires Bootstrap JavaScript.
Default
Once Bootstrap JS is loaded, there's no need for any JS initialisation. Using the data attributes below will work.
Full width
Add a class of nav-justified to the rn-tabs-list unordered list to get the full width tabs.
Full width including mobile
The modifier above makes the tabs full width, but only on large screens. On mobile, the tabs will collapse. Use the following modifier to achieve a full width effect on mobile too.
Badges
CPills
Race Cards
Default
Filled out
Loading State
This is normally loaded from the server by default, and then the default state (above) is loaded with JS (handlebars for example).
Sequence Order
Default
R1
Filled
R1
Filled (Hard)
R1
Selected
R1
Usage with anchor tag
If you wish to, you can use any of the above states with an anchor tag.
Large size
As with other components, you can mix the above modifiers with the --large modifier to achieve the following results.
Race Order Selector
Track Conditions
This component has no default state.
The base classes (rn-track-condition or rn-track-condition-bg) always require a modifier class.
Text
Firm1
Good4
Soft5
Heavy8
Synthetic
Dead5
Slow8
Background
Firm1
Good4
Soft5
Heavy8
Synthetic
Dead5
Slow8
Media Lists
Default State
The default state of .rn-media-list is the same view across all devices.
Feel free to omit things like .rn-media-list-content-type-icon or .rn-media-list-content-location if need be. You can even get rid of the entire .rn-media-list-content-meta if you need to.
Collapsed State
The collapsed state looks exactly the same on desktop as its default counterpart above. The difference is on mobile, it transforms each media item to become a 'card' and lays them out side by side.
Warning:
- You must add a css class of
.rn-media-list-wrapper--scrollto.rn-media-list-wrapper. - You must add a JS helper class of
.rn-js-news-liston.rn-media-list. This is to enable JS to calculate the width of the element so the user can scroll over it on mobile. A supporting JS file containing this functionality must be loaded on the page.
-
Calls for Eagle Farm track to be rested midweek Calls for Eagle Farm track to be rested midweek
-
Calls for Eagle Farm track to be rested midweek Calls for Eagle Farm track to be rested midweek
-
Calls for Eagle Farm track to be rested midweek Calls for Eagle Farm track to be rested midweek
-
Calls for Eagle Farm track to be rested midweek Calls for Eagle Farm track to be rested midweek
-
Calls for Eagle Farm track to be rested midweek Calls for Eagle Farm track to be rested midweek
-
Calls for Eagle Farm track to be rested midweek Calls for Eagle Farm track to be rested midweek
-
Calls for Eagle Farm track to be rested midweek Calls for Eagle Farm track to be rested midweek
-
Calls for Eagle Farm track to be rested midweek Calls for Eagle Farm track to be rested midweek
Usage with callouts
Anywhere you use the .rn-media-list component, you can add callouts.
As you'll notice in the code below, unfortunately we're doubling up the addition of these callouts. There's one before .rn-media-list-content-title (with an additional .rn-media-list-content-callout--sm) class. And there's one inside the .rn-media-list-content-teaser paragraph tag. This is the only way we can ensure maximum compatiblity across small and large devices given the differnce in design.
To use callouts, add a with a class of .rn-media-list-content-callout.
Then, add a modifier class to get the right colour. There's 5 colours to choose from:
.rn-media-list-content-callout--theme-1- Outputs red.rn-media-list-content-callout--theme-2- Outputs green.rn-media-list-content-callout--theme-3- Outputs orange.rn-media-list-content-callout--theme-4- Outputs blue.rn-media-list-content-callout--theme-5- Outputs brown
To ensure the callout shows up on mobile as intended by the UI/UX, add a class of .rn-media-list-content-callout--sm on the outer callout located just before the .rn-media-list-content-title.
Forecast
Cloudy
Sunny
Cloudy
Icons
There are 9 possible icons you can use with the forecast component.
.rn-forecast-icon--clear -
.rn-forecast-icon--clouds -
.rn-forecast-icon--fog -
.rn-forecast-icon--overcast -
.rn-forecast-icon--rain -
.rn-forecast-icon--showers -
.rn-forecast-icon--sunny -
.rn-forecast-icon--thunderstorm -
.rn-forecast-icon--windy -
Modals
Default
Sizing
By default, the size of the model dialog window is 600 pixels ($modal-md in our SASS variables file).
You can extend the size by adding one of the following classes to the .modal-dialog div.
.modal-xl(1020px).modal-lg(900px).modal-sm(320px)
...
Info heading
Loading
Loading with text
Center loading
Heading with button
It will truncate the title on mobile when there's a text taking more than 200px width
Form guide something
Form guide something
Racenet font (icons)
Font Name: racenet-icomoon (Glyphs: 75)
Bookie Labels
Large version
Small version