.svg)
Style Guide
This style guide page contains styles and components that are to be used throughout a website.
Typography
The different text sizes used throughout the site.
h1
This is a Header.
h2
This is a Header.
h3
This is a Header.
h4
This is a Header.
h5
This is a Header
h6
This is a Header
Large Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
small Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
List
- Personalised Product Recommendations
- Intelligent Search for easy product discovery
- Conversational AI for effortless shopping experience
- GAI to produce creative contents for Product desc, ads and more..
Link blocks
Text Link
Figure with caption
Rich Text
Formatted rich text element used for long sections of text such as blog posts.
This is a Header.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Latest updates
- Heading line height is fixed
- All buttons now have tooltips
- Spell checker number issue fixed
Colors
The different weights of greys and colours used throughout the website.
Main colors
Background colors
Text colors
Buttons
The different types of buttons used throughout the website.
Primary
Primary btnLight
ExploreWhite
Exploreicon btnd
Grey
CancelDisabled
Not availableSmall button with icon
Card button
Margins
Margins
margin-bottom
Header Margin bottom
Paddings
Direction classes
Padding horizontal
Padding vertical
Padding vertical for hero section
Padding vertical
Grids
Different grid layouts to use across your site
4 grid
3 Grid
Auto grid
Max Widths
Use the max-width CSS property to contain inner content to a maximum width.
Max -width-380px
Max -width-622px
Icons
Icons used across the website taken from the JCP figma file
Forms
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
contact form
Login form
Sign up form
Reset password form
Forgot password form
Forgot Password?
We’ll send OTP on your mail to reset password
Tabs
Various types of tabs used throughout the website
3 Col tab
2 Col tab
Vertical Tab
Tables
Various tables
Table - 2c
FAQ Accordians
FAQ Accordians
CoPilot.live is a tool that integrates with any existing SaaS product and can help users perform tasks on the SaaS platform by just taking a command using Natural Language Processing (NLP).
You can use CoPilot.live by integrating it with your SaaS platform. Then, you can simply type or speak your command in natural language and CoPilot with execute it
CoPilot.live can do variety of tasks depending on the SaaS platform you are using. For example, it can help you can curate content for blog, get insights on things happening on SaaS product, write database queries for you, etc
CoPilot.live uses advanced NLP techniques to analyze your commands and extract the relevant information and intent. Then, it uses APIs and web scraping to interact with the SaaS platform and perform the desired task
Yes, CoPilot.live is secure and reliable. CoPilot does not store any of your personal or sensitive data. It only accesses SaaS platform you are using with your permission and authorization. It also has error handling and feedback mechanisms to ensure that your commands are executed correctly and efficiently
Cards
Card without Text link
Master Data Hub
Single sync across channels for product information, serviceability, tax information and others
Cards with text link
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Cards with list
Advance Commerce Lab
Models Under Development
- Inventory Risk Score
- Fraud Delivery Address Score
- Promotion/Discount Recommendation
- Large Language models, transformers, visual language models.