Inline extra small
Inline defualt
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:
sub text (this can be left out if you don't need it)
Due: 21/01/2020
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:
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" attributeBasic use:
<cla-banner></cla-banner>
Props & Slots:
Basic use:
<cla-progress minimum="0" maximum="4" current="4" showprogresstext="true" showremainingtext="true" unit="votes" showvalueas="unit"></cla-progress>
Props & Slots:
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:
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:
Basic use:
<cla-insignia shape="hexagon" type="empty"> <cla-insignia-image source="link.to"></cla-insignia-image> </cla-insignia>
Props & Slots:
Basic use:
<cla-button color="primary">Primary</cla-button>
Props & Slots:
Basic use:
<cla-icon fill="#81beff" iconid="glyphicons-custom-announcements"></cla-icon>
Props
Basic use:
<cla-badge styleclass="badge badge-primary">Badge Primary</cla-badge>
Props
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:
Basic use:
<cla-checkbox name="">Default checkbox</cla-checkbox>
Props & Slots:
Basic use:
<cla-toggle-switch name="">Default toggle switch</cla-toggle-switch>
Props & Slots:
Basic use:
<cla-radio name="radios" value="1">Default radio</cla-radio>
Props & Slots:
Extra Small
Small
Default
Large
Basic use:
<cla-status-indicator color="#81beff"></cla-status-indicator>
Props & Slots:
Text with icon to test line-height.
Lead body copy
small
Muted Text
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |