Made with for EC Teams
Playground

Flat UI

Usage

Implementation

These are the links necessary for the correct functioning of the styles:

Put this inside your <head> tag (normally, inside the _Layout.razor or _Host.razor file):


<!-- Core Flat CSS -->
<link rel="stylesheet" type="text/css" href="https://ui.elastacloud.ai/assets/css/core-flat.css">

In order to see the icons properly you should add one of these links (Free or Pro) before the Core style:


<!-- FONT AWESOME (PRO) -->
<link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.2/css/all.css">
<link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.2/css/sharp-solid.css">
<link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.2/css/sharp-regular.css">
<link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.2/css/sharp-light.css">

<!-- FONT AWESOME (FREE) -->
<link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.2/css/all.css">

Basic Template

This is an example of a blank template, with all the necessary links to start working with the Framework:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- FONT AWESOME (FREE) -->
	<link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.2/css/all.css">

	<!-- Core Flat CSS -->
	<link rel="stylesheet" type="text/css" href="https://ui.elastacloud.ai/assets/css/core-flat.css">

	<title>EC Framework | Template</title>
</head>
<body>
	
	<!-- YOUR CODE HERE -->

	<script type="text/javascript"></script>
	
</body>
</html>

Layout

Pages

These are some pages that DO NOT FOLLOW the standard structure of the framework. They use some of its UI components but have a custom design:


  • Login (Feedbacks)
  • Register (Feedbacks)
  • Terms and Conditions (Feedbacks)
  • 403 Page
  • 404 Page

If you want to create a page similar to one of these, you can see some of the pre-made templates


Navigation bars will scroll by default if the page is long enough. If we want the navigation bar to remain permanently visible stuck at the top of the screen even when scrolling, just add the class="sticky" to the <nav> tag:

<nav class="sticky">
	<!-- YOUR NAV CONTENT -->
</nav>

<nav>
	<div class="containerLogo">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/logo.svg" class="logoNav">
	</div>
</nav>


<nav>
	<div class="containerLogo">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/logo.svg" class="logoNav">
	</div>
	<div class="containerNavCenter"></div>
	<div class="containerUser">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="userNav">
	</div>
</nav>


<nav>
	<div class="containerLogo">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/logo.svg" class="logoNav">
	</div>
	<div class="containerNavCenter">
		<button class="btn-2 btn-l"><i class="fa-solid fa-house"></i> Button</button>
	</div>
	<div class="containerUser">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="userNav">
	</div>
</nav>


<nav>
	<div class="containerLogo">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/logo.svg" class="logoNav">
	</div>
	<div class="containerNavCenter">
		<ul class="navMenu">
			<li>
				<a href="" class="navItem navItem-active">Item</a>
			</li>
			<li>
				<a href="" class="navItem">Item</a>
			</li>
			<li>
				<a href="" class="navItem">Item</a>
			</li>
			<li>
				<a href="" class="navItem">Item</a>
			</li>
			<li>
				<a href="" class="navItem">Item</a>
			</li>
		</ul>
	</div>
	<div class="containerUser">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="userNav">
	</div>
</nav>


<nav>
	<div class="containerLogo">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/logo.svg" class="logoNav">
	</div>
	<div class="containerNavCenter">
		<div class="input-group-icon">
			<i class="fa-solid fa-house"></i>
			<input type="text" name="test" id="test" value="" placeholder="Type something...">
			<button class="btn-2 btn-m">Button</button>
		</div>
	</div>
	<div class="containerUser">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="userNav">
	</div>
</nav>


<nav>
	<div class="containerLogo">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/logo.svg" class="logoNav">
	</div>
	<div class="containerNavCenter">
		<button class="btn-7 btn-xl"><i class="fa-solid fa-house"></i>Button</button>
		<div class="input-group-icon">
			<i class="fa-solid fa-house"></i>
			<input type="text" name="test" id="test" value="" placeholder="Type something...">
			<button class="btn-2 btn-m">Button</button>
		</div>
	</div>
	<div class="containerUser">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="userNav">
	</div>
</nav>

Headers

Jumbotron

JUMBOTRON

Best header in the World

<header class="jumbotron bg-solid-1">
	<div>
		<h1>JUMBOTRON</h1>
		<p>Best header in the World</p>
	</div>
</header>

<header class="searching bg-solid-1">
	<div>
		<div class="input-group-icon">
			<i class="fa-solid fa-search"></i>
			<input type="text" name="test" id="test" value="" placeholder="Search...">
			<button class="btn-2 btn-m">Search</button>
		</div>
	</div>
</header>

Presentation

Presentation

Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Iure accusantium saepe esse obcaecati, quasi architecto nisi fugiat a, sint sunt dolore tempora assumenda facilis reprehenderit dolorum, ratione aut voluptate asperiores.

<header class="presentation bg-solid-1">
	<div class="presentation-info">
		<h1>Presentation</h1>
		<p>Lorem ipsum dolor sit amet, consectetur, adipisicing elit...</p>
		<button class="btn-2 btn-m">Button</button>
	</div>
	<div class="presentation-picture">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/logo.svg" class="presentation-img">
	</div>
</header>

Background Color (Defaults)

Content

Some Content

<header class="jumbotron bg-solid-2">
	<div>
		<h1>Content</h1>
		<p>Some Content</p>
	</div>
</header>

Background Color (Custom)

Content

Some Content

<header class="jumbotron" style="background: tomato;">
	<div>
		<h1>Content</h1>
		<p>Some Content</p>
	</div>
</header>

You can look for HTML Color Names or you can use the Color Picker


Background Image

Content

Some Content

<header class="jumbotron" style="background: url('https://ui.elastacloud.ai/assets/rsc/img/bg-image.png') no-repeat center center; background-size: cover;">
	<div>
		<h1>Content</h1>
		<p>Some Content</p>
	</div>
</header>

Background Image (Parallax)

Content

Some Content

<header class="jumbotron" style="background: url('https://ui.elastacloud.ai/assets/rsc/img/bg-image.png') no-repeat center center fixed; background-size: cover;">
	<div>
		<h1>Content</h1>
		<p>Some Content</p>
	</div>
</header>

Section

The section is the area that will contain the page, specifying whether the content will occupy the entire width of the screen or leave lateral margins.


Full Width

Section
<main>
	<section>
		<!-- YOUR CONTENT -->
	</section>
</main>


Boxed

Section
<main class="boxed">
	<section>
		<!-- YOUR CONTENT -->
	</section>
</main>

Containers

It is important to remember that the sections define the space to which our web page will adapt, that is, the maximum width that our page will have. But once we want to start inserting elements in it, we need to use the containers.

Currently, the class="box" elements have been incorporated, which must always be placed inside a class="container" or within other box elements, since, by default, the boxes will be placed in line (from left to right) occupying a space in the container.

Whatever the layout, there must always be a container and inside it, as many nested boxes as you want.


The following classes have been created according to the needs:

  • box-100 = will occupy 100% of the container width
  • box-75 = will occupy 75% of the container width
  • box-50 = will occupy 50% of the container width
  • box-25 = will occupy 25% of the container width

If we simply want to add one element next to the other and the width of the boxes will adapt according to the amount of content we have, we just need to add the class="box" and the width will automatically adapt according to the amount of boxes we have.


Single Container

Box
<main>
	<section>
		<div class="container">
			<div class="box box-100">Box</div>
		</div>
		<!-- MORE CONTAINERS ... -->
	</section>
</main>

Two Containers

Same Width

Box 1
Box 2
<main>
	<section>
		<div class="container">
			<div class="box box-50">Box 1</div>
			<div class="box box-50">Box 2</div>
		</div>
		<!-- MORE CONTAINERS ... -->
	</section>
</main>

Left Bigger than Right

Box 1
Box 2
<main>
	<section>
		<div class="container">
			<div class="box box-75">Box 1</div>
			<div class="box box-25">Box 2</div>
		</div>
		<!-- MORE CONTAINERS ... -->
	</section>
</main>

Right Bigger than Left

Box 1
Box 2
<main>
	<section>
		<div class="container">
			<div class="box box-25">Box 1</div>
			<div class="box box-75">Box 2</div>
		</div>
		<!-- MORE CONTAINERS ... -->
	</section>
</main>

Many Containers

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10
Box 11
Box 12
Box 13
Box 14
Box 15
Box 16
Box 17
Box 18
Box 19
Box 20
<main>
	<section>
		<div class="container">
			<div class="box">Box 1</div>
			<div class="box">Box 2</div>
			<div class="box">Box 3</div>
			<div class="box">Box 4</div>
			<div class="box">Box 5</div>
			<!-- MORE IN-LINE BOXES -->
		</div>
		<!-- MORE CONTAINERS ... -->
	</section>
</main>

Position

Directions

You can use both class="container" and class="box" to align their contents, simply add one of these classes to the container or box of your choice:


NOTE: In case you use container, the flex class is not needed


Left to Right (LtoR)

1
2
3
<div class="box flex ltor">
	<!-- YOUR CODE HERE --->
</div>

Right to Left (RtoL)

1
2
3
<div class="box flex rtol">
	<!-- YOUR CODE HERE --->
</div>

Top to Bottom (TtoB)

1
2
3
<div class="box flex ttob">
	<!-- YOUR CODE HERE --->
</div>

Bottom to Top (BtoT)

1
2
3
<div class="box flex btot">
	<!-- YOUR CODE HERE --->
</div>


Alignment

In the same way, we can also align the contents of a container or a box.


Left

1
2
3
<div class="box flex align-left">
	<!-- YOUR CODE HERE -->
</div>

Center

1
2
3
<div class="box flex align-center">
	<!-- YOUR CODE HERE -->
</div>

Right

1
2
3
<div class="box flex align-right">
	<!-- YOUR CODE HERE -->
</div>

Justified

1
2
3
<div class="box flex align-justified">
	<!-- YOUR CODE HERE -->
</div>


Floating

We can align floating content both within containers and within boxes by pointing to a specific position within the box.

They are called "floating" because to use this alignment method, the container must be larger than the element we want to move and if we add content, it will ignore the floating element, being able to be placed in front of or behind the floating element. If we create a container and there is no space to move the element, this method will not work as expected.


We will have 9 possible "floating" positions:


top-left
top-center
top-right
middle-left
middle-center
middle-right
bottom-left
bottom-center
bottom-right

<!-- It could be "CONTAINER" or "BOX" (and its variants) -->
<div class="container">
	<div class="floating top-left">top-left</div>
	<div class="floating top-center">top-center</div>
	<div class="floating top-right">top-right</div>
	<div class="floating middle-left">middle-left</div>
	<div class="floating middle-center">middle-center</div>
	<div class="floating middle-right">middle-right</div>
	<div class="floating bottom-left">bottom-left</div>
	<div class="floating bottom-center">bottom-center</div>
	<div class="floating bottom-right">bottom-right</div>
</div>

Colors

1

#161A25
rgb(22, 26, 37)
class="bg-solid-1"

2

#6FA9E7
rgb(111, 169, 231)
class="bg-solid-2"

3

#F3F0F0
rgb(243, 240, 240)
class="bg-solid-3"

4

#D9D9D9
rgb(217, 217, 217)
class="bg-solid-4"

5

#FFAC60
rgb(255, 172, 96)
class="bg-solid-5"

6

#FF7979
rgb(255, 121, 121)
class="bg-solid-6"

7

#2DC876
rgb(45, 200, 118)
class="bg-solid-7"

Typography

Nunito Sans

Light

Regular

Medium

Bold

Black


<p class="font-light">Light</p>
<p class="font-regular">Regular</p>
<p class="font-medium">Medium</p>
<p class="font-bold">Bold</p>
<p class="font-black">Black</p>

Texts

Headers & Paragraphs

H1

H2

H3

H4

H5
H6

Paragraph

Span (in-line text) 

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
<p>Paragraph</p>
<span>Span (in-line text)</span>

Styles

Text 1

Text 2

Text 3

Text 4

Text 5

Text 6

Text 7



<p class="text-1">Text 1</p>
<p class="text-2">Text 2</p>
<p class="text-3">Text 3</p>
<p class="text-4">Text 4</p>
<p class="text-5">Text 5</p>
<p class="text-6">Text 6</p>
<p class="text-7">Text 7</p>

Badges

Badge 1 Badge 2 Badge 3 Badge 4 Badge 5 Badge 6 Badge 7 

<span class="badge badge-1">Badge 1</span>
<span class="badge badge-2">Badge 2</span>
<span class="badge badge-3">Badge 3</span>
<span class="badge badge-4">Badge 4</span>
<span class="badge badge-5">Badge 5</span>
<span class="badge badge-6">Badge 6</span>
<span class="badge badge-7">Badge 7</span>

Buttons & Links

Styles


<button class="btn-1 btn-m">Button 1</button>
<button class="btn-2 btn-m">Button 2</button>
<button class="btn-3 btn-m">Button 3</button>
<button class="btn-4 btn-m">Button 4</button>
<button class="btn-5 btn-m">Button 5</button>
<button class="btn-6 btn-m">Button 6</button>
<button class="btn-7 btn-m">Button 7</button>
<button class="btn-link btn-m">Link</button>

Disabled


<button class="btn-1 btn-m disabled">Disabled Button 1</button>
<button class="btn-2 btn-m disabled">Disabled Button 2</button>
<button class="btn-3 btn-m disabled">Disabled Button 3</button>
<button class="btn-4 btn-m disabled">Disabled Button 4</button>
<button class="btn-5 btn-m disabled">Disabled Button 5</button>
<button class="btn-6 btn-m disabled">Disabled Button 6</button>
<button class="btn-7 btn-m disabled">Disabled Button 7</button>
<button class="btn-link btn-m disabled">Disabled Link Button</button>

Link 
<a href="#">Link</a>

Sizes


<button class="btn-2 btn-s">Button Small</button>
<button class="btn-2 btn-m">Button Medium</button>
<button class="btn-2 btn-l">Button Large</button>
<button class="btn-2 btn-xl">Button Extra Large</button>

Buttons with Icons


<button class="btn-2 btn-s"><i class="fa-solid fa-house"></i> Small</button>
<button class="btn-2 btn-m"><i class="fa-solid fa-house"></i> Medium</button>
<button class="btn-2 btn-l"><i class="fa-solid fa-house"></i> Large</button>
<button class="btn-2 btn-xl"><i class="fa-solid fa-house"></i> Extra Large</button>




<button class="btn-2 btn-s"><i class="fa-solid fa-house"></i></button>
<button class="btn-2 btn-m"><i class="fa-solid fa-house"></i></button>
<button class="btn-2 btn-l"><i class="fa-solid fa-house"></i></button>
<button class="btn-2 btn-xl"><i class="fa-solid fa-house"></i></button>

Button Groups


<div class="btn-group-h">
	<button class="btn-2 btn-m">Button Medium</button>
	<button class="btn-2 btn-m">Button Medium</button>
	<button class="btn-2 btn-m">Button Medium</button>
</div>



<div class="btn-group-v">
	<button class="btn-2 btn-m">Button Medium</button>
	<button class="btn-2 btn-m">Button Medium</button>
	<button class="btn-2 btn-m">Button Medium</button>
</div>

Images



<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="photo-1 photo-s">
<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="photo-2 photo-s">
<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="photo-1 photo-m">
<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="photo-2 photo-m">
<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="photo-1 photo-l">
<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="photo-2 photo-l">
<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="photo-1 photo-xl">
<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="photo-2 photo-xl">

Icons



<i class="fa-solid fa-house"></i>


See available icons here: Font Awesome

Spinners

1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


23


24


25


26


27


28


29


30


31


32


33


34


35


36


37


38


39


40


41


42


43


44


45


46


47


48


49


50


51


52


53


54


55


56


57


58


59


60


61


62


63


64


65


66


67


68


69


70


71


72


73


74


75


76


77


78


79


80


81


82


83


84


85


86


87


88


89


90


91


92


93


94


95


96


97


98


99


100


101


102


103


104


105


106


107


108


109


110




<div class="spinner">
	<span class="loader loader-1">Loading</span>
</div>


To use a specific spinner just replace the spinner number with the one you want and remove the text "Loading" if necesary

Lists

Basic Ordered

  1. Item
    1. Item
    2. Item
      1. Item
  2. Item
  3. Item

<old>
  <lid>Item
    <old>
      <lid>Item</lid>
      <lid>Item
        <old>
          <lid>Item</lid>
        </old>
      </lid>
    </old>
  </lid>
  <lid>Item</lid>
  <lid>Item</lid>
</old>

Basic Unordered

  • Item
    • Item
    • Item
      • Item
  • Item
  • Item

<ul>
  <li>Item
    <ul>
      <li>Item</li>
      <li>Item
        <ul>
          <li>Item</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item</li>
  <li>Item</li>
</ul>

Basic Detailed

Term
Item
Term
Item
SubTerm
Item

<dl>
  <dt>Term</dt>
  <dd>Item</dd>
  <dt>Term</dt>
  <dd>Item
    <dl>
      <dt>SubTerm</dt>
      <dd>Item</dd>
    </dl>
  </dd>
</dl>

Group List

  • Item
  • Item
  • Item
  • Item

<ul class="list-group">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Divided List

  • Item
  • Item
  • Item
  • Item

<ul class="list-divided list-center">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Tables

Basic Table

Header 1 Header 2 Header 3 Header 4 Header 5
Column 1.1 Column 1.2 Column 1.3 Column 1.4 Column 1.5
Column 2.1 Column 2.2 Column 2.3 Column 2.4 Column 2.5
Column 3.1 Column 3.2 Column 3.3 Column 3.4 Column 3.5
Column 4.1 Column 4.2 Column 4.3 Column 4.4 Column 4.5
Column 5.1 Column 5.2 Column 5.3 Column 5.4 Column 5.5
Column 6.1 Column 6.2 Column 6.3 Column 6.4 Column 6.5
Column 7.1 Column 7.2 Column 7.3 Column 7.4 Column 7.5
Column 8.1 Column 8.2 Column 8.3 Column 8.4 Column 8.5
Column 9.1 Column 9.2 Column 9.3 Column 9.4 Column 9.5
Column 10.1 Column 10.2 Column 10.3 Column 10.4 Column 10.5 

<table>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
			<th>Header 5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Column 1.1</td>
			<td>Column 1.2</td>
			<td>Column 1.3</td>
			<td>Column 1.4</td>
			<td>Column 1.5</td>
		</tr>
		<tr>
			<td>Column 2.1</td>
			<td>Column 2.2</td>
			<td>Column 2.3</td>
			<td>Column 2.4</td>
			<td>Column 2.5</td>
		</tr>
	</tbody>
</table>


Scrollable Table

Header 1 Header 2 Header 3 Header 4 Header 5
Column 1.1 Column 1.2 Column 1.3 Column 1.4 Column 1.5
Column 2.1 Column 2.2 Column 2.3 Column 2.4 Column 2.5
Column 3.1 Column 3.2 Column 3.3 Column 3.4 Column 3.5
Column 4.1 Column 4.2 Column 4.3 Column 4.4 Column 4.5
Column 5.1 Column 5.2 Column 5.3 Column 5.4 Column 5.5
Column 6.1 Column 6.2 Column 6.3 Column 6.4 Column 6.5
Column 7.1 Column 7.2 Column 7.3 Column 7.4 Column 7.5
Column 8.1 Column 8.2 Column 8.3 Column 8.4 Column 8.5
Column 9.1 Column 9.2 Column 9.3 Column 9.4 Column 9.5
Column 10.1 Column 10.2 Column 10.3 Column 10.4 Column 10.5 

<table class="scrollable">
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
			<th>Header 5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Column 1.1</td>
			<td>Column 1.2</td>
			<td>Column 1.3</td>
			<td>Column 1.4</td>
			<td>Column 1.5</td>
		</tr>
		<tr>
			<td>Column 2.1</td>
			<td>Column 2.2</td>
			<td>Column 2.3</td>
			<td>Column 2.4</td>
			<td>Column 2.5</td>
		</tr>
	</tbody>
</table>


Stripped Table

Header 1 Header 2 Header 3 Header 4 Header 5
Column 1.1 Column 1.2 Column 1.3 Column 1.4 Column 1.5
Column 2.1 Column 2.2 Column 2.3 Column 2.4 Column 2.5
Column 3.1 Column 3.2 Column 3.3 Column 3.4 Column 3.5
Column 4.1 Column 4.2 Column 4.3 Column 4.4 Column 4.5
Column 5.1 Column 5.2 Column 5.3 Column 5.4 Column 5.5
Column 6.1 Column 6.2 Column 6.3 Column 6.4 Column 6.5
Column 7.1 Column 7.2 Column 7.3 Column 7.4 Column 7.5
Column 8.1 Column 8.2 Column 8.3 Column 8.4 Column 8.5
Column 9.1 Column 9.2 Column 9.3 Column 9.4 Column 9.5
Column 10.1 Column 10.2 Column 10.3 Column 10.4 Column 10.5 

<table class="stripped">
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
			<th>Header 5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Column 1.1</td>
			<td>Column 1.2</td>
			<td>Column 1.3</td>
			<td>Column 1.4</td>
			<td>Column 1.5</td>
		</tr>
		<tr>
			<td>Column 2.1</td>
			<td>Column 2.2</td>
			<td>Column 2.3</td>
			<td>Column 2.4</td>
			<td>Column 2.5</td>
		</tr>
	</tbody>
</table>

Warnings

Popups

PopUps are messages that can be triggered by performing some action (such as pressing a button) or processing some functionality (finishing performing some method)


You can add whatever you want inside a popup (texts, forms, tables, buttons...). By default, in these examples we have added only a text, but you can replace it with whatever you want, just by adding your content inside the <div class="popup-container">. You can even add containers and boxes inside them and remember that you can make them appear in any position you want (see Floating Positions)


Container Based

Container-based popups will be positioned within containers, causing a message to appear in a specific area within a specific box.


PopUp Message
Box behind the popup, Box behind the popup, Box behind the popup, Box behind the popup
Box with content

<div class="popup">
	<div class="popup-content floating middle-center">
		<div>PopUp Message</div>
	</div>
</div>


Page Based

Page-based popups will be positioned over the entire screen. They are like general full-screen advertisements.


PopUp Message
Box behind the popup, Box behind the popup, Box behind the popup, Box behind the popup
Box with content

<div class="popup-screen">
	<div class="popup-content floating middle-center">
		<div>PopUp Message</div>
	</div>
</div>


Dismissable

...


PopUp Message

Box behind the popup, Box behind the popup, Box behind the popup, Box behind the popup
Box with content

<div class="popup">
	<div class="popup-content floating middle-center">
		<span class="popup-close"><i class="fa-solid fa-xmark"></i></span>
		<div class="popup-body">
			<p>PopUp Message</p>
		</div>
	</div>
</div>


Full Layout

...


Text

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, similique veniam rerum perferendis, placeat animi, dolor enim vitae ad. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos quis qui inventore adipisci reprehenderit nulla! Illo in unde ducimus velit odio officiis esse eligendi, officia aspernatur sint tenetur nam neque.


everything you want...

Box behind the popup, Box behind the popup, Box behind the popup, Box behind the popup
Box with content

<div class="popup">
	<div class="popup-content floating middle-center">
		<span class="popup-close"><i class="fa-solid fa-xmark"></i></span>
		<div class="popup-title">
			Text
		</div>
		<div class="popup-body">
			<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit...</p>
		</div>
		<div class="buttons-container box flex align-center">
			<div>
				<button class="btn-6 btn-m">Close</button>
			</div>
			<div>
				<button class="btn-7 btn-m">OK</button>
			</div>
		</div>
	</div>
</div>

Alerts

Basic

Basic Alert
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi praesentium accusantium
Info Alert
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi praesentium accusantium
Warning Alert
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi praesentium accusantium
Error Alert
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi praesentium accusantium
Success Alert
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi praesentium accusantium 

<!-- BASIC ALERT -->
<div class="alert">
	<div class="alert-icon">
		<i class="fa-solid fa-house"></i>
	</div>
	<div class="alert-title">
		Title
	</div>
	<div class="alert-body">
		Lorem ipsum dolor sit amet...
	</div>
</div>

<!-- INFO ALERT -->
<div class="alert alert-info">
	<div class="alert-icon">
		<i class="fa-solid fa-info"></i>
	</div>
	<div class="alert-title">
		Title
	</div>
	<div class="alert-body">
		Lorem ipsum dolor sit amet...
	</div>
</div>

<!-- WARNING ALERT -->
<div class="alert alert-warning">
	<div class="alert-icon">
		<i class="fa-solid fa-bullhorn"></i>
	</div>
	<div class="alert-title">
		Title
	</div>
	<div class="alert-body">
		Lorem ipsum dolor sit amet...
	</div>
</div>

<!-- ERROR ALERT -->
<div class="alert alert-error">
	<div class="alert-icon">
		<i class="fa-solid fa-triangle-exclamation"></i>
	</div>
	<div class="alert-title">
		Title
	</div>
	<div class="alert-body">
		Lorem ipsum dolor sit amet...
	</div>
</div>

<!-- SUCCESS ALERT -->
<div class="alert alert-success">
	<div class="alert-icon">
		<i class="fa-solid fa-check"></i>
	</div>
	<div class="alert-title">
		Title
	</div>
	<div class="alert-body">
		Lorem ipsum dolor sit amet...
	</div>
</div>


Outline

Outline Alert
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi praesentium accusantium 

<div class="alert-outline">
	<div class="alert-title">
		<i class="fa-solid fa-house"></i> Outline Alert
	</div>
	<div class="alert-body">
		<i class="fa-solid fa-house"></i> Lorem ipsum dolor sit amet...
	</div>
</div>


Chips

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet


<!-- BASIC CHIP -->
<div class="chip">
	<div class="chip-circle">
		<i class="fa-solid fa-house"></i>
	</div>
	<div class="chip-body">
		<p>Lorem ipsum dolor sit amet</p>
	</div>
</div>

<!-- INFO CHIP -->
<div class="chip chip-info">
	<div class="chip-circle">
		<i class="fa-solid fa-info"></i>
	</div>
	<div class="chip-body">
		<p>Lorem ipsum dolor sit amet</p>
	</div>
</div>

<!-- WARNING CHIP -->
<div class="chip chip-warning">
	<div class="chip-circle">
		<i class="fa-solid fa-bullhorn"></i>
	</div>
	<div class="chip-body">
		<p>Lorem ipsum dolor sit amet</p>
	</div>
</div>

<!-- ERROR CHIP -->
<div class="chip chip-error">
	<div class="chip-circle">
		<i class="fa-solid fa-triangle-exclamation"></i>
	</div>
	<div class="chip-body">
		<p>Lorem ipsum dolor sit amet</p>
	</div>
</div>

<!-- SUCCESS CHIP -->
<div class="chip chip-success">
	<div class="chip-circle">
		<i class="fa-solid fa-check"></i>
	</div>
	<div class="chip-body">
		<p>Lorem ipsum dolor sit amet</p>
	</div>
</div>

Tooltips

Hover over me

Tooltip text 

<div class="tooltip">
 	<p>Hover over me</p>
	<span class="tooltip-content"><i class="fa-solid fa-house"></i> Tooltip text</span>
</div>

Cards (WIP)

Basic

Card

Subtitle

Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, et molestiae culpa, rem facere vitae, quidem ab incidunt magni eveniet provident. Possimus adipisci voluptatum earum qui harum, eum! Officiis, molestias!


<div class="card">
	<div class="card-body">
		<h3>Cardd</h3>
		<h5>Subtitled</h5>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit...</p>
	</div>
</div>

With Buttons/Links

Card

Subtitle

Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, et molestiae culpa, rem facere vitae, quidem ab incidunt magni eveniet provident. Possimus adipisci voluptatum earum qui harum, eum! Officiis, molestias!


<div class="card">
	<div class="card-body">
		<h3>Card</h3>
		<h5>Subtitle</h5>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, et molestiae culpa, rem facere vitae, quidem ab incidunt magni eveniet provident. Possimus adipisci voluptatum earum qui harum, eum! Officiis, molestias!</p>
		<div class="buttons-container">
			<div>
				<button class="btn-2 btn-m">Button 1</button>
				<button class="btn-link btn-m">Link 1</button>
			</div>
			<div>
				<button class="btn-2 btn-m">Button 2</button>
				<button class="btn-link btn-m">Link 2</button>
			</div>
			<div>
				<button class="btn-2 btn-m">Button 3</button>
				<button class="btn-link btn-m">Link 3</button>
			</div>
		</div>
	</div>
</div>

With Image

Card

Subtitle

<div class="card">
	<div class="card-header">
		<img src="https://ui.elastacloud.ai/assets/rsc/img/bg-image.png" class="card-img">
	</div>
	<div class="card-body">
		<h3>Card</h3>
		<h5>Subtitle</h5>
	</div>
</div>

With Title, Header, Body and Footer

Card Title

Card

Subtitle
Card Footer 

<div class="card"d>
	<div class="card-title"d>
		Card Title
	</divd>
	<div class="card-header"d>
		<img src="https://ui.elastacloud.ai/assets/rsc/img/bg-image.png" class="card-img"d>
	</divd>
	<div class="card-body"d>
		<h3d>Card</h3d>
		<h5d>Subtitle</h5d>
	</divd>
	<div class="card-footer"d>
		Card Footer
	</divd>
</divd>

Feedback Card

Text

Title

Subtitle

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores eius, fuga quas praesentium rem dolorum voluptates! Asperiores ducimus numquam illo totam saepe quam quas! Ab provident, eveniet? Ducimus, neque, ab?

Badge 1 Badge 2 Badge 3

Title

Subtitle

<div class="card">
	<div class="box flex ltor floating top-right">
		<p class="text-1 font-bold">Text</p>
		<button class="btn-2 btn-l"><i class="fa-solid fa-house"></i></button>
	</div>
	<div class="card-body">
		<div class="card-info">
			<img src="https://ui.elastacloud.ai/assets/rsc/img/user-example-image.jpg" class="photo-1 photo-m">
			<div>
				<h3>Title</h3>
				<h5 class="text-4">Subtitle</h5>
			</div>
		</div>
		<h3>Title</h3>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
		<div class="tags-container">
			<span class="badge badge-1">Badge 1</span>
			<span class="badge badge-1">Badge 2</span>
			<span class="badge badge-2">Badge 3</span>
		</div>
		<div class="card-hightlight">
			<h3>Title</h3>
			<h5 class="text-4">Subtitle</h5>
		</div>
		<div class="buttons-container">
			<div>
				<button class="btn-2 btn-m">Button 1</button>
			</div>
			<div>
				<button class="btn-2 btn-m">Button 2</button>
			</div>
			<div>
				<button class="btn-2 btn-m">Button 3</button>
			</div>
		</div>
	</div>
</div>

Panel Card



Title

  • Item 1
  • Item 2
  • Item 3
  • Item 4

<div class="card panel">
	<div class="card-title bg-solid-1">
		<i class="fa-solid fa-house fa-3x"></i>
		<br><br>
		<h3>Title</h3>
	</div>
	<div class="card-body">
		<ul class="list-divided list-center">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</div>
</div>

Forms (WIP)

Default Input



<input type="text" name="test" id="test" value="" placeholder="Type something...">


Input with Icon


<div class="input-group-icon">
	<i class="fa-solid fa-house"></i>
	<input type="text" name="test" id="test" value="" placeholder="Type something...">
</div>



<div class="input-group-icon">
	<input type="text" name="test" id="test" value="" placeholder="Type something...">
	<i class="fa-solid fa-house"></i>
</div>


Input with Icon and Buttons


<div class="input-group-icon">
	<i class="fa-solid fa-house"></i>
	<input type="text" name="test" id="test" value="" placeholder="Type something...">
	<button class="btn-2 btn-m">Button</button>
</div>


Textarea


<textarea name="test" id="test" placeholder="Type something..."></textarea>


Textarea (Auto Height)


<textarea class="autoheight" name="test" id="test" placeholder="Type something..." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>


Password



<input type="password" name="test" id="test" value="" placeholder="Type something...">


Dropdown


<select name="test">
	<option value="">-- Options</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
</select>


Datalist


<input list="listTest" type="text" name="test" id="test" value="" placeholder="Type something...">
<datalist id="listTest">
	<option value="Option 1">Option 1</option>
	<option value="Option 2">Option 2</option>
	<option value="Option 3">Option 3</option>
</datalist>


Date


<input type="date" name="test" id="test" value="">


Time


<input type="time" name="test" id="test" value="">


Range


<input type="range" name="test" id="test" value="">


Progress

20%
20%
20%

<div class="progress progress-s">
  <div id="test" class="progress-inner" style="width: 20%;">20%</div>
</div>
<div class="progress progress-m">
  <div id="test" class="progress-inner" style="width: 20%;">20%</div>
</div>
<div class="progress progress-l">
  <div id="test" class="progress-inner" style="width: 20%;">20%</div>
</div>


Switches


<div class="switch">
    <label>
	    <input type="radio" name="toggle" checked="checked">
	    <div class="switch-content"><i class="fa-solid fa-house"></i> OPTION 1</div>
	</label>
    <label>
	    <input type="radio" name="toggle">
	    <div class="switch-content"><i class="fa-solid fa-house"></i> OPTION 2</div>
	</label>
    <label>
	    <input type="radio" name="toggle">
	    <div class="switch-content"><i class="fa-solid fa-house"></i> OPTION 3</div>
	</label>
</div>


WYSIWYG - Text Editor


<!-- CSS DEPENDENCIES (inside your <head> tag) -->
<link href="https://ui.elastacloud.ai/vendor/suneditor/css/suneditor.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://ui.elastacloud.ai/vendor/suneditor/css/codemirror.min.css">
<link rel="stylesheet" href="https://ui.elastacloud.ai/vendor/suneditor/css/katex.min.css">

<!-- EDITOR (inside tour <body> tag) -->
<textarea id="editor"></textarea>

<!-- JS DEPENDENCIES (just before your </body> tag) -->
<script src="https://ui.elastacloud.ai/vendor/suneditor/js/suneditor.min.js"></script>
<script src="https://ui.elastacloud.ai/vendor/suneditor/js/codemirror.min.js"></script>
<script src="https://ui.elastacloud.ai/vendor/suneditor/js/htmlmixed.js"></script>
<script src="https://ui.elastacloud.ai/vendor/suneditor/js/xml.js"></script>
<script src="https://ui.elastacloud.ai/vendor/suneditor/js/css.js"></script>
<script src="https://ui.elastacloud.ai/vendor/suneditor/js/katex.min.js"></script>
<script>
    const editorInstance = SUNEDITOR.create('editor', {
        display: 'block',
        width: '100%',
        height: 'auto',
        popupDisplay: 'full',
        charCounter: true,
        charCounterLabel: 'Characters :',
        imageGalleryUrl: 'https://etyswjpn79.execute-api.ap-northeast-1.amazonaws.com/suneditor-demo',
        buttonList: [
            // default
            ['undo', 'redo'],
            ['font', 'fontSize', 'formatBlock'],
            ['paragraphStyle', 'blockquote'],
            ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
            ['fontColor', 'hiliteColor', 'textStyle'],
            ['removeFormat'],
            ['outdent', 'indent'],
            ['align', 'horizontalRule', 'list', 'lineHeight'],
            ['table', 'link', 'image', 'video', 'audio', 'math'],
            ['imageGallery'],
            ['fullScreen', 'showBlocks', 'codeView'],
            ['preview', 'print'],
            ['save', 'template'],
            // (min-width: 1546)
            ['%1546', [
                ['undo', 'redo'],
                ['font', 'fontSize', 'formatBlock'],
                ['paragraphStyle', 'blockquote'],
                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
                ['fontColor', 'hiliteColor', 'textStyle'],
                ['removeFormat'],
                ['outdent', 'indent'],
                ['align', 'horizontalRule', 'list', 'lineHeight'],
                ['table', 'link', 'image', 'video', 'audio', 'math'],
                ['imageGallery'],
                ['fullScreen', 'showBlocks', 'codeView'],
                ['-right', ':i-More Misc-default.more_vertical', 'preview', 'print', 'save', 'template']
            ]],
            // (min-width: 1455)
            ['%1455', [
                ['undo', 'redo'],
                ['font', 'fontSize', 'formatBlock'],
                ['paragraphStyle', 'blockquote'],
                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
                ['fontColor', 'hiliteColor', 'textStyle'],
                ['removeFormat'],
                ['outdent', 'indent'],
                ['align', 'horizontalRule', 'list', 'lineHeight'],
                ['table', 'link', 'image', 'video', 'audio', 'math'],
                ['imageGallery'],
                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template']
            ]],
            // (min-width: 1326)
            ['%1326', [
                ['undo', 'redo'],
                ['font', 'fontSize', 'formatBlock'],
                ['paragraphStyle', 'blockquote'],
                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
                ['fontColor', 'hiliteColor', 'textStyle'],
                ['removeFormat'],
                ['outdent', 'indent'],
                ['align', 'horizontalRule', 'list', 'lineHeight'],
                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template'],
                ['-right', ':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery']
            ]],
            // (min-width: 1123)
            ['%1123', [
                ['undo', 'redo'],
                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
                ['fontColor', 'hiliteColor', 'textStyle'],
                ['removeFormat'],
                ['outdent', 'indent'],
                ['align', 'horizontalRule', 'list', 'lineHeight'],
                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template'],
                ['-right', ':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery']
            ]],
            // (min-width: 817)
            ['%817', [
                ['undo', 'redo'],
                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                ['bold', 'underline', 'italic', 'strike'],
                [':t-More Text-default.more_text', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
                ['removeFormat'],
                ['outdent', 'indent'],
                ['align', 'horizontalRule', 'list', 'lineHeight'],
                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template'],
                ['-right', ':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery']
            ]],
            // (min-width: 673)
            ['%673', [
                ['undo', 'redo'],
                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
                ['removeFormat'],
                ['outdent', 'indent'],
                ['align', 'horizontalRule', 'list', 'lineHeight'],
                [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery'],
                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template']
            ]],
            // (min-width: 525)
            ['%525', [
                ['undo', 'redo'],
                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
                ['removeFormat'],
                ['outdent', 'indent'],
                [':e-More Line-default.more_horizontal', 'align', 'horizontalRule', 'list', 'lineHeight'],
                [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery'],
                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template']
            ]],
            // (min-width: 420)
            ['%420', [
                ['undo', 'redo'],
                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle', 'removeFormat'],
                [':e-More Line-default.more_horizontal', 'outdent', 'indent', 'align', 'horizontalRule', 'list', 'lineHeight'],
                [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery'],
                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template']
            ]]
        ],
        placeholder: 'Start typing something...',
        templates: [
            {
                name: 'Template-1',
                html: '<p>HTML source1</p>'
            },
            {
                name: 'Template-2',
                html: '<p>HTML source2</p>'
            }
        ],
        codeMirror: CodeMirror,
        katex: katex
    });

</script>