Clear Components

clr-alert-center

The 'clr-alert-center' is meant to house the alert pop ups and dictates whether the alerts will show on top or the bottom of the page

  <clr-alert-center location="top"> </clr-alert-center>
  

  --------
  

  <clr-alert-center location="bottom">
    <clr-alert slot="alert" kind="info" text="content goes here"></clr-alert>
    <clr-alert slot="alert" kind="success" text="Success!"></clr-alert>
    <clr-alert slot="alert" kind="warning" text="Warning!"></clr-alert>
    <clr-alert slot="alert" kind="error" text="Error!"></clr-alert>
  </clr-alert-center>

slots:

slot="alert"

properties:

location=" Bottom | Top "

clr-alert

'clr-alert' is a banner that shows up either on top or bottom of the page meant for error, success, warning or news announcements

  <clr-alert slot="alert" kind="info" text="content goes here"></clr-alert>
  

properties:

kind=" Info | Success | Warning | Error "

text="content of the alert"

clr-carousel

'clr-carousel' houses the 'clr-slide' or any other HTML element meant to act as a slide. When only one slide is present 'clr-carousel' will act as a hero header element

  <clr-carousel size="third">
    <clr-slide slot="slide" bgURL="slide-bg-1.png" mainTitle="First Title" mainContent="this is the content of the first slide" imgURL="slide-img-1.png" bgRepeat="yes"></clr-slide>
    <clr-slide slot="slide" bgURL="slide-bg-2.png" mainTitle="Second Title" mainContent="this is the content of the Second slide" imgURL="slide-img-2.png" bgRepeat="yes"></clr-slide>
  </clr-carousel>
  

slots:

slot="slide"

properties:

size=" quater | third | half | full "

clr-slide

'clr-slide' is a pre-syled slide for quick layout

   <clr-slide slot="slide" bgURL="/test_assets/bg-slide-1.png" mainTitle="First Title" mainContent="this is the content of the first slide" imgURL="/test_assets/bg-slide-1.png" bgRepeat="yes"></clr-slide>
  

slots:

slot=" img | Info "

properties:

title="(title of the slide)"

bgimg=" / "

bgcolor="(all regular color values work here)"

bgrepeat=" yes | no "

justify=" left | center | right "

breakpoint=" any number value only, no 'px' "

clr-block-expand

'clr-block-expand' is an expanding element with an image header and the ability to preset the amount of expandable content being shown

<clr-block-expand imgbg="/" colorbg="#fff">
  <div slot="info">
    (content of header here)
  </div>
  <div slot="body">
    (content of body here)
  </div>
</clr-block-expand>

slots:

slot="info"

slot="body"

properties:

imgbg="/"

colorbg="(all regular color values work here)"

size=" quarter | third | half | full "

clr-card

'clr-card' is a pre-styled card that has an image header a title and info text spot and an expandable area

    <clr-card title="Card Title Text" subtitle="this is sub title text" href="#" size="third">
      <img slot="img" height="130px" src=" "/>
      <div slot="card-body">content in this area will be shown</div>
      <div slot="card-expand-body">Any content in this area is hidden until expanded.</div>
    </clr-card>
    

slots:

slot="img"

slot="card-body"

slot="card-expand-body"

properties:

maintitle="card title text"

subtitle="card title text"

text="card content text"

href="#"

url="#"

src="#"

size=" quarter | third | half | full "

clr-expand-link

  <clr-expand-link text="visible content of first expand" href="#">
    <a slot="link" href="#one">One</a>
    <clr-expand-link slot="link" text="visible content of second expand" href="#">
      <a slot="link" href="#two">One</a>
    </clr-expand-link>
  </clr-expand-link>
  

clr-drop-link

  <clr-drop-link slot="link" text="text for the link" href="#1" target="_blank">
    <a slot="link" href="#one">One</a>
    <a slot="link" href="#two">Two</a>
    <a slot="link" href="#three">Three</a>
    <clr-drop-link slot="link" text="text for the link" href="#2">
      <a slot="link" href="#one">One<<a>
      <a slot="link" href="#two">Two</a>
    </clr-drop-link>
  </clr-drop-link>
  

clr-footer

  <clr-footer></clr-footer>
  

clr-header

  <clr-header height="60px">
    <clr-drop-link slot="link" text="Drop Link Text test" href="#main1" target="_blank"></clr-drop-link>
    <a href="#" slot="icon"><clr-icon slot="icon" size="small" kind="doc"></clr-icon></a>
    <clr-nav-btn slot="btn"></clr-nav-btn>
  </clr-header>
  

clr-icon

  <clr-icon slot="icon" size="small" kind="doc"></clr-icon>
  

clr-icon-btn

  <clr-icon-btn class="marg-10" href="#" text="this is a regular thing"><clr-icon slot="btn" size="large" kind="doc"></clr-icon></clr-icon-btn>
  

clr-left-drawer

  <clr-left-drawer>
    <img slot="logo" height="45px" src=" " />
    <nav slot="nav">
    </nav>
  </clr-left-drawer>
  

clr-nav

    <clr-nav slot="nav">
        <clr-drop-link slot="link" text="Drop Link Text" href="#" target="_blank"></clr-drop-link>
        <a slot="link" href="#">text
    </clr-nav> 
  

clr-nav-btn

  <clr-nav-btn slot="btn"></clr-nav-btn>
  

clr-pill

  <clr-pill></clr-pill>
  

clr-pn-btn

  <clr-pn-btn></clr-pn-btn>
  

clr-popup-btn

  <clr-popup-btn kind="info"></clr-popup-btn>
  

clr-side-menu

  <clr-side-menu side="right" hidden="no">
    <clr-icon-btn class="marg-10" href="#" text="this is a regular thing"><clr-icon slot="btn" size="large" kind="doc"></clr-icon></clr-icon-btn>
    <clr-icon-btn class="marg-10" href="#" text="this is a regular thing"><clr-icon slot="btn" size="large" kind="doc"></clr-icon></clr-icon-btn>
    <clr-icon-btn class="marg-10" href="#" text="this is a regular thing"><clr-icon slot="btn" size="large" kind="doc"></clr-icon></clr-icon-btn>
  </clr-side-menu>
  

clr-wheel-ui

  <clr-wheel-ui></clr-wheel-ui>