Difference between revisions of "UL, OL, and LI Elements"

From Level Access Web Labs
Jump to navigation Jump to search
Line 33: Line 33:
 
<li>Test</li>
 
<li>Test</li>
 
</ol>
 
</ol>
 
<h1>Jason test</h1>
 
<ul><li data-page-name="user" class="onboarding-page-container active">
 
 
<div class="onboarding-page onboarding-page-user"><div class="onboarding-page-header">Welcome to Insightics℠</div>
 
<div class="onboarding-page-subheader">Let's make sure we have your information up to date.</div>
 
 
<table cellspacing="0" cellpadding="0" class="onboarding-user-table onboarding-user-table-1"><tbody>
 
  <tr><td>
 
    <table cellspacing="0" cellpadding="0" class="onboarding-user-table onboarding-user-table-2"><tbody>
 
      <tr>
 
 
 
       
 
        <td data-cell-name="user-full-name" class=""><div class="onboarding-user-cell-container"><div class="onboarding-user-cell-name">Full name</div>
 
<div class="onboarding-user-cell-value">
 
  <input type="text" value="" name="user-full-name" maxlength="100">
 
  <div class="onboarding-user-cell-value-error ss-icon">delete</div>
 
</div></div></td>
 
 
 
       
 
        <td data-cell-name="merchant-name"><div class="onboarding-user-cell-container"><div class="onboarding-user-cell-name">Business name</div>
 
<div class="onboarding-user-cell-value">
 
  <input type="text" value="BRL GROCERY OUTLET" name="merchant-name" maxlength="100">
 
  <div class="onboarding-user-cell-value-error ss-icon">delete</div>
 
</div></div></td>
 
 
 
      </tr>
 
    </tbody></table>
 
  </td></tr>
 
  <tr><td>
 
    <table cellspacing="0" cellpadding="0" class="onboarding-user-table onboarding-user-table-3"><tbody>
 
      <tr>
 
 
 
       
 
        <td>
 
          <div class="onboarding-user-logo-container">
 
            <div class="onboarding-user-logo-button-container">
 
              <div class="onboarding-user-logo-button">
 
                <div class="onboarding-user-logo-button-logo ss-icon">globe</div>
 
                <div class="onboarding-user-logo-button-text">Click to change</div>
 
              </div>
 
            </div>
 
          </div>
 
        </td>
 
 
 
        <td>
 
          <table cellspacing="0" cellpadding="0" class="onboarding-user-table onboarding-user-table-4"><tbody>
 
            <tr>
 
 
 
             
 
              <td data-cell-name="email" class="readonly"><div class="onboarding-user-cell-container"><div class="onboarding-user-cell-name">Email address</div>
 
<div class="onboarding-user-cell-value">
 
  <input type="email" value="MTEST@SSBBARTGROUP.COM" name="email" readonly="readonly">
 
  <div class="onboarding-user-cell-value-error ss-icon">delete</div>
 
</div></div></td>
 
 
 
            </tr>
 
            <tr>
 
              <td>
 
                <table cellspacing="0" cellpadding="0" class="onboarding-user-table onboarding-user-table-5"><tbody>
 
                  <tr>
 
 
 
                   
 
                    <td data-cell-name="is-remote-user"><div class="onboarding-user-cell-container"><div class="onboarding-user-cell-name">Are you at your business 4 or more days a week?</div>
 
<div class="onboarding-user-cell-value">
 
  <table class="onboarding-user-cell-radio-table"><tbody><tr>
 
    <td>
 
      <div data-radio-value="false" class="onboarding-user-cell-radio-container">
 
        <div class="onboarding-user-cell-radio-button">
 
          <img src="/assets/ui/app/css/img/radio-active.png" class="onboarding-user-cell-radio-button-active">
 
          <img src="/assets/ui/app/css/img/radio.png" class="onboarding-user-cell-radio-button-inactive">
 
        </div>
 
        <div class="onboarding-user-cell-radio-label">Yes. I work in-store.</div>
 
      </div>
 
    </td>
 
    <td>
 
      <div data-radio-value="true" class="onboarding-user-cell-radio-container">
 
        <div class="onboarding-user-cell-radio-button">
 
          <img src="/assets/ui/app/css/img/radio-active.png" class="onboarding-user-cell-radio-button-active">
 
          <img src="/assets/ui/app/css/img/radio.png" class="onboarding-user-cell-radio-button-inactive">
 
        </div>
 
        <div class="onboarding-user-cell-radio-label">No. I work remotely.</div>
 
      </div>
 
    </td>
 
  </tr></tbody></table>
 
</div></div></td>
 
 
 
 
 
                  </tr>
 
                </tbody></table>
 
              </td>
 
            </tr>
 
          </tbody></table>
 
        </td>
 
      </tr>
 
    </tbody></table>
 
  </td></tr>
 
</tbody></table></div></li><li data-page-name="business" class="onboarding-page-container"><div class="onboarding-page onboarding-page-business"><div class="onboarding-page-subheader">
 
  Tell us a little about your business, and we'll tell you what's happening in your market.
 
</div>
 
 
<div class="onboarding-page-header">
 
  <span class="onboarding-business-header-name"></span>
 
  is a
 
  <span class="onboarding-business-header-category empty">
 
    <div class="onboarding-business-header-category-text"></div>
 
  </span>
 
  business.
 
</div>
 
 
<table class="onboarding-business-table"><tbody><tr>
 
 
 
 
  <td class="onboarding-business-td">
 
    <table class="onboarding-business-td-table"><tbody><tr>
 
      <td class="onboarding-business-td-table-td">Price:</td>
 
      <td class="onboarding-business-td-table-td">
 
        <div class="onboarding-business-price-options-container"><div><div class="business-price-options-wrapper"><div><div class="business-price-options"><div class="business-price-option active" data-price-index="0">
 
  <div class="business-price-option-symbol">$</div>
 
  <div class="business-price-option-description" style="margin-left: 0px;">
 
    <div class="business-price-option-description-text">inexpensive</div>
 
    <div class="business-price-option-description-arrow business-price-option-description-arrow-border"></div>
 
    <div class="business-price-option-description-arrow"></div>
 
  </div>
 
</div><div class="business-price-option active" data-price-index="1">
 
  <div class="business-price-option-symbol">$</div>
 
  <div class="business-price-option-description" style="margin-left: 0px;">
 
    <div class="business-price-option-description-text">moderate</div>
 
    <div class="business-price-option-description-arrow business-price-option-description-arrow-border"></div>
 
    <div class="business-price-option-description-arrow"></div>
 
  </div>
 
</div><div class="business-price-option" data-price-index="2">
 
  <div class="business-price-option-symbol">$</div>
 
  <div class="business-price-option-description" style="margin-left: 0px;">
 
    <div class="business-price-option-description-text">expensive</div>
 
    <div class="business-price-option-description-arrow business-price-option-description-arrow-border"></div>
 
    <div class="business-price-option-description-arrow"></div>
 
  </div>
 
</div><div class="business-price-option" data-price-index="3">
 
  <div class="business-price-option-symbol">$</div>
 
  <div class="business-price-option-description" style="margin-left: 0px;">
 
    <div class="business-price-option-description-text">very expensive</div>
 
    <div class="business-price-option-description-arrow business-price-option-description-arrow-border"></div>
 
    <div class="business-price-option-description-arrow"></div>
 
  </div>
 
</div></div></div></div></div></div>
 
      </td>
 
    </tr></tbody></table>
 
  </td>
 
 
</tr></tbody></table></div>
 
 
</li></ul>
 
 
 
<div class="onboarding-content-notification">
 
  <div class="onboarding-content-notification-message"></div>
 
</div></div></div>
 
    </div>
 
  </div>
 
 
 
 
</html>
 
</html>
  

Revision as of 16:10, 23 October 2014

Unordered List

  • Web Accessibility
  • PDF Accessibility
  • Mobile Accessibility

Ordered List

  1. Design
  2. Develop
  3. Test

Ordered List (reversed)

  1. Design
  2. Develop
  3. Test

Ordered List (with start number)

  1. Design
  2. Develop
  3. Test

Ordered List (with value number)

  1. Design
  2. Develop
  3. Test