• Sysadmin panel
  • Labs
  • Style Reference
  • 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-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-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:

    Progress 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

    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 Button Extra 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.