Lists: UL: Dl

300 × 150
<div class="dl-wrapper ">
        <dl class="dl">
            <dt class="dl-term">Definition List</dt>
            <div class="dd-wrapper">
                <dd><a href="">A number of connected items or names written or printed consecutively, typically one below the other.</a></dd>
                <dd><a href="">Out here in the fields. I fight for my meals. I get my back into my living. I don't need to fight.</a></dd>
            </div>
        </dl>
    </div>
    <div class="dl-wrapper ">
        <dl class="dl">
            <dt class="dl-term">Baba O'Riley</dt>
            <div class="dd-wrapper">
                <dd><a href="">Out here in the fields. I fight for my meals. I get my back into my living. I don't need to fight. To prove I'm right. I don't need to be forgiven</a></dd>
            </div>
        </dl>
    </div>
    <div class="dl-wrapper ">
        <dl class="dl">
            <dt class="dl-term">Behind Blue Eyes</dt>
            <div class="dd-wrapper">
                <dd><a href="">No one knows what it's like. To be the bad man. To be the sad man. Behind blue eyes.</a></dd>
            </div>
        </dl>
    </div>
    <div class="dl-wrapper ">
        <dl class="dl">
            <dt class="dl-term">Love, Reign O'er Me</dt>
            <div class="dd-wrapper">
                <dd><a href="">Only love, Can make it rain, the way the beach is kissed by the sea. Only love, can make it rain, like the sweat of lovers', laying in the fields.</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">
                {% block cms_override %}
                    {% for def in dl_item.defs %}
                        <dd><a href="{{ def.url }}">{{ def.dl_def }}</a></dd>
                    {% endfor %}
                {% endblock cms_override %}
            </div>
        </dl>
    </div>
{% endfor %}
{
  "ul_items": {
    "1": {
      "content": "Top 3 Albums May 23, 2009"
    },
    "2": {
      "content": "'Epiphany' - Chrisette Michele"
    },
    "3": {
      "content": "'Hannah Montana: The Movie Soundtrack'"
    },
    "4": {
      "content": "'Fantasy Ride' - Ciara"
    }
  },
  "dl_items": {
    "1": {
      "dl_term": "Definition List",
      "defs": [
        {
          "dl_def": "A number of connected items or names written or printed consecutively, typically one below the other."
        },
        {
          "dl_def": "Out here in the fields. I fight for my meals. I get my back into my living. I don't need to fight."
        }
      ]
    },
    "2": {
      "dl_term": "Baba O'Riley",
      "defs": [
        {
          "dl_def": "Out here in the fields. I fight for my meals. I get my back into my living. I don't need to fight. To prove I'm right. I don't need to be forgiven"
        }
      ]
    },
    "3": {
      "dl_term": "Behind Blue Eyes",
      "defs": [
        {
          "dl_def": "No one knows what it's like. To be the bad man. To be the sad man. Behind blue eyes."
        }
      ]
    },
    "4": {
      "dl_term": "Love, Reign O'er Me",
      "defs": [
        {
          "dl_def": "Only love, Can make it rain, the way the beach is kissed by the sea. Only love, can make it rain, like the sweat of lovers', laying in the fields."
        }
      ]
    }
  }
}
  • 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: components/01-elements/02-lists/lists.scss
  • Size: 233 Bytes

No notes defined.