<div class="bux-tile">
<a class="bux-tile__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image bux-image--1x1" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt=" " />
<div class="bux-tile__content">
<h3 class="bux-tile__header">
<a class="bux-tile__text" href="http://example.com">
This is a tile with a 1:1 image ratio
</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 %}">
<a class="bux-tile__link" href="{{ tile_url }}" aria-hidden="true" tabindex="-1"></a>
{% if tile_img_url %}
{% set image_url = tile_img_url %}
{% set image_alt_text = tile_img_alt_text %}
{% set class = 'bux-image--' ~ image_ratio %}
{% include '@image' %}
<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">
{% set image_url = tile_std_icon_url %}
{% set image_alt_text = tile_std_icon_alt_text %}
{% set class = 'bux-tile__std_icon' %}
{% include '@image' %}
{% else %}
<div class="bux-tile__content">
{% endif %}
{% if h_level %}<h{{ h_level|default(2) }} class="bux-tile__header">{% endif %}
<a class="bux-tile__text" href="{{ tile_url }}">
{{tile_text}}
</a>
{% 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 with a 1:1 image ratio
tile_url: http://example.com
h_level: 3
tile_img_url: https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg
tile_img_alt_text: ' '
image_ratio: 1x1
.bux-tile {
position: relative;
}
.bux-tile__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__text,
bux-tile__header .bux-tile__text {
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.