BUX Component Development Platform

Factoid 

<ul class="bux-factoid">

    <li class="bux-factoid__item">
        <span class="bux-factoid__stat">
            200+
        </span>
        <span class="bux-factoid__text">
            lorem ipsum dolor sit amet, consectetur adipiscing elit
        </span>
    </li>

    <li class="bux-factoid__item">
        <span class="bux-factoid__stat">
            #1
        </span>
        <span class="bux-factoid__text">
            lorem ipsum dolor sit amet, consectetur adipiscing elit
        </span>
    </li>

    <li class="bux-factoid__item">
        <span class="bux-factoid__stat">
            9<sup>th</sup>
        </span>
        <span class="bux-factoid__text">
            lorem ipsum dolor sit amet, consectetur adipiscing elit
        </span>
    </li>
</ul>
 
{# 

Factoid

Available variables:

- items:        Array containing the factoid list items.
- item.stat:    Statistic for the item.
- item.text:    Descriptive text for the item.

#}

<ul class="bux-factoid">
	{% for item in items %}	
		<li class="bux-factoid__item">
			<span class="bux-factoid__stat">
				{{ item.stat }}
			</span>
			<span class="bux-factoid__text">
				{{ item.text }}
			</span>
		</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:
  - stat: 200+
    text: lorem ipsum dolor sit amet, consectetur adipiscing elit
  - stat: '#1'
    text: lorem ipsum dolor sit amet, consectetur adipiscing elit
  - stat: 9<sup>th</sup>
    text: lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Content: 
    .bux-factoid {
	@include breakpoint(lg) {
		display: flex;
	}
}
.bux-factoid__item {
	padding: $sp-12 $sp-16;
	display: block;

	&:last-child {
		border-right: none;
	}

	@include breakpoint(lg) {
		border-right: 2px solid $gray-light-60;
		padding: 0 $sp-16;
		flex: 1 1 0;
	}
}

.bux-factoid__stat {
	display: block;
	color: $scarlet;
	font-family: $sans;
	font-size: $ts-xxl;
	font-weight: 900;
	line-height: 4.125rem;
	text-align: center;

	@include breakpoint(lg) {
		font-size: rem-calc(70);
		line-height: 6rem;
	}

	sup {
		font-size: 2.5rem;
		line-height: 1;
	}
}
.bux-factoid__text {
	display: block;
	color: $gray-dark-80;
	font-family: $sans;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 2rem;
	text-align: center;

	@include breakpoint(lg) {
		font-size: $ts-22;
		line-height: rem-calc(28);
	}
}
  • URL: /components/raw/factoid/_factoid.scss
  • Filesystem Path: src/components/factoid/_factoid.scss
  • Size: 821 Bytes

No notes defined.