This Site uses Cookies for display preferences only. Continued use of this site or closing this panel is taken as agreement to the use of cookies!

Close

Processing...

Close
Close Panel

ARC Elements: Test pageusing: 'Radius'

This page is a generic page to show all the elements and styles available with ARC:Elements. Read the text below each element to see what class names can be added to customize each element. This page is also available to inspect the proper mark-up required.

MenusSee menu.css

Grid LayoutsSee scafold.css

12
12
12
12
12
12
12
12
Fix
A
6
B
C
Fix
A
ten 1
ten 2
ten 3
B
C
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/16
1/16
1/16
1/16
1/16
1/16
1/16
1/16
1/16
1/16
1/16
1/16
1/16
1/16
1/16
1/16
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/30
1/2
1/2
1/3
1/3
1/3
1/3
2/3
2/3
1/3
1/4
1/4
1/4
1/4
3/4
1/4
1/4
3/4

ButtonsSee buttons.css

Test Action Buttons:

Test Slider Test Processing Popup Test Modal Popup

Button Type Styles:

A standard Search 16 A positive A secondary A disabled

Button style is added by using .button on an element (anchor or input). Different types of buttons can be used by adding .button-positive, .button-secondary, .button-disabled.

Button Size Styles:

A Small A Large

By adding an additional class .button-small or .button-large, you can alter the size of a button.

Button Icons:

achieved by adding '.icon_XXX' to the input or anchor, where XXX = add, search, refresh, bin, cross, goTo, edit, more, cogs, comment.

Buttons with Badges Size Styles:

button with badge3 highlighted badge5 Small w.badge12 Large badge6

By adding an additional class .button-small or .button-large, you can alter the size of a button.

Text no css file yet

Heading One

Heading Two - with a color dash

Heading Three - with 25% grey coloring

Heading Four - with 50% grey coloring

Heading Five

This is a paragraph and within this paragraph is a link or anchor to show off the particular styles.

This is a second paragraph, and within this paragraph there is no link or anchor, so look to the paragraph above for an example of that element.This is a second paragraph, and within this paragraph there is no link or anchor, so look to the paragraph above for an example of that element.

  • This is a non paragraphed list item
  • This is a non paragraphed list item

  • This is a paragraphed list item

  • This is paragraphed list item

DASHBOARDSee dashPanel.css

Create New...

Upload New Product Data:

Latest Uploads:

Quick Search:

Bulk Upload of Assets:

ToolboxesSee toolbox.css

Hover over and click the toolbox buttons on the right hand side...

122

Your Alerts

mark all as read

  • This is a broadcast style for an alert to be sent out by the site administrators...

    x Y

  • This is a standard message when first arrived and unread/unactioned.

    x Y

  • This is a standard message that has been read/actioned.

    x Y

  • This is a standard message when first arrived and unread/unactioned.

    x Y

  • Your last bulk action has completed.

    x Y

  • Your Action has completed.

    x Y

  • Your Action has completed.

    x Y

  • Your Action has completed.

    x Y
0

Your Toolbox

12

Your Conversations

mark all as read
12

Your Tags

refresh

User MessagesSee messages.css

close

This is a default message box

This is an example of how a message box would look like, if no extra type class is added.

close

Your Action has been successfully applied

This is an example of how a success message box would look like, if required. Please be aware, this is a long version if a paragraph of text was required to explain something in a bit more detail. However, you can easily omit this and just present the user with a simplified version as seen below.

close

Your Action has been successfully applied

close

Your Action could not be performed for the following reasons:

This is an example of how an error message box would look. There was an error with the following items:

  • this thing is missing
  • this is wrong
  • there is an error somewhere here
close

Warning

This is an example of what a message would look like if you were close to doing something bad

close

Looks like you need some help here...

This is an example of how a success message box would look like, if required. Please be aware, this is a long version if a paragraph of text was required to explain something in a bit more detail. However, you can easily omit this and just present the user with a simplified version as seen below.

close

Looks like you need some help here...

This is an example of how a success message box would look like, if required. Please be aware, this is a long version if a paragraph of text was required to explain something in a bit more detail. However, you can easily omit this and just present the user with a simplified version as seen below.

FormsSee forms.css

The following are standard examples of various form inputs...

*
Add
Add
£
arc-id:
Add
Add
1/4 width Input
Add
Expand/Collapse this

This is an example of a simple fieldset (no Checkbox or Expander)

Expand/Collapse this

This is an example of an expandable fieldset (Expanded)

Check this to show content...

This is an example of a simple fieldset (no Checkbox)

Expand/Collapse this
close

Your Action has been successfully applied

£
arc-id: Add
Add
List of tags in a form
default tag style x
Example tag x
System tag x
Add

class="formblock buttonContainer[-left/right][-full]" The default styling is shown above. Keeping in line with the form input edges.

Various applications of the classes .buttonContainer-left-full and .buttonContainer-left-full. The class .showLeft, is added to an individual button to move it left.

blank 1x1 gif

Chat PanelsSee chat.css

  • This is a default un-classed comment - uknown Author: Stoker, Bram The requesting user is sdfgsdfg dgsdfg

    Added by: Ian Bond - Date: 09/06/2015 13:59:35

  • This is a PLS Clear permission request for resource Dracula (9780099511229) Sourced from PLS Publisher: Random House Group Limited Imprint: Vintage Books Pub date: Publication date not known Author: Stoker, Bram The requesting user is sdfgsdfg dgsdfg

    Added by: Ian Bond - Date: 09/06/2015 13:59:35

  • lorem ipsum dolore sit amet...

    Added by: YOU - Date: 09/06/2015 13:59:35

  • lorem ipsum dolore sit amet...

    Added by: The System!! - Date: 09/06/2015 13:59:35

FiltersSee catFilters.css

TabsSee tabs.css

Toolbars

Action:
Action:
Export
Action:
Action:

various layouts using the classes .dlRight, .btnLeft, .actLeft.

Tags

Max Titles x
Filtered by Tag:
Max Titles x

Tables / Lists

Page: 1 / 15   Results: 716   Items Selected: 2
Action:
Example Table
View Title Director Bond Actor Year Book Year Film Villain Tag title comments
Dr. No Terence Young Sean Connery 1958 1962 Dr. No
From Russia with Love Terence Young Sean Connery 1957 1963 Rosa Klebb, 'Red' Grant
Goldfinger Guy Hamilton Sean Connery 1959 1964 Auric Goldfinger; Oddjob
Thunderball Terence Young Sean Connery 1961 1965 Emilio Largo
You Only Live Twice Lewis Gilbert Sean Connery 1964 1967 Tiger Tanaka
On Her Majesty's Secret Service Peter Hunt George Lazenby 1963 1969 Blofeld; Irma Bunt
Diamonds are Forever Guy Hamilton Sean Connery 1956 1971 Blofeld
Live and Let Die Guy Hamilton Roger Moore 1954 1973 Mr. Big

This is an example of an expanded row...

£
arc-id:
The Man with the Golden Gun Guy Hamilton Roger Moore 1965 1974 Scaramanga
The Spy Who Loved Me Lewis Gilbert Roger Moore 1962 1977 Stromberg
Moonraker Lewis Gilbert Roger Moore 1955 1979 Hugo Drax
For Your Eyes Only John Glen Roger Moore 1960 1981 Gonzalez
Results per page:

Accordions (and false accordions)

Artists

Invalid Selections

Shoud Init with this panel open (index:2)

Internal to [PIAS]

Info Tiles

blank 1x1 gif

BTEC Health

May 2019 - September 2020

Information and Communivation Technology course

blank 1x1 gif

BTEC Health and Social

May 2019 - September 2020

Information and Communivation Information and Communivation Information and Communivation Information and Communivation Information and Communivation Information and Communivation Information and Communivation

blank 1x1 gif

BTEC Health and Social

May 2019 - September 2020

Information and Communivation Technology course

blank 1x1 gif

BTEC Health and Social

May 2019 - September 2020

Information and Communivation Technology course

blank 1x1 gif

Hall College Academy

BTEC Health and Social

May 2019 - September 2020
blank 1x1 gif

BTEC Health and Social

May 2019 - September 2020

Information and Communivation Technology course

  • Key:

  • Send an email

  • Receive an email

  • Create New email

  • Expand or show more

  • User icon

  • Has Comments

  • Search

  • Tick

  • Cross or Delete

  • Help

  • Information

  • Refresh

  • Attachment

  • Home

  • Locked

  • Unlocked

  • Graph/Reports

  • Money

  • Add Chat/Comment

  • Bin or Delete

  • Tags

  • Add a Tag

  • Alert

  • Edit

  • email or contact symbol

  • 'Greater Than' or 'Go To'

  • Telephone

  • User Menu

  • Excel Document

  • Text Document

  • PDF Document

  • Flag (Other colours available)

  • Error

  • Success

  • Warning