Product Name

List with tags input

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

Subscribed Lists (with allowAdditions on)

Angular
Ruby
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.

Residential Address

FIRST NAME

Alexis

EMAIL ADDRESS

JPrime@Gmail.com

INDUSTRY

IT

MIDDLE NAME

Kerry

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">IT</div>
    </div>
  </div>
  <div class="item">
    <div class="content">
      <p class="header">MIDDLE NAME</p>
      <div class="description">Kerry</div>
    </div>
    <div class="content">
      <p class="header">LAST NAME</p>
      <div class="description">Ohanian</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