BUX Component Development Platform

Tag 

<ul class='bux-tag'>
    <li>

        <a class="bux-tag__link" href="#" rel="noopener">
            <span class="bux-tag__link__text">Tag title enabled</span>
        </a>
    </li>
    <li>

        <a class="bux-tag__link" rel="noopener" role="link" aria-disabled="true">
            <span class="bux-tag__link__text">Tag title disabled</span>
        </a>
    </li>
</ul>
 
<ul class='bux-tag'>
    {% set show_underline = false %}
	{% for item in tag_items %}
		<li>
			{% if item.disabled == 'true' %}
                {% include '@link' with {
                    base_class: 'bux-tag__link',
                    link_text: item.text,
                    attributes: {
                        role: 'link',
                        'aria-disabled': 'true'
                    }
                } %}
			{% else %}
                {% include '@link' with {
                    base_class: 'bux-tag__link',
                    link_url: item.url,
                    link_text: item.text
                } %}
			{% 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
tag_items:
  - text: Tag title enabled
    url: '#'
  - text: Tag title disabled
    url: '#'
    disabled: 'true'
  • Content: 
    ul.bux-tag {
	li {
		display: inline-block;
	}
	a {
		background: $gray-light-90;
		color: $scarlet;
		display: block;
		font-size: $ts-sm;
		margin: 0 $sp-8 $sp-8 0;
		padding: 3px 6px;
		text-decoration: none;

		&:hover {
			background: $gray-dark-60;
			color: $white;
		}

		&:focus {
			outline: 2px solid $focus;
			outline-offset: 0px;
		}

		&[aria-disabled="true"] {
			background: $gray-light-80;
			color: $gray-dark-20;
		}
	}
}
  • URL: /components/raw/tag/_tag.scss
  • Filesystem Path: src/components/tag/_tag.scss
  • Size: 443 Bytes

No notes defined.