YouCan API

WebKit

A front-end template that helps you build fast, modern pages based on YouCan UI

Buttons

Styled button

Code snippet

Button with icon

Code snippet

Resized button

Code snippet

Inputs

Input with label

Code snippet

Invalid input

Code snippet

Input with inline label

Code snippet

Tags input

  • New ×
  • Delivered ×
Code snippet

Select input

New
  • New
  • Delivered
  • Created
  • Canceled
Code snippet

Search input

Code snippet

Text input with select dropdown

Code snippet

File input

Code snippet

Textarea

Code snippet

Checkboxes

Checkbox

Active
Code snippet

Radio buttons

Radio

Code snippet

Alerts

Success alert

I know that I'm awesome

×

Info alert

By the way i want to remember you that i'm awesome

×

Warning alert

Stay at home corona virus outside

×

Error alert

Bad news sorry

×
Code snippet

Page

Page header with actions

Page Title

Code snippet

Block

Block title

Block title

Actions
Block Body
Code snippet

Block

Block title

Actions
Block Body
Block Footer
Code snippet

Block with inner blocks

Block title

Actions

Inner block title

Inner block body
Inner block footer

Inner block title

Inner block body
Inner block footer
Block Footer
Code snippet

Tabs

Action
Tab 1
Code snippet

Tables

Table with search and pagination

 Ref Name Created at Shipping Status Payment Status Total Actions
#1 Othman 2020-04-21 20:50:52 Pending Unfulfilled $123
#2 Othman 2020-04-21 20:50:52 Fulfilled $123
#3 Othman 2020-04-21 20:50:52 Pending Unpaid $123
Code snippet

Table with thumbnail and selection

Filters
Put Components Here
 Created at Shipping Status Payment Status Total Actions
default thumb
2020-04-21 20:50:52 Pending Unfulfilled $123
default thumb
2020-04-21 20:50:52 Fulfilled $123
default thumb
2020-04-21 20:50:52 Pending Unpaid $123
Code snippet