<div class="bux-tile">
<a class="bux-tile__hidden-link" href="http://example.com" rel="noopener" aria-hidden tabindex="-1">
</a>
<div class="bux-tile__content">
<img class="bux-image bux-tile__std_icon" src="/images/placeholders/grad_cap_icon_standard.svg" alt=" " />
<h3 class="bux-tile__header">
<a class="bux-tile__link" href="http://example.com" rel="noopener">
<span class="bux-tile__link__text">This is a tile</span>
</a>
</h3>
</div>
</div>
{#
Tile
Note: the tile can have an image, image icon, BUX icon, or no image.
Available variables:
- tile_img_url: URL for tile image.
- tile_image_alt_text: Alt text for tile image.
- image_ratio: Sets the tile's image ratio. Allowd values: 3x2, 1x1
- ui_icon: Machine name of BUX Icon.
- tile_std_icon_url: URL for the tile image icon.
- tile_std_icon_alt_text: String. Alt text for the image icon.
- h_level: Integer. Sets the heading level of the tile header.
- tile_url: URL for the tile.
- tile_text: String for the tile text.
- tile_body: Extra tile content. Optional.
#}
<div class="bux-tile{% if modifier %} bux-tile--{{modifier}}{% endif %}">
{% include '@link' with {
base_class: 'bux-tile__hidden-link',
link_url: tile_url,
attributes: {
'aria-hidden': true,
tabindex: -1
}
} %}
{% if tile_img_url %}
{% include '@image' with {
image_url: tile_img_url,
image_alt_text: tile_img_alt_text,
class: 'bux-image--' ~ image_ratio
} %}
<div class="bux-tile__content">
{% elseif ui_icon %}
<div class="bux-tile__content">
<span class="bux-tile__ui_icon {{ui_icon}}" aria-hidden="true"></span>
{% elseif tile_std_icon_url %}
<div class="bux-tile__content">
{% include '@image' with {
image_url: tile_std_icon_url,
image_alt_text: tile_std_icon_alt_text,
class: 'bux-tile__std_icon'
} %}
{% else %}
<div class="bux-tile__content">
{% endif %}
{% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %}
{% include '@link' with {
base_class: 'bux-tile__link',
link_url: tile_url,
link_text: tile_text,
show_underline: false
} %}
{% if h_level %}</h{{ h_level|default(2) }}>{% endif %}
{% if tile_body %}
<div class="bux-tile__body"> {{ tile_body }} </div>
{% endif %}
</div>
</div>
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
tile_text: This is a tile
tile_url: http://example.com
h_level: 3
tile_std_icon_url: /images/placeholders/grad_cap_icon_standard.svg
tile_std_icon_alt_text: ' '
.bux-tile {
position: relative;
}
.bux-tile__hidden-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bux-tile__content {
background-color: $gray-light-90;
padding: $sp-24;
position: relative;
z-index: 2;
pointer-events: none;
}
.bux-tile__std_icon {
max-width: rem-calc(72);
margin: 0 auto;
margin-bottom: $sp-16;
}
.bux-tile__ui_icon {
max-width: $sp-32;
margin: 0 auto $sp-16;
&::before {
color: $scarlet;
font-size: $sp-32;
width: $sp-32;
margin: 0 auto;
margin-bottom: $sp-16;
display:block;
}
}
.bux-tile__body {
text-align: center;
font-family: $sans;
margin-top: $sp-16;
}
.bux-tile__link,
.bux-tile__header .bux-tile__link {
color: $scarlet;
display: block;
font-family: $sans;
font-size: $ts-22;
line-height: 1.35;
font-weight: 700;
text-align: center;
pointer-events: all;
text-decoration: none;
margin: 0;
hyphens: auto;
@include breakpoint(md) {
font-size: $ts-md;
line-height: 1.35;
}
&:hover {
text-decoration: none;
}
&:focus {
outline: 2px solid $focus;
}
}
.bux-tile__header {
margin:0;
}
//Hover states
.bux-tile {
&:hover {
.bux-tile__content {
border-bottom: 4px solid $scarlet;
transition-duration: 0.05s;
margin-bottom: -4px;
}
&:focus {
outline: 2px solid $focus;
}
}
}
No notes defined.