Altviz Style Guide

Common Components

Cards

Card Header

Card Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Header

Card Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Modal Dialogue

Tabbed Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at tempor ante. Aliquam in congue ligula. Vivamus nulla est, pharetra sed mauris et, tincidunt venenatis turpis.

Quisque pulvinar dignissim purus, at vehicula orci ultrices vitae. Morbi at pretium metus, vel dapibus massa. Sed mauris eros, elementum vel luctus eu, posuere non felis.

Sed sit amet pulvinar nisi. Mauris dapibus nunc et aliquet ultricies. Nullam posuere ex in diam varius, et egestas eros porta. Proin ante metus, scelerisque et tincidunt ut.

Accordions

Accordion Header #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at tempor ante. Aliquam in congue ligula. Vivamus nulla est, pharetra sed mauris et, tincidunt venenatis turpis.

Accordion Header #2

Quisque pulvinar dignissim purus, at vehicula orci ultrices vitae. Morbi at pretium metus, vel dapibus massa. Sed mauris eros, elementum vel luctus eu, posuere non felis.

Toast Notifications & Alerts

Info Alert: Lorem ipsum dolor sit amet.

Success Alert: Lorem ipsum dolor sit amet.

Warning Alert: Lorem ipsum dolor sit amet.

Error Alert: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Consectetur adipiscing elit.

Aliquam in congue ligula.

Vivamus nulla est, pharetra sed.

Form Elements

Inputs and Selects

Email address

Example select

Example multiple select

Example textarea

<Form>
    <Form.Group controlId="exampleForm.ControlInput1">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="name@example.com" />
    </Form.Group>
    <Form.Group controlId="exampleForm.ControlSelect1">
        <Form.Label>Example select</Form.Label>
        <Form.Control as="select">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </Form.Control>
    </Form.Group>
    <Form.Group controlId="exampleForm.ControlSelect2">
        <Form.Label>Example multiple select</Form.Label>
        <Form.Control as="select" multiple>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </Form.Control>
    </Form.Group>
    <Form.Group controlId="exampleForm.ControlTextarea1">
        <Form.Label>Example textarea</Form.Label>
        <Form.Control as="textarea" rows={3} />
    </Form.Group>
</Form>

Checkboxes

Default checkbox

Disabled checkbox

Radio Select

Default radio

Second default radio

Disabled radio

Range Sliders

Action Buttons

FontAwesome Icons

Common Library

We use a standardised set of icons across the Platform to ensure a consistent experience, as such please adhere to the icons in use below. Note that they should be affected by an appropriate colour based on intended message or actions. Please see the Colour Board for details.

Link to Modals / External Links

Close Modals / Cancel Action

Save Details / Form Data

Confirm Action

Save / Download File

Upload File / Data

Data / Values Down

Data / Values Up

Data / Values Equal

Clone Data / Fields

Export Generic Data

Export CSV Data

Delete Item / Data Fields

Add Item / Data Fields

View / Adjust Config & Settings

View / Adjust Data & Data Sets

View / Adjust Table Data & List Items

Refresh Data View & Interface

Synchronise Datasets

Go Back / Previous Item

Go Forward / Next Item

Information Notice

Warning Notice

Data Tables

#	First	Last	Handle
1	Mark	Otto	@motto
2	Jacob	Thornton	@thornton
3	Larry	Bird	@lbird

Replan Style Guide

Platform Components Examples