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="">
            Title of List Item
        </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="">
            Title of List Item
        </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="">
            Title of List Item
        </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.text:    String for the item link.

#}

<ul class="bux-link-list" role="list">
	{% for item in items %}	
	<li class="bux-link-list__item">
		<a
			class="bux-text-link"
			href="{{ item.url }}"
		>
			{{ item.link }}
		</a>
		{% 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: null
    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: null
    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: null
    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;
    }
    &:hover {
      &:after {
        right: 0;
      }
    }
  }
}
  • URL: /components/raw/link-list/_link-list.scss
  • Filesystem Path: src/components/link-list/_link-list.scss
  • Size: 525 Bytes

No notes defined.