Skip to content

Chores #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kotesh-arya wants to merge 2 commits into
base: Dev
Choose a base branch
from
Open

Chores #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2584f72
DOCS: updated ReadME
kotesh-arya Apr 12, 2022
eb2ebbf
UPDATE: Twitter profile link
kotesh-arya Nov 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
285 changes: 180 additions & 105 deletions Components/Alert/alert.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,118 +1,193 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Kotesh Mudila">
<meta name="description" content="Handy-UI documentation - Alert component">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/sidebar.css">
<link rel="stylesheet" href="/css/components.css">
<link rel="stylesheet" href="/css/docs.css">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Kotesh Mudila" />
<meta
name="description"
content="Handy-UI documentation - Alert component"
/>
<link rel="stylesheet" href="/css/index.css" />
<link rel="stylesheet" href="/css/sidebar.css" />
<link rel="stylesheet" href="/css/components.css" />
<link rel="stylesheet" href="/css/docs.css" />

<title>HandyUI : Alert</title>
</head>

</head>

<body>
<body>
<header class="header">
<div class="logo">
<h1>Handy UI</h1>
</div>
<div class="main-links">
<a href="https://github.com/kotesh-arya"><img class="header-icon"
src="https://img.icons8.com/windows/64/ffffff/github.png" /></a>
<a href="https://twitter.com/Kotesh_Mudila"><img class="header-icon"
src="https://img.icons8.com/ios-glyphs/60/ffffff/twitter--v1.png" /></a>
<a href="https://www.linkedin.com/in/koteswara-rao-mudila-7aa740159/"><img class="header-icon"
src="https://img.icons8.com/ios-glyphs/60/ffffff/linkedin.png" /></a>
</div>
<div class="logo">
<h1>Handy UI</h1>
</div>
<div class="main-links">
<a href="https://github.com/kotesh-arya"
><img
class="header-icon"
src="https://img.icons8.com/windows/64/ffffff/github.png"
/></a>
<a href="https://twitter.com/Codesh_"
><img
class="header-icon"
src="https://img.icons8.com/ios-glyphs/60/ffffff/twitter--v1.png"
/></a>
<a href="https://www.linkedin.com/in/koteswara-rao-mudila-7aa740159/"
><img
class="header-icon"
src="https://img.icons8.com/ios-glyphs/60/ffffff/linkedin.png"
/></a>
</div>
</header>
<main class="main-content">
<div class="side-bar">
<ul>
<li>
<h2>Get-started</h2>
</li>
<hr>
<li><a class="sidebar-item" href="/Get-Started/introduction.html">Introduction</a></li>
<li><a class="sidebar-item " href="/Get-Started/typography.html">Typography</a></li>
<li><a class="sidebar-item" href="/Get-Started/colors.html">Colours</a></li>
<li>
<h2>Components</h2>
</li>
<hr>
<li><a class="sidebar-item" href="/Components/Avatar/avatar.html">Avatar</a></li>
<li><a class="sidebar-item link-active" href="/Components/Alert/alert.html">Alert</a></li>
<li><a class="sidebar-item " href="/Components/Badge/badge.html">Badge</a></li>
<li><a class="sidebar-item " href="/Components/Button/button.html">Button</a></li>
<li><a class="sidebar-item " href="/Components/Card/card.html">Card</a></li>
<li><a class="sidebar-item" href="/Components/Image/image.html">Image</a></li>
<li><a class="sidebar-item" href="/Components/Input/input.html">Input</a></li>
<li><a class="sidebar-item " href="/Components/Slider/slider.html">Slider</a></li>
<li><a class="sidebar-item" href="/Components/Grid/grid.html">Grid</a></li>
<li><a class="sidebar-item" href="/Components/Navigation/navigation.html">Navigation</a></li>
</ul>
<div class="side-bar">
<ul>
<li>
<h2>Get-started</h2>
</li>
<hr />
<li>
<a class="sidebar-item" href="/Get-Started/introduction.html"
>Introduction</a
>
</li>
<li>
<a class="sidebar-item" href="/Get-Started/typography.html"
>Typography</a
>
</li>
<li>
<a class="sidebar-item" href="/Get-Started/colors.html">Colours</a>
</li>
<li>
<h2>Components</h2>
</li>
<hr />
<li>
<a class="sidebar-item" href="/Components/Avatar/avatar.html"
>Avatar</a
>
</li>
<li>
<a
class="sidebar-item link-active"
href="/Components/Alert/alert.html"
>Alert</a
>
</li>
<li>
<a class="sidebar-item" href="/Components/Badge/badge.html"
>Badge</a
>
</li>
<li>
<a class="sidebar-item" href="/Components/Button/button.html"
>Button</a
>
</li>
<li>
<a class="sidebar-item" href="/Components/Card/card.html">Card</a>
</li>
<li>
<a class="sidebar-item" href="/Components/Image/image.html"
>Image</a
>
</li>
<li>
<a class="sidebar-item" href="/Components/Input/input.html"
>Input</a
>
</li>
<li>
<a class="sidebar-item" href="/Components/Slider/slider.html"
>Slider</a
>
</li>
<li>
<a class="sidebar-item" href="/Components/Grid/grid.html">Grid</a>
</li>
<li>
<a
class="sidebar-item"
href="/Components/Navigation/navigation.html"
>Navigation</a
>
</li>
</ul>
</div>
<section class="section-content">
<div class="section-title">Alert</div>
<div class="section-subtitle">
An alert displays a short, important message in a way that attracts
the user's attention without interrupting the user's task.
</div>
<section class="section-content">
<div class="section-title">
Alert
<hr />
<article>
<div class="article-title">Simple Alert</div>
<div class="article-subtitle">
Simple Alerts can be created using
<span class="highlight-text">alert</span> class, followed by the
variant name.
</div>
<div class="example-div-column">
<div class="alert alert-primary">
Primary-This is a Primary Alert!
</div>
<div class="section-subtitle">
An alert displays a short, important message in a way that attracts the user's attention without
interrupting the user's task.
<div class="alert alert-error">Error-This is an Error Alert!</div>
<div class="alert alert-success">
Success-This is a Success Alert!
</div>
<hr>
<article>
<div class="article-title">
Simple Alert
</div>
<div class="article-subtitle">
Simple Alerts can be created using <span class="highlight-text">alert</span> class, followed by the variant name.
</div>
<div class="example-div-column">
<div class="alert alert-primary">Primary-This is a Primary Alert!</div>
<div class="alert alert-error">Error-This is an Error Alert!</div>
<div class="alert alert-success">Success-This is a Success Alert!</div>
<div class="alert alert-warning">Warning-This is a Warning Alert!</div>
</div>
<div class="code-frame">
<iframe class="frame-div"
src="https://carbon.now.sh/embed?bg=rgba%28184%2C176%2C141%2C0%29&t=3024-night&wt=none&l=auto&width=680&ds=true&dsyoff=0px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=4x&wm=false&code=%253Cdiv%2520class%253D%2522alert%2520primary%2522%253EPrimary-This%2520is%2520a%2520Primary%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520error%2522%253EError-This%2520is%2520an%2520Error%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520success%2522%253ESuccess-This%2520is%2520a%2520Success%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520warning%2522%253EWarning-This%2520is%2520a%2520Warning%2520Alert%253C%252Fdiv%253E"
sandbox="allow-scripts allow-same-origin">
</iframe>
</div>
</article>
<article>
<div class="article-title">
Outline Alert
</div>
<div class="article-subtitle">
Outline alerts are created by using a combination of <span class="highlight-text">alert</span> class, followed by <span class="highlight-text">variant-outline</span>.
</div>
<div class="example-div-column">
<div class="alert primary-outline">Primary-This is a Primary Alert!</div>
<div class="alert error-outline">Error-This is an Error Alert!</div>
<div class="alert success-outline">Success-This is a Success Alert!</div>
<div class="alert warning-outline">Warning-This is a Warning Alert!</div>

</div>
<div class="code-frame">
<iframe class="frame-div"
src="https://carbon.now.sh/embed?bg=rgba%28184%2C176%2C141%2C0%29&t=3024-night&wt=none&l=auto&width=680&ds=true&dsyoff=0px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=4x&wm=false&code=%253Cdiv%2520class%253D%2522alert%2520primary-outline%2522%2520%253EPrimary-This%2520is%2520a%2520Primary%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520error-outline%2522%2520%253EError-This%2520is%2520an%2520Error%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520success-outline%2522%253ESuccess-This%2520is%2520a%2520Success%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520warning-outline%2522%253EWarning-This%2520is%2520a%2520Warning%2520Alert%253C%252Fdiv%253E"
sandbox="allow-scripts allow-same-origin">
</iframe>
</div>
</article>
<div class="section-footer">
<a class="section-footer-link" href="/Components/Avatar/avatar.html"> < Avatar</a>
<a class="section-footer-link" href="/Components/Badge/badge.html"> Badge > </a>
<div class="alert alert-warning">
Warning-This is a Warning Alert!
</div>
</section>
</div>
<div class="code-frame">
<iframe
class="frame-div"
src="https://carbon.now.sh/embed?bg=rgba%28184%2C176%2C141%2C0%29&t=3024-night&wt=none&l=auto&width=680&ds=true&dsyoff=0px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=4x&wm=false&code=%253Cdiv%2520class%253D%2522alert%2520primary%2522%253EPrimary-This%2520is%2520a%2520Primary%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520error%2522%253EError-This%2520is%2520an%2520Error%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520success%2522%253ESuccess-This%2520is%2520a%2520Success%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520warning%2522%253EWarning-This%2520is%2520a%2520Warning%2520Alert%253C%252Fdiv%253E"
sandbox="allow-scripts allow-same-origin"
>
</iframe>
</div>
</article>
<article>
<div class="article-title">Outline Alert</div>
<div class="article-subtitle">
Outline alerts are created by using a combination of
<span class="highlight-text">alert</span> class, followed by
<span class="highlight-text">variant-outline</span>.
</div>
<div class="example-div-column">
<div class="alert primary-outline">
Primary-This is a Primary Alert!
</div>
<div class="alert error-outline">Error-This is an Error Alert!</div>
<div class="alert success-outline">
Success-This is a Success Alert!
</div>
<div class="alert warning-outline">
Warning-This is a Warning Alert!
</div>
</div>
<div class="code-frame">
<iframe
class="frame-div"
src="https://carbon.now.sh/embed?bg=rgba%28184%2C176%2C141%2C0%29&t=3024-night&wt=none&l=auto&width=680&ds=true&dsyoff=0px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=4x&wm=false&code=%253Cdiv%2520class%253D%2522alert%2520primary-outline%2522%2520%253EPrimary-This%2520is%2520a%2520Primary%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520error-outline%2522%2520%253EError-This%2520is%2520an%2520Error%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520success-outline%2522%253ESuccess-This%2520is%2520a%2520Success%2520Alert%253C%252Fdiv%253E%250A%253Cdiv%2520class%253D%2522alert%2520warning-outline%2522%253EWarning-This%2520is%2520a%2520Warning%2520Alert%253C%252Fdiv%253E"
sandbox="allow-scripts allow-same-origin"
>
</iframe>
</div>
</article>
<div class="section-footer">
<a class="section-footer-link" href="/Components/Avatar/avatar.html">
< Avatar</a
>
<a class="section-footer-link" href="/Components/Badge/badge.html">
Badge >
</a>
</div>
</section>
</main>
</body>

</html>
</body>
</html>
Loading