Top

Layouts

×
Catalog ol,ul,li dl,dt,dd

Use any of the available classes of Base Stylesheets to quickly create a custom style.

(1) <ol>、<ul>、<li>

Icon HTML Code
<ul class="dsure-list-li dsure-list-img1">...</ul>
<ul class="dsure-list-li dsure-list-img2">...</ul>
<ul class="dsure-list-li dsure-list-img3">...</ul>
<ul class="dsure-list-li dsure-list-img4">...</ul>
<ul class="dsure-list-li dsure-list-img5">...</ul>
<ul class="dsure-list-li dsure-list-img6">...</ul>
<ul class="dsure-list-li dsure-list-img7">...</ul>
<ul class="dsure-list-li dsure-list-img8">...</ul>
<ul class="dsure-list-li dsure-list-img9">...</ul>
<ul class="dsure-list-li dsure-list-img10">...</ul>
<ul class="dsure-list-li dsure-list-img11">...</ul>
<ul class="dsure-list-li dsure-list-img12">...</ul>

No date

 
HTML Code:

<ul class="dsure-list-li dsure-list-img1">
    <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
    <li><a href="#">Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</a></li>
    <li><a href="#">Simply dummy text of the printing and typesetting industry.</a></li>
</ul>

Right Date 

 
HTML Code:

<ul class="dsure-list-li dsure-list-img1">
    <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<span class="dsure-list-date">2014.2.1</span></a></li>
    <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<span class="dsure-list-date">2014.2.1</span></a></li>
    <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<span class="dsure-list-date">2014.2.1</span></a></li>
</ul>

Three Column ( You need sets the width of <li> as a percentage. )

 
HTML Code:

<ul class="dsure-list-li dsure-list-img1 dsure-li-inlineblock">
    <li style="width:33%"><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
    <li style="width:33%"><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
    <li style="width:33%"><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
    <li style="width:33%"><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
    <li style="width:33%"><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
    <li style="width:33%"><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
</ul>

Two Column ( You need sets the width of <li> as a percentage. )

 
HTML Code:

<ul class="dsure-list-li dsure-list-img1 dsure-li-inlineblock">
    <li style="width:49.5%"><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
    <li style="width:49.53%"><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
    <li style="width:49.5%"><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
</ul>

Fluid

 
HTML Code:

<ul class="dsure-list-li dsure-list-img1 dsure-li-inlineblock">
    <li><a href="#">Demo text</a></li>
    <li><a href="#">Demo text</a></li>
    <li><a href="#">Demo text</a></li>
    <li><a href="#">Demo text</a></li>
    <li><a href="#">Demo text</a></li>
    <li><a href="#">Demo text</a></li>
</ul>

Fluid and Center Align

 
HTML Code:

<ul class="dsure-list-li dsure-list-li-center dsure-list-img1 dsure-li-inlineblock">
    <li><a href="#">Center text</a></li>
    <li><a href="#">Center text</a></li>
    <li><a href="#">Center text</a></li>
</ul>

Bulleted list

  1. Text
  2. Text
  3. Text
  1. Text
  2. Text
  3. Text
  1. Text
  2. Text
  3. Text
  1. Text
  2. Text
  3. Text
  1. Text
  2. Text
  3. Text
 
HTML Code:

<ol class="dsure-list-ol dsure-list-ol-type1"> 
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
</ol>

<ol class="dsure-list-ol dsure-list-ol-type2"> 
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
</ol>

<ol class="dsure-list-ol dsure-list-ol-type3"> 
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
</ol>

<ol class="dsure-list-ol dsure-list-ol-type4"> 
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
</ol>

<ol class="dsure-list-ol dsure-list-ol-type5"> 
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
 <li><a href="#">Text</a></li>
</ol>

Grid List

  • 3/12 Left text 9/12 Right text
  • 3/12 Left text 9/12 Right text
  • 3/12 Left text 9/12 Right text 
 
HTML Code:

<ul class="dsure-list-li">
    <li>
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">3/12 Left text</span>
              <span class="dsure-small-9 dsure-columns">9/12 Right text</span>
        </span> 
    </li>
    
    <li>
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">3/12 Left text</span>
              <span class="dsure-small-9 dsure-columns">9/12 Right text</span>
        </span> 
    </li>
    
    <li>
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">3/12 Left text</span>
              <span class="dsure-small-9 dsure-columns">9/12 Right text</span>
        </span> 
    </li>
</ul>

Fluid and Grid List ( You need sets the width of <li> as a percentage. )

  • Text Text
  • Text Text
  • Text Text
  • Text Text
  • Text Text 
 
HTML Code:

<ul class="dsure-list-li dsure-li-inlineblock">
    <li style="width:49.5%">
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">Text</span>
              <span class="dsure-small-9 dsure-columns">Text</span>
        </span> 
    </li>
    
    <li style="width:49.5%">
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">Text</span>
              <span class="dsure-small-9 dsure-columns">Text</span>
        </span> 
    </li>
    
    <li style="width:49.5%">
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">Text</span>
              <span class="dsure-small-9 dsure-columns">Text</span>
        </span> 
    </li>
    
    <li style="width:49.5%">
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">Text</span>
              <span class="dsure-small-9 dsure-columns">Text</span>
        </span> 
    </li>
    
    <li style="width:49.5%">
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">Text</span>
              <span class="dsure-small-9 dsure-columns">Text</span>
        </span> 
    </li>                      
</ul>

(2) <dl>、<dt>、<dd>

Two Column ( You could sets the width of <dt>. )

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Title

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 

 
HTML Code:

<dl class="dsure-list-dl"> 
    <dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-1.jpg"></a></dt>
    <dd> 
          <h3><a href="#">Title</a></h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl"> 
    <dt style="padding:5px;"><a href="#"><img width="120" src="css/images/335x260-2.jpg"></a></dt>
    <dd> 
          <h3><a href="#">Title</a></h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl"> 
    <dt style="padding:5px;"><a href="#"><img width="160" src="css/images/335x260-3.jpg"></a></dt>
    <dd> 
          <h3><a href="#">Title</a></h3>
          <p>
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>    
    </dd> 
</dl>

Horizontal Fluid ( You could sets the width of <dt>.)

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 

 
HTML Code:

<dl class="dsure-list-dl dsure-list-dl-fluid" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-1.jpg"></a></dt>
    <dd> 
          <h3><a href="#">Title</a></h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-2.jpg"></a></dt>
    <dd> 
          <h3><a href="#">Title</a></h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid" style="width:33%"> 
<dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-3.jpg"></a></dt>
<dd> 
      <h3><a href="#">Title</a></h3>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      </p>    
</dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-4.jpg"></a></dt>
    <dd> 
          <h3><a href="#">Title</a></h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-2.jpg"></a></dt>
    <dd> 
          <h3><a href="#">Title</a></h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>    
    </dd> 
</dl>

Vertical Fluid ( You could sets the width of <dt>.)

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 

 
HTML Code:

<dl class="dsure-list-dl dsure-list-dl-fluid dsure-list-dl-fluid-v" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img src="css/images/335x260-1.jpg"></a></dt>
    <dd> 
          <h3><a href="#">Title</a></h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid dsure-list-dl-fluid-v" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img src="css/images/335x260-2.jpg"></a></dt>
    <dd> 
          <h3><a href="#">Title</a></h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid dsure-list-dl-fluid-v" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img src="css/images/335x260-3.jpg"></a></dt>
    <dd> 
          <h3><a href="#">Title</a></h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>    
    </dd> 
</dl>

Card Fluid

Author Name：
Luca Flores
Age：
38
Description：
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
Author Name：
Luca Flores
Age：
38
Description：
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
Author Name：
Luca Flores
Age：
38
Description：
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
 
HTML Code:

<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:45%"> 
    <dt style="width:20%"><strong>Author Name：</strong></dt>
    <dd style="width:80%">Luca Flores</dd> 
    
    <dt style="width:20%"><strong>Age：</strong></dt>
    <dd style="width:80%">38</dd>   
    
    <dt style="width:20%"><strong>Description：</strong></dt>
    <dd style="width:80%">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</dd>       
</dl>    


<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:45%"> 
    <dt style="width:20%"><strong>Author Name：</strong></dt>
    <dd style="width:80%">Luca Flores</dd> 
    
    <dt style="width:20%"><strong>Age：</strong></dt>
    <dd style="width:80%">38</dd>   
    
    <dt style="width:20%"><strong>Description：</strong></dt>
    <dd style="width:80%">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</dd>       
</dl>   


<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:45%"> 
    <dt style="width:20%"><strong>Author Name：</strong></dt>
    <dd style="width:80%">Luca Flores</dd> 
    
    <dt style="width:20%"><strong>Age：</strong></dt>
    <dd style="width:80%">38</dd>   
    
    <dt style="width:20%"><strong>Description：</strong></dt>
    <dd style="width:80%">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</dd>       
</dl>

Card and Figure Fluid

Name：
Luca Flores
Age：
38
Description：
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
Name：
Luca Flores
Age：
38
Description：
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
Name：
Luca Flores
Age：
38
Description：
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
 
HTML Code:

<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:35%; padding-left:10%"> 

    <dt class="dsure-list-dl-info-img">
        <a href="#"><img width="80" height="120" src="css/images/335x260-1.jpg"></a>
    </dt>
    <dd class="dsure-list-dl-info-img"></dd>
    
    <dt style="width:12%"><strong>Name：</strong></dt>
    <dd style="width:78%">Luca Flores</dd> 
    
    <dt style="width:12%"><strong>Age：</strong></dt>
    <dd style="width:78%">38</dd>   
    
    <dt style="width:12%"><strong>Description：</strong></dt>
    <dd style="width:78%">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</dd>       

</dl>    

<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:35%; padding-left:10%"> 

    <dt class="dsure-list-dl-info-img">
        <a href="#"><img width="80" height="120" src="css/images/335x260-2.jpg"></a>
    </dt>
    <dd class="dsure-list-dl-info-img"></dd>
    
    <dt style="width:12%"><strong>Name：</strong></dt>
    <dd style="width:78%">Luca Flores</dd> 
    
    <dt style="width:12%"><strong>Age：</strong></dt>
    <dd style="width:78%">38</dd>   
    
    <dt style="width:12%"><strong>Description：</strong></dt>
    <dd style="width:78%">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</dd>       

</dl>    

<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:35%; padding-left:10%"> 

    <dt class="dsure-list-dl-info-img">
        <a href="#"><img width="80" height="120" src="css/images/335x260-3.jpg"></a>
    </dt>
    <dd class="dsure-list-dl-info-img"></dd>
    
    <dt style="width:12%"><strong>Name：</strong></dt>
    <dd style="width:78%">Luca Flores</dd> 
    
    <dt style="width:12%"><strong>Age：</strong></dt>
    <dd style="width:78%">38</dd>   
    
    <dt style="width:12%"><strong>Description：</strong></dt>
    <dd style="width:78%">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</dd>       

</dl>