BUX Component Development Platform

Link List 

<ul class="bux-link-list" role="list">
    <li class="bux-link-list__item">

        <a class="bux-text-link" href="#" rel="noopener">
            <span class="bux-text-link__text">Title of List Item</span>
        </a>
        <div class="bux-link-list__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </li>
    <li class="bux-link-list__item">

        <a class="bux-text-link" href="#" rel="noopener">
            <span class="bux-text-link__text">Title of List Item</span>
        </a>
        <div class="bux-link-list__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </li>
    <li class="bux-link-list__item">

        <a class="bux-text-link" href="#" rel="noopener">
            <span class="bux-text-link__text">Title of List Item</span>
        </a>
        <div class="bux-link-list__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </li>
</ul>
 
{# 

Link List

Available variables:

- items:        Array of link items.
- item.url:     URL for the link item.
- item.link:    String for the link title. 
- item.text:    String for the item link.

#}

<ul class="bux-link-list" role="list">
	{% for item in items %}
        <li class="bux-link-list__item">
            {% include '@text-link' with {
                text_link_url: item.url,
                text_link_text: item.link
            } %}
            {% if item.text %}
                <div class="bux-link-list__text">
                    {{ item.text }}
                </div>
            {% endif %}
        </li>
	{% endfor %}
</ul>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
items:
  - url: '#'
    link: Title of List Item
    text: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
  - url: '#'
    link: Title of List Item
    text: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
  - url: '#'
    link: Title of List Item
    text: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
  • Content: 
    .bux-link-list {
  font-size: $ts-base;

  &__item {
    border-top: 2px solid $gray-light-80;
    padding: $sp-16;

    &:only-child {
      border-bottom: 2px solid $gray-light-80;
    }
  }
  &__text {
    margin-top: $sp-8;
  }
  .bux-text-link {
    display: block;
    font-weight: 700;
    margin-right: 0;
    padding-right: $sp-24;
    position: relative;

    &:after {
      font-weight: 400;
      padding-left: $sp-8;
      right: $sp-8;
      position: absolute;
    }
    &:hover {
      &:after {
        right: 0;
      }
    }
  }
}
  • URL: /components/raw/link-list/_link-list.scss
  • Filesystem Path: src/components/link-list/_link-list.scss
  • Size: 551 Bytes

No notes defined.