Stevie Feliciano
Cancellation Funnel
LUMEN
Menu
Product Name
Quick Search
<div class="ui cf-quick-search input">
<div class="ui left icon dark blue input">
<input autocomplete="off" class="cf-quick-search-input prompt" id="quick_search" name="query" placeholder="Search for Funnels, Contacts and more...">
<div class="cf-quick-search-clear">
<i class="times circle icon"></i>
</div>
<i class="search icon left blue"></i>
</div>
<div class="results">
<h5 class="title gray text tiny bold">FUNNELS</h5>
<div class="ui funnel items">
<a href="#" class="item funnel">
<div class="ui image">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui avatar image">
</div>
<div class="content">
<p class="header">Stevie <mark>Feliciano</mark></p>
<div class="description">
<p>Cancellation Funnel</p>
</div>
</div>
</a>
<a href="#" class="item funnel">
<div class="ui image">
<i class="circular user alternate inverted blue icon"></i>
</div>
<div class="content">
<p class="header">Veronika Ossi</p>
<div class="description">
<p>Cancellation Funnel</p>
</div>
</div>
</a>
</div>
<h5 class="title gray text tiny bold">FOLLOW-UP FUNNELS</h5>
<div class="ui funnel items">
<a href="#" class="item funnel">
<div class="ui image">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui avatar image">
</div>
<div class="content">
<p class="header">Stevie Feliciano</p>
<div class="description">
<p>Cancellation <mark>Funnel</mark></p>
</div>
</div>
</a>
<a href="#" class="item funnel">
<div class="ui image">
<i class="circular user alternate inverted blue icon"></i>
</div>
<div class="content">
<p class="header">Veronika Ossi</p>
<div class="description">
<p>Cancellation Funnel</p>
</div>
</div>
</a>
</div>
<h5 class="title gray text tiny bold">PRODUCTS</h5>
<div class="ui funnel items">
<a href="#" class="item funnel">
<div class="ui image">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui avatar image">
</div>
<div class="content">
<p class="header">Stevie Feliciano</p>
<div class="description">
<p>Cancellation Funnel</p>
</div>
</div>
</a>
<a href="#" class="item funnel">
<div class="ui image">
<i class="circular user alternate inverted blue icon"></i>
</div>
<div class="content">
<p class="header">Veronika Ossi</p>
<div class="description">
<p>Cancellation Funnel</p>
</div>
</div>
</a>
</div>
</div>
</div>Quick Search Loading
Loading
<div class="ui cf-quick-search input">
<div class="ui left icon dark blue input">
<input autocomplete="off" class="cf-quick-search-input prompt" id="quick_search" name="query" placeholder="Search for Funnels, Contacts and more...">
<div class="cf-quick-search-clear">
<i class="times circle icon"></i>
</div>
<i class="search icon left blue"></i>
</div>
<div class="results">
<div class="ui active inverted dimmer">
<div class="ui text loader">Loading</div>
</div>
</div>
</div>Static Simple
Searching
<div class="ui left action search input">
<div class="ui dropdown floating button">
<span class="text">All</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">All</span>
</div>
<div class="item">
<span class="text">Option 1</span>
</div>
<div class="item">
<span class="text">Option 2</span>
</div>
</div>
</div>
<div class="ui left icon input">
<input type="text" placeholder="Search..." value="Hero Funnel">
<i class="search link icon"></i>
</div>
</div>Search Results
Text Search
Funnels Search
Select Country
Show Code
<div class="ui left action search input fluid">
<div class="ui dropdown floating button">
<span class="text">All</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">All</span>
</div>
<div class="item">
<span class="text">Option 1</span>
</div>
<div class="item">
<span class="text">Option 2</span>
</div>
</div>
</div>
<div class="ui left icon input search selection dropdown fluid">
<input type="hidden" name="country">
<div class="default text">Select Country</div>
<i class="filter icon"></i>
<div class="menu">
<div class="item" data-value="af">Afghanistan</div>
<div class="item" data-value="ax">Aland Islands</div>
<div class="item" data-value="al">Albania</div>
<div class="item" data-value="dz">Algeria</div>
<div class="item" data-value="as">American Samoa</div>
<div class="item" data-value="ad">Andorra</div>
<div class="item" data-value="ao">Angola</div>
<div class="item" data-value="ai">Anguilla</div>
<div class="item" data-value="ag">Antigua</div>
<div class="item" data-value="ar">Argentina</div>
<div class="item" data-value="am">Armenia</div>
<div class="item" data-value="aw">Aruba</div>
<div class="item" data-value="au">Australia</div>
<div class="item" data-value="at">Austria</div>
<div class="item" data-value="bs">Bahamas</div>
<div class="item" data-value="bh">Bahrain</div>
<div class="item" data-value="bd">Bangladesh</div>
<div class="item" data-value="bb">Barbados</div>
</div>
</div>
</div>
Funnel Search
Funnels Search
Select Country
Option Name
voluptatem quis 2017-07-07
Funnel Name
voluptatem quis 2017-07-07
Funnel Name
voluptatem quis 2017-07-07
Funnel Name
voluptatem quis 2017-07-07
Show Code
<div class="ui left action search input fluid">
<div class="ui dropdown floating button">
<span class="text">All</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">All</span>
</div>
<div class="item">
<span class="text">Option 1</span>
</div>
<div class="item">
<span class="text">Option 2</span>
</div>
</div>
</div>
<div class="ui left icon input search selection dropdown fluid">
<input type="hidden" name="country">
<div class="default text">Select Country</div>
<i class="filter icon"></i>
<div class="menu">
<div class="item" data-value="af">
<div class="ui horizontal list">
<div class="funnel item medium">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui avatar image">
<div class="content">
<a href="#">Option Name</a>
<div class="ui sub header">
<p class="grey text small">voluptatem quis 2017-07-07</p>
</div>
</div>
</div>
</div>
</div>
<div class="item" data-value="af">
<div class="ui horizontal list">
<div class="funnel item medium">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui avatar image">
<div class="content">
<a href="#">Funnel Name</a>
<div class="ui sub header">
<p class="grey text small">voluptatem quis 2017-07-07</p>
</div>
</div>
</div>
</div>
</div>
<div class="item" data-value="af">
<div class="ui horizontal list">
<div class="funnel item medium">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui avatar image">
<div class="content">
<a href="#">Funnel Name</a>
<div class="ui sub header">
<p class="grey text small">voluptatem quis 2017-07-07</p>
</div>
</div>
</div>
</div>
</div>
<div class="item" data-value="af">
<div class="ui horizontal list">
<div class="funnel item medium">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui avatar image">
<div class="content">
<a href="#">Funnel Name</a>
<div class="ui sub header">
<p class="grey text small">voluptatem quis 2017-07-07</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Blue Input
Static
Typing
Searching
Disabled
Show Code
<div class="ui left blue fluid small input">
<input type="text" placeholder="Search...">
</div>
Dark Blue Input
Static
Searching
Show Code
<div class="ui left icon dark blue input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
Regular Input
Static
Hints can be both <p> tags
Disabled
Or the previous
<div> tagsError
Subtext under the label
Success
Subtext under the label
Show Code
<div class="ui basic input">
<input type="text" id="input1" placeholder="Search...">
</div>