[Style Reference]

[Front-end framework]

[Bootstrap] [Version] 4

[Claromentis uses Bootstrap, an open-source front-end web development framework. For sample code, usage and patterns please refer to the documentation.]

[Documentation]

[Component Library]

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 Title Large Tab Large Tab Active

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 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: