No notes defined.
<h2>Table of Contents</h2>
<dl>
<dt>Types</dt>
<dd>
<nav class="c-nav c-nav--no-list">
<a href="#basic">Basic Icons</a>
<a href="#status">Status Icons</a>
<a href="#files">File Operations</a>
<a href="#apps">Applications</a>
<a href="#data">Data Visualization</a>
<a href="#project">Project Management</a>
<a href="#system">System & Tools</a>
<a href="#actions">Actions</a>
<a href="#ui">UI Elements</a>
<a href="#security">Security</a>
<a href="#communication">Communication</a>
<a href="#notifications">Notifications</a>
<a href="#navigation">Navigation</a>
</nav>
</dd>
<dt>Adjustments</dt>
<dd>
<nav class="c-nav c-nav--no-list">
<a href="#sizes">Sizes</a>
<a href="#transforms">Transformations</a>
<a href="#buttons">in Buttons</a>
<a href="#labels">with Labels</a>
</nav>
</dd>
</dl>
<h2>Icons</h2>
<dl>
<dt>Types</dt>
<dd>
<dl>
<dt id="basic">Basic Icons</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-dashboard"></i>
<code>.icon-dashboard</code>
</div>
<div class="demo-item">
<i class="icon icon-data-files"></i>
<code>.icon-data-files</code>
</div>
<div class="demo-item">
<i class="icon icon-applications"></i>
<code>.icon-applications</code>
</div>
<div class="demo-item">
<i class="icon icon-allocations"></i>
<code>.icon-allocations</code>
</div>
<div class="demo-item">
<i class="icon icon-history"></i>
<code>.icon-history</code>
</div>
<div class="demo-item">
<i class="icon icon-history-reverse"></i>
<code>.icon-history-reverse</code>
</div>
<div class="demo-item">
<i class="icon icon-jobs"></i>
<code>.icon-jobs</code>
</div>
<div class="demo-item">
<i class="icon icon-jobs-history"></i>
<code>.icon-jobs-history</code>
</div>
<div class="demo-item">
<i class="icon icon-my-data"></i>
<code>.icon-my-data</code>
</div>
<div class="demo-item">
<i class="icon icon-calendar"></i>
<code>.icon-calendar</code>
</div>
</div>
</dd>
<dt id="status">Status Icons</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-approved"></i>
<code>.icon-approved</code>
</div>
<div class="demo-item">
<i class="icon icon-pending"></i>
<code>.icon-pending</code>
</div>
<div class="demo-item">
<i class="icon icon-denied"></i>
<code>.icon-denied</code>
</div>
<div class="demo-item">
<i class="icon icon-approved-boxed"></i>
<code>.icon-approved-boxed</code>
</div>
<div class="demo-item">
<i class="icon icon-approved-boxed-reverse"></i>
<code>.icon-approved-boxed-reverse</code>
</div>
<div class="demo-item">
<i class="icon icon-approved-reverse"></i>
<code>.icon-approved-reverse</code>
</div>
<div class="demo-item">
<i class="icon icon-denied-reverse"></i>
<code>.icon-denied-reverse</code>
</div>
<div class="demo-item">
<i class="icon icon-trophy"></i>
<code>.icon-trophy</code>
</div>
</div>
</dd>
<dt id="files">File Operations</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-file"></i>
<code>.icon-file</code>
</div>
<div class="demo-item">
<i class="icon icon-add-file"></i>
<code>.icon-add-file</code>
</div>
<div class="demo-item">
<i class="icon icon-edit-document"></i>
<code>.icon-edit-document</code>
</div>
<div class="demo-item">
<i class="icon icon-document"></i>
<code>.icon-document</code>
</div>
<div class="demo-item">
<i class="icon icon-copy"></i>
<code>.icon-copy</code>
</div>
<div class="demo-item">
<i class="icon icon-rename"></i>
<code>.icon-rename</code>
</div>
<div class="demo-item">
<i class="icon icon-trash"></i>
<code>.icon-trash</code>
</div>
<div class="demo-item">
<i class="icon icon-folder"></i>
<code>.icon-folder</code>
</div>
<div class="demo-item">
<i class="icon icon-search-folder"></i>
<code>.icon-search-folder</code>
</div>
<div class="demo-item">
<i class="icon icon-image"></i>
<code>.icon-image</code>
</div>
</div>
</dd>
<dt id="apps">Applications</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-jupyter"></i>
<code>.icon-jupyter</code>
</div>
<div class="demo-item">
<i class="icon icon-matlab"></i>
<code>.icon-matlab</code>
</div>
<div class="demo-item">
<i class="icon icon-rstudio"></i>
<code>.icon-rstudio</code>
</div>
<div class="demo-item">
<i class="icon icon-namd"></i>
<code>.icon-namd</code>
</div>
</div>
</dd>
<dt id="data">Data Visualization</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-bar-graph"></i>
<code>.icon-bar-graph</code>
</div>
<div class="demo-item">
<i class="icon icon-pie-graph"></i>
<code>.icon-pie-graph</code>
</div>
<div class="demo-item">
<i class="icon icon-pie-graph-open"></i>
<code>.icon-pie-graph-open</code>
</div>
<div class="demo-item">
<i class="icon icon-pie-graph-reverse"></i>
<code>.icon-pie-graph-reverse</code>
</div>
<div class="demo-item">
<i class="icon icon-visualization"></i>
<code>.icon-visualization</code>
</div>
<div class="demo-item">
<i class="icon icon-data-processing"></i>
<code>.icon-data-processing</code>
</div>
</div>
</dd>
<dt id="project">Project Management</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-project"></i>
<code>.icon-project</code>
</div>
<div class="demo-item">
<i class="icon icon-add-project"></i>
<code>.icon-add-project</code>
</div>
<div class="demo-item">
<i class="icon icon-proposal-approved"></i>
<code>.icon-proposal-approved</code>
</div>
<div class="demo-item">
<i class="icon icon-proposal-denied"></i>
<code>.icon-proposal-denied</code>
</div>
<div class="demo-item">
<i class="icon icon-proposal-pending"></i>
<code>.icon-proposal-pending</code>
</div>
<div class="demo-item">
<i class="icon icon-publications"></i>
<code>.icon-publications</code>
</div>
</div>
</dd>
<dt id="system">System & Tools</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-gear"></i>
<code>.icon-gear</code>
</div>
<div class="demo-item">
<i class="icon icon-monitor"></i>
<code>.icon-monitor</code>
</div>
<div class="demo-item">
<i class="icon icon-toolbox"></i>
<code>.icon-toolbox</code>
</div>
<div class="demo-item">
<i class="icon icon-code"></i>
<code>.icon-code</code>
</div>
<div class="demo-item">
<i class="icon icon-script"></i>
<code>.icon-script</code>
</div>
<div class="demo-item">
<i class="icon icon-search"></i>
<code>.icon-search</code>
</div>
<div class="demo-item">
<i class="icon icon-browser"></i>
<code>.icon-browser</code>
</div>
<div class="demo-item">
<i class="icon icon-new-browser"></i>
<code>.icon-new-browser</code>
</div>
<div class="demo-item">
<i class="icon icon-compass"></i>
<code>.icon-compass</code>
</div>
<div class="demo-item">
<i class="icon icon-globe"></i>
<code>.icon-globe</code>
</div>
<div class="demo-item">
<i class="icon icon-link"></i>
<code>.icon-link</code>
</div>
<div class="demo-item">
<i class="icon icon-dna"></i>
<code>.icon-dna</code>
</div>
</div>
</dd>
<dt id="actions">Actions</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-download"></i>
<code>.icon-download</code>
</div>
<div class="demo-item">
<i class="icon icon-upload"></i>
<code>.icon-upload</code>
</div>
<div class="demo-item">
<i class="icon icon-move"></i>
<code>.icon-move</code>
</div>
<div class="demo-item">
<i class="icon icon-share"></i>
<code>.icon-share</code>
</div>
<div class="demo-item">
<i class="icon icon-save"></i>
<code>.icon-save</code>
</div>
<div class="demo-item">
<i class="icon icon-extract"></i>
<code>.icon-extract</code>
</div>
<div class="demo-item">
<i class="icon icon-compress"></i>
<code>.icon-compress</code>
</div>
<div class="demo-item">
<i class="icon icon-reverse-order"></i>
<code>.icon-reverse-order</code>
</div>
<div class="demo-item">
<i class="icon icon-rotate-ccw"></i>
<code>.icon-rotate-ccw</code>
</div>
<div class="demo-item">
<i class="icon icon-rotate-cw"></i>
<code>.icon-rotate-cw</code>
</div>
<div class="demo-item">
<i class="icon icon-refresh"></i>
<code>.icon-refresh</code>
</div>
</div>
</dd>
<dt id="ui">UI Elements</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-burger"></i>
<code>.icon-burger</code>
</div>
<div class="demo-item">
<i class="icon icon-close"></i>
<code>.icon-close</code>
</div>
<div class="demo-item">
<i class="icon icon-close-boxed"></i>
<code>.icon-close-boxed</code>
</div>
<div class="demo-item">
<i class="icon icon-expand"></i>
<code>.icon-expand</code>
</div>
<div class="demo-item">
<i class="icon icon-contract"></i>
<code>.icon-contract</code>
</div>
<div class="demo-item">
<i class="icon icon-push-left"></i>
<code>.icon-push-left</code>
</div>
<div class="demo-item">
<i class="icon icon-push-right"></i>
<code>.icon-push-right</code>
</div>
<div class="demo-item">
<i class="icon icon-down-arrow"></i>
<code>.icon-down-arrow</code>
</div>
<div class="demo-item">
<i class="icon icon-exit"></i>
<code>.icon-exit</code>
</div>
</div>
</dd>
<dt id="security">Security</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-lock"></i>
<code>.icon-lock</code>
</div>
<div class="demo-item">
<i class="icon icon-unlock"></i>
<code>.icon-unlock</code>
</div>
<div class="demo-item">
<i class="icon icon-user"></i>
<code>.icon-user</code>
</div>
<div class="demo-item">
<i class="icon icon-user-reverse"></i>
<code>.icon-user-reverse</code>
</div>
<div class="demo-item">
<i class="icon icon-sillouette"></i>
<code>.icon-sillouette</code>
</div>
</div>
</dd>
<dt id="communication">Communication</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-conversation"></i>
<code>.icon-conversation</code>
</div>
<div class="demo-item">
<i class="icon icon-multiple-coversation"></i>
<code>.icon-multiple-coversation</code>
</div>
<div class="demo-item">
<i class="icon icon-coversation-wait"></i>
<code>.icon-coversation-wait</code>
</div>
</div>
</dd>
<dt id="notifications">Notifications</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-alert"></i>
<code>.icon-alert</code>
</div>
<div class="demo-item">
<i class="icon icon-no-alert"></i>
<code>.icon-no-alert</code>
</div>
<div class="demo-item">
<i class="icon icon-bulb"></i>
<code>.icon-bulb</code>
</div>
</div>
</dd>
<dt id="navigation">Navigation</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-nav-up"></i>
<code>.icon-nav-up</code>
</div>
<div class="demo-item">
<i class="icon icon-nav-right"></i>
<code>.icon-nav-right</code>
</div>
<div class="demo-item">
<i class="icon icon-nav-down"></i>
<code>.icon-nav-down</code>
</div>
<div class="demo-item">
<i class="icon icon-nav-left"></i>
<code>.icon-nav-left</code>
</div>
</div>
</dd>
</dl>
</dd>
<dt>Adjustments</dt>
<dd>
<dl>
<dt id="sizes">Sizes</dt>
<dd>
<dl>
<dt>Relative Units</dt>
<dd class="demo-grid">
<div class="demo-item">
<i class="icon icon-dashboard icon-sm"></i>
<code>.icon-sm</code>
</div>
<div class="demo-item">
<i class="icon icon-dashboard icon-md"></i>
<code>.icon-md</code>
</div>
<div class="demo-item">
<i class="icon icon-dashboard icon-lg"></i>
<code>.icon-lg</code>
</div>
</dd>
<dt>Absolute Units</dt>
<dd class="demo-grid">
<div class="demo-item">
<i class="icon icon-dashboard icon-18"></i>
<code>.icon-18</code>
</div>
<div class="demo-item">
<i class="icon icon-dashboard icon-24"></i>
<code>.icon-24</code>
</div>
<div class="demo-item">
<i class="icon icon-dashboard icon-64"></i>
<code>.icon-64</code>
</div>
</dd>
</dl>
</dd>
<dt id="transforms">Transformations</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-refresh icon-is-spinning"></i>
<code>.icon-is-spinning</code>
</div>
<div class="demo-item">
<i class="icon icon-search "></i>
<code>(no rotation)</code>
</div>
<div class="demo-item">
<i class="icon icon-search icon-rotate-90"></i>
<code>.icon-rotate-90</code>
</div>
<div class="demo-item">
<i class="icon icon-search icon-rotate-180"></i>
<code>.icon-rotate-180</code>
</div>
<div class="demo-item">
<i class="icon icon-search icon-rotate-270"></i>
<code>.icon-rotate-270</code>
</div>
<div class="demo-item">
<i class="icon icon-push-right icon-flip-x"></i>
<code>.icon-flip-x</code>
</div>
<div class="demo-item">
<i class="icon icon-push-right icon-flip-y"></i>
<code>.icon-flip-y</code>
</div>
</div>
</dd>
<dt id="buttons">in Buttons</dt>
<dd>
<div class="demo-list">
<button class="c-button c-button--primary">
<i class="icon icon-add c-button__icon--before"></i>
<span class="c-button__text">Add Item</span>
</button>
<button class="c-button c-button--secondary">
<i class="icon icon-edit-document c-button__icon--before"></i>
<span class="c-button__text">Edit</span>
</button>
<button class="c-button c-button--tertiary">
<i class="icon icon-trash c-button__icon--before"></i>
<span class="c-button__text">Delete</span>
</button>
</div>
</dd>
<dt id="labels">with Labels</dt>
<dd>
<div class="demo-grid">
<div class="demo-item">
<i class="icon icon-file" data-label="ODC"></i>
<code>[data-label="ODC"]</code>
<small class="x-truncate--one-line">licensing e.g. CC, ODC, FSF, OSI</small>
</div>
<div class="demo-item">
<i class="icon icon-refresh" data-label="| |"></i>
<code>[data-label="| |"]</code>
<small class="x-truncate--one-line">loading paused</small>
</div>
<div class="demo-item">
<i class="icon icon-data-files" data-label="99+"></i>
<code>[data-label="99+"]</code>
<small class="x-truncate--one-line">number of data entries</small>
</div>
</div>
</dd>
</dl>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1em;
}
.demo-item {
display: grid;
place-items: center;
gap: 0.5em;
padding: 0.5em;
border: 1px solid var(--global-color-primary--light);
border-radius: 4px;
}
.demo-item code {
color: var(--global-color-primary--dark);
font-size: smaller;
}
.demo-item small {
width: 100%;
text-align: center;
}
.demo-buttons .c-button {
min-width: 120px;
}
{
"shouldSkipPattern": false,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"sections": [
{
"id": "basic",
"title": "Basic Icons",
"icons": [
"dashboard",
"data-files",
"applications",
"allocations",
"history",
"history-reverse",
"jobs",
"jobs-history",
"my-data",
"calendar"
]
},
{
"id": "status",
"title": "Status Icons",
"icons": [
"approved",
"pending",
"denied",
"approved-boxed",
"approved-boxed-reverse",
"approved-reverse",
"denied-reverse",
"trophy"
]
},
{
"id": "files",
"title": "File Operations",
"icons": [
"file",
"add-file",
"edit-document",
"document",
"copy",
"rename",
"trash",
"folder",
"search-folder",
"image"
]
},
{
"id": "apps",
"title": "Applications",
"icons": [
"jupyter",
"matlab",
"rstudio",
"namd"
]
},
{
"id": "data",
"title": "Data Visualization",
"icons": [
"bar-graph",
"pie-graph",
"pie-graph-open",
"pie-graph-reverse",
"visualization",
"data-processing"
]
},
{
"id": "project",
"title": "Project Management",
"icons": [
"project",
"add-project",
"proposal-approved",
"proposal-denied",
"proposal-pending",
"publications"
]
},
{
"id": "system",
"title": "System & Tools",
"icons": [
"gear",
"monitor",
"toolbox",
"code",
"script",
"search",
"browser",
"new-browser",
"compass",
"globe",
"link",
"dna"
]
},
{
"id": "actions",
"title": "Actions",
"icons": [
"download",
"upload",
"move",
"share",
"save",
"extract",
"compress",
"reverse-order",
"rotate-ccw",
"rotate-cw",
"refresh"
]
},
{
"id": "ui",
"title": "UI Elements",
"icons": [
"burger",
"close",
"close-boxed",
"expand",
"contract",
"push-left",
"push-right",
"down-arrow",
"exit"
]
},
{
"id": "security",
"title": "Security",
"icons": [
"lock",
"unlock",
"user",
"user-reverse",
"sillouette"
]
},
{
"id": "communication",
"title": "Communication",
"icons": [
"conversation",
"multiple-coversation",
"coversation-wait"
]
},
{
"id": "notifications",
"title": "Notifications",
"icons": [
"alert",
"no-alert",
"bulb"
]
},
{
"id": "navigation",
"title": "Navigation",
"icons": [
"nav-up",
"nav-right",
"nav-down",
"nav-left"
]
}
],
"sizes": {
"relative": [
{
"class": "icon-sm",
"label": ".icon-sm"
},
{
"class": "icon-md",
"label": ".icon-md"
},
{
"class": "icon-lg",
"label": ".icon-lg"
}
],
"absolute": [
{
"class": "icon-18",
"label": ".icon-18"
},
{
"class": "icon-24",
"label": ".icon-24"
},
{
"class": "icon-64",
"label": ".icon-64"
}
]
},
"transforms": [
{
"icon": "icon-refresh",
"class": "icon-is-spinning",
"label": ".icon-is-spinning"
},
{
"icon": "icon-search",
"label": "(no rotation)"
},
{
"icon": "icon-search",
"class": "icon-rotate-90",
"label": ".icon-rotate-90"
},
{
"icon": "icon-search",
"class": "icon-rotate-180",
"label": ".icon-rotate-180"
},
{
"icon": "icon-search",
"class": "icon-rotate-270",
"label": ".icon-rotate-270"
},
{
"icon": "icon-push-right",
"class": "icon-flip-x",
"label": ".icon-flip-x"
},
{
"icon": "icon-push-right",
"class": "icon-flip-y",
"label": ".icon-flip-y"
}
],
"in_buttons": [
{
"type": "primary",
"icon": "add",
"text": "Add Item"
},
{
"type": "secondary",
"icon": "edit-document",
"text": "Edit"
},
{
"type": "tertiary",
"icon": "trash",
"text": "Delete"
}
],
"with_labels": [
{
"icon": "icon-file",
"label": "ODC",
"usage": "licensing e.g. CC, ODC, FSF, OSI"
},
{
"icon": "icon-refresh",
"label": "| |",
"usage": "loading paused"
},
{
"icon": "icon-data-files",
"label": "99+",
"usage": "number of data entries"
}
]
}