CSS Examples

Interception

interception message text

Success

Success message text

Errors

Declaration

This is the first time you have made a subscription payment to this ISA in this tax year. Please therefore read and confirm your agreement to the declaration below. Before you sign, please take time to carefully read it in full, as it will form a legally enforceable agreement. If you do not understand anything please contact us.

Subscription Declaration

Lorem ipsum dolor sit amet, sodales placerat. Ante eros, ligula suscipit, nulla dictum enim. Sodales in, a aenean maecenas. Voluptatibus in, ornare commodo et. Eget sed. Venenatis sollicitudin, eu luctus, proin quam mi..

Eget pede, lacus dis non, ut pulvinar dolor. Mauris amet. Cum volutpat porta. Mauris pellentesque, a phasellus leo. Consequat semper, lorem aenean adipiscing, proin sed ipsum..

Declaration

Lacus donec etiam, suscipit amet. Sagittis convallis. Congue imperdiet vestibulum, duis magnis, lorem amet mollis. Sagittis vel aliquam, sollicitudin class tortor. Lacinia sem, ut auctor tincidunt. Mi non ut, urna justo..

Ut placerat, non vehicula donec. Ullamcorper tristique iaculis. Sapien ac. Ullamcorper praesent ut, donec suspendisse. Et arcu, pellentesque eget.

Duis imperdiet fusce. A lorem nam, inceptos fusce conubia. Pellentesque dolor, tristique at. Quam curabitur, urna quis. At arcu luctus, in eu suspendisse, etiam a. A labore laoreet.

Table styles

Table heading Sorted table heading Sortable column heading Some heading
Some kind of string 1,000,000.00 1 Text value
Another bit of text 1,240,050.00 2 More text value
Something here 1,560,100.00 1 Another text value

To do: Expandable row, tooltips, Actions dropdown

Vertical heading 1 2,000.00
Vertical heading 2 2,220.00
Vertical heading 3 2,500.00
Vertical heading 4 4,000.00

Containers

Boxed container - will probably be expnaded upon to incorporate boxes without rounded corners/nested headings etc

This container will usually house copy 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

  • content in a boxed item list
  • content in a boxed item list
  • content in a boxed item list
  • content in a boxed item list
  • content in a boxed item list

Portion

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Left and right aligned lozenge and slab - with text wrapped flush image

Even if you're not yet a client, you're welcome to contact our investment Helpdesk who'd be more than happy to assist you.


Even if you're not yet a client, you're welcome to contact our investment Helpdesk who'd be more than happy to assist you.

slab with single lozenge and an action

Link text

Supporting text with a link

Content text

slab normal content and an inner lozenge with a digital look data note

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.

slab with intro

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.

Link text
Supporting text with a link
Content text