Product Name

List with tags input

Use attribute selected on option tag to make it visible from begining

Subscribed Lists (with allowAdditions on)

Show Code 
<div class="ui list tags grid">
  <div class="two column row">
    <div class="ten wide column">
      <ul>
        <li>
          <a href="#" class="text bold">Test Email List</a>
          <span class="text green">Subscribed</span>
        </li>
        <li>
          <a href="#" class="text bold">Test Email List</a>
          <span class="text green">Subscribed</span>
        </li>
        <li>
          <a href="#" class="text bold">Test Email List</a>
          <span class="text green">Subscribed</span>
        </li>
      </ul>
    </div>

    <div class="cf-tag-selector six wide column">
      <select multiple="" class="ui search tiny fluid dropdown">
        <option value='angular' selected>Angular</option>
        <option value='css'>CSS</option>
        <option value='design' selected>Graphic Design</option>
        <option value='ember' selected>Ember</option>
        <option value='html'>HTML</option>
        <option value='ia'>Information Architecture</option>
      </select>
      <button class="ui secondary small custom fluid button">
        Save Changes
      </button>
    </div>
  </div>
</div>

<script type="text/javascript">

  $('.cf-tag-selector .ui.dropdown').cfTagSelector({

    inputMessage: 'Add tags...',
  })
</script>

Subscribed Lists (Using API url)

Show Code 
<div class="ui list tags grid">
  <div class="two column row">
    <div class="ten wide column">
      <ul>
        <li>
          <a href="#" class="text bold">Test Email List</a>
          <span class="text green">Subscribed</span>
        </li>
        <li>
          <a href="#" class="text bold">Test Email List</a>
          <span class="text green">Subscribed</span>
        </li>
        <li>
          <a href="#" class="text bold">Test Email List</a>
          <span class="text green">Subscribed</span>
        </li>
      </ul>
    </div>

    <div class="cf-tag-selector six wide column">
      <select multiple="" class="ui search tiny fluid dropdown"></select>
      <button class="ui secondary small custom fluid button">
        Save Changes
      </button>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.cf-tag-selector .ui.dropdown').cfTagSelector({
    inputMessage: 'Choose Animal',
    url: '//api.semantic-ui.com/tags/{query}'
  })
</script>

Simple List

Simple list can have any number of columns in one line. You can use header with a tag. There is an .ellipsed class for use with .description which will make text ellipsis if it's too long.

You can use img tag instead of .desription

You can use .icon inside .desription. If icon's color is not specified it will be gray by default

If you have more than 2 columns (.content) in row (.item) and you want one of them to become half of the size of row add .half class to .content

Residential Address

FIRST NAME

Alexis

EMAIL ADDRESS

JPrime@Gmail.com

INDUSTRY

IT

Service

image alt

LAST NAME

Ohanian

NICKNAME

AGE

35

GENDER

Male

PHONE NUMBER

404 860 0106

Show Code 
<h3>Residential Address</h3>
<div class="ui list striped simple">
  <div class="item">
    <div class="content">
      <p class="header">FIRST NAME</p>
      <div class="description">Alexis</div>
    </div> 
  </div>
  <div class="item">
    <div class="content">
      <p class="header">EMAIL ADDRESS</p>
      <div class="description">JPrime@Gmail.com</div>
    </div>
  </div>
  <div class="item">
    <div class="content">
      <p class="header">INDUSTRY</p>
      <div class="description"><i class="ship icon"></i> IT</div>
    </div>
  </div>
  <div class="item">
    <div class="content">
      <p class="header">Service</p>
      <img src="image.png" alt="image alt">
    </div>
    <div class="content">
      <p class="header">LAST NAME</p>
      <div class="description"><i class="check circle green icon"></i> Ohanian</div>
    </div>
  </div>
  <div class="item">
    <div class="content half">
      <p class="header">NICKNAME</p>
      <div class="description"></div>
    </div>
    <div class="content">
      <p class="header">AGE</p>
      <div class="description">35</div>
    </div>
    <div class="content">
      <p class="header">GENDER</p>
      <div class="description">Male</div>
    </div>
    <div class="content">
      <p class="header">PHONE NUMBER</p>
      <div class="description">404 860 0106</div>
    </div>
  </div>
</div>

Simple List ( QA )

Use nested .content-s to get example below

Q&A

CLICKSURVEY QUERSTION 11

Alexis

ANSWER

Yes. Of course.

Question 27177 XHsj3

Why do you want to be the best in the industry?

ANSWER

I need it all. I’m a working class father who’s been struggling with keeping my family financially satisfied. This is my last shot at getting my shit together and actually getting somewhere.
Show Code 
<div class="ui list striped simple">
  <div class="item">
    <div class="content">
      <p class="header">CLICKSURVEY QUERSTION 11</p>
      <div class="description">
        Alexis
        <div class="content">
          <p class="header">
            ANSWER
          </p>
          <div class="description">
            Yes. Of course.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="content">
      <p class="header">Question 27177 XHsj3</p>
      <div class="description">
        Why do you want to be the best in the industry?
        <div class="content">
          <p class="header">
            ANSWER
          </p>
          <div class="description">
            Some random answer to random question
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

List with images

List works with images, icons and clickfunnel icons

Lead Developer

DEVMODO
2017-Present

Developer

ClickFunnels
2014-2017

Developer Intern

Lead Pages
2014-2014