Lehigh Clutch Style Guide

Definition list 

<div class="dl-wrapper ">
        <dl class="dl">
            <dt class="dl-term">Definition List</dt>
            <div class="dd-wrapper">
                <dd><a href="">Definition for the list 1</a></dd>
                <dd><a href="">Definition for the list 2</a></dd>
            </div>
        </dl>
    </div>
    <div class="dl-wrapper ">
        <dl class="dl">
            <dt class="dl-term">Definition List</dt>
            <div class="dd-wrapper">
                <dd><a href="">Definition for the list 1</a></dd>
            </div>
        </dl>
    </div>
    <div class="dl-wrapper ">
        <dl class="dl">
            <dt class="dl-term">Definition List</dt>
            <div class="dd-wrapper">
                <dd><a href="">Definition for the list 1</a></dd>
                <dd><a href="">Definition for the list 2</a></dd>
            </div>
        </dl>
    </div>
 
{% for dl_item in dl_items %}
    <div class="dl-wrapper {{ dl_item.single_column }}">
        <dl class="dl">
            <dt class="dl-term">{{ dl_item.dl_term }}</dt>
            <div class="dd-wrapper">
                {% for def in dl_item.defs %}
                    <dd><a href="{{ def.url }}">{{ def.dl_def }}</a></dd>
                {% endfor %}
            </div>
        </dl>
    </div>
{% endfor %}
 
{
  "ul_items": {
    "1": {
      "content": "Item 1"
    },
    "2": {
      "content": "Item 2"
    },
    "3": {
      "content": "Item 3"
    },
    "4": {
      "content": "Item 4"
    }
  },
  "dl_items": {
    "1": {
      "dl_term": "Definition List",
      "defs": [
        {
          "dl_def": "Definition for the list 1"
        },
        {
          "dl_def": "Definition for the list 2"
        }
      ]
    },
    "2": {
      "dl_term": "Definition List",
      "defs": [
        {
          "dl_def": "Definition for the list 1"
        }
      ]
    },
    "3": {
      "dl_term": "Definition List",
      "defs": [
        {
          "dl_def": "Definition for the list 1"
        },
        {
          "dl_def": "Definition for the list 2"
        }
      ]
    }
  }
}
  • Content: 
    .ol {
  &.u_alpha {
    list-style-type: upper-alpha;
  }

  &.l_alpha {
    list-style-type: lower-alpha;
  }

  &.u_roman {
    list-style-type: upper-roman;
  }

  &.l_roman {
    list-style-type: lower-roman;
  }
}
  • URL: /components/raw/lists/lists.scss
  • Filesystem Path: bits/02-general/text/lists/lists.scss
  • Size: 219 Bytes

Show the definition list.