Claromentis Design System Components


Nav Tabs

Inline extra small

item 1 item 2 item 3 item 4 item 5

Inline defualt

item 1 item 2 item 3 item 4 item 5
Block Title Xs Tab Active Small Tab Title Default Tab Active Default Tab Large Tab

Basic use:

<cla-nav inline="true">
 <cla-nav-item href="http://google.co.uk" size="small">item 1</cla-nav-item>
 <cla-nav-item href="http://google.co.uk" size="small">item 2</cla-nav-item>
 <cla-nav-item href="http://google.co.uk" size="small" active>item 3</cla-nav-item>
</cla-nav>
		

Props & Slots:

Cards

Won it mate James Simon Ivan Gili Chris
Lorem ipsum dolo Integer quam nunc, consequat nec

sub text (this can be left out if you don't need it)

Won it mate James Simon
Lorem ipsum dolor sit amet, consectetur xeifend nec, pharetra ut augue. Integer quam nunc, consequat nec
xeifend nec, pharetra ut augue. Integer quam nunc, consequat nec
A fresh departure

Due: 21/01/2020

Completed

Basic use:

<cla-card styleclass="rounded-corners">
 <cla-card-media slot="card-top">
  <cla-badge slot="status" styleclass="badge badge-pill badge-pill badge-gold badge-lg"><cla-icon iconid="glyphicons-basic-75-cup"></cla-icon> Won it mate</cla-badge>
  <cla-card-figure><img src="link.to/image/"/></cla-card-figure>
 </cla-card-media>
  <cla-menu slot="menu">
   <a href="/test">James</a>
   <a href="/test">Simon</a>
   <a href="/test">Ivan</a>
   <a href="/test">Gili</a>
   <a href="/test">Chris</a>
  </cla-menu>
 <h5 class="card-title truncate-text">Lorem ipsum dolo Integer quam nunc, consequat nec</h5>
 <p class="card-text">sub text (this can be left out if you don't need it)</p>
</cla-card>
		

Props & Slots:

Banner

Banner Header Close Banner

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

See a demo

The comp is fixed to the buttom of the page by default and can be fixed to the top using the position="top" attribute

Basic use:

<cla-banner></cla-banner>
		

Props & Slots:

Progress bar






Basic use:

<cla-progress minimum="0" maximum="4" current="4" showprogresstext="true" showremainingtext="true" unit="votes" showvalueas="unit"></cla-progress>
		

Props & Slots:

User List

Basic use:

<cla-user-list title="Who else has it?" plusnumber="8" href="link.to">
 <cla-user-list-item href="link.to/person" img="link.to"></cla-user-list-item>
 <cla-user-list-item href="link.to/person" img="link.to"></cla-user-list-item>
 <cla-user-list-item href="link.to/person" img="link.to"></cla-user-list-item>
</cla-user-list>
				

Props & Slots:

Popovers

  • Click to see a popover

    Lorem Ipsum Dolor Sit

    Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing Elit Sed
  • Click to see a popover

    Lorem Ipsum Dolor Sit

    Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing Elit Sed
  • Click to see a popover

    Lorem Ipsum Dolor Sit

    Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing Elit Sed

Basic use:

<cla-popover header="Creative Thinker" subheader="Thinks outside the box, solves problems in a creative way" smalltext="Given on 02/05/2019 by Ivan Bandura">
<cla-insignia width="200" shape="hexagon">
 <cla-insignia-image size="large" source="/assets/icons/insignia/044-trophy-3@2x.svg"></cla-insignia-image>
</cla-insignia>
<div slot="content">
 <h3>Lorem Ipsum Dolor Sit</h3>
 <p>Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing Elit Sed</p>
 <cla-progress minimum="0" maximum="4" current="4" showprogresstext="true" showremainingtext="true" unit="votes" showvalueas="unit"></cla-progress>
</div>
</cla-popover>
		

Props & Slots:

Insignia

Basic use:

<cla-insignia shape="hexagon" type="empty">
 <cla-insignia-image  source="link.to"></cla-insignia-image>
</cla-insignia>
		

Props & Slots:

Buttons

Primary Primary disabled

Secondary Secondary Disabled

Success Success Disabled

Danger Danger Disabled

Warning Warning Disabled

Info Info Disabled

Light Light Disabled

Dark Dark Disabled

Primary Outlined Secondary Outlined Secondary Outlined Disabled

Primary Small Secondary Small

Success Large Danger Large

Secondary Small Block Primary Block Danger Large Block

Basic use:

<cla-button color="primary">Primary</cla-button>
		

Props & Slots:

Icons

Basic use:

<cla-icon fill="#81beff" iconid="glyphicons-custom-announcements"></cla-icon>
		

Props

Badges

Badge Primary Badge Secondary Badge Success Badge Danger Badge Warning

Large Pill Primary Large Pill Secondary Large Pill Success Pill Danger Pill Warning

Badge With Icon Pill With Icon

Badge Custom Colour Large Pill Custom Colour

Basic use:

<cla-badge styleclass="badge badge-pill badge-primary">Badge Primary</cla-badge>
		

Props

Picker

Multi Select Picker


Single Select Picker


Single Select Full Width Radio Picker


Multi Select Full Width checkbox Picker

Basic use:

<cla-picker-group multiselectable="true">
<cla-item orientate="vertical">
 <cla-label hidden="true">Who's Logged In</cla-label>
 <cla-picker id="logged-in" name="logged-in" value="5" iconid="glyphicons-basic-44-user-group"></cla-picker>
</cla-item>
</cla-picker-group>
		

Props & Slots:

Checkboxes

Default block checkbox Default disabled & block checkbox Default checkbox
Inverted checkbox
Disabled checkbox Iconic checkbox Large checkbox Paragraph checkbox - 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.

Basic use:

<cla-checkbox name="">Default checkbox</cla-checkbox>
		

Props & Slots:

Toggle Switches

Default block toggle switch Default disabled & block toggle switch Default toggle switch
Inverted toggle switch
Disabled checkbox Iconic toggle switch Large toggle switch Large toggle switch with text inside switch Large toggle switch with text inside switch Paragraph toggle switch - 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.

Basic use:

<cla-toggle-switch name="">Default toggle switch</cla-toggle-switch>
		

Props & Slots:

Radios

Default radio 1 Default radio 2 Default radio 3 Default radio 4
Large radio 1 Large radio 2 Large radio 3 Large radio 4
Inverted radio 1 Inverted radio 2

Disabled radio Disabled radio Radio
Block radio Block radio Block radio
Checked radio Radio Radio

Basic use:

<cla-radio name="radios" value="1">Default radio</cla-radio>
		

Props & Slots:

Status Indicator

Extra Small

Small

Default

Large

With contrasting letter

With Text

Status Status Status | Status Status Status

Status Status Status | Status Status Status

Inverted

Status Status | Status Status

Basic use:

		<cla-status-indicator color="#81beff"></cla-status-indicator>
	

Props & Slots:

Percentage Circle

Colors

Custom text in center

Dark Mode

Size

Basic use:

		<cla-progress-circle primarycolor="#00c6b6" size="small" percentage="25"></cla-progress-circle>
	

Props & Slots:

Structured List

Structured List with button - Sortable
Add Task
Structured List with checkbox
High James Simon Ivan Gili Chris
Structured List with icon

Dark Mode

Structured List - inverted & Sortable Structured List - inverted
Structured List with icon - inverted
Structured List - RTL & Sortable Structured List - RTL Structured List - RTL

Basic use:

    <cla-structured-list>Structured List
    </cla-structured-list>
  

Props & Slots:


Bootstrap 3 Components

Well - Now card with a light background

Look, I am in a well!

Text with icon to test line-height.

Lead body copy

small

Muted Text

Tooltip Test



Buttons

Button Default Button Primary Button Success Button Danger Button Info Button Large Button Default Button Small

Tabs

Home
Profile
Message
Settings

Labels

Default Primary Success Info Warning Danger

Alerts

Panels

Panel title

Panel content

Tables

Table

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Striped

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Hover

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Bordered

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.