<div class="lens-material">
<h6 class="lens-material__title">Superthin Glass</h6>
<p class="lens-material__description">SuperThin Glass provides the absolute best optics available. It is the heaviest of our four materials, but is 20% thinner and lighter than standard glass.</p>
<div class="lens-material__diagram">
<div class="lens-material__label lens-material__label--top">Clarity</div>
<div class="lens-material__middle">
<div class="lens-material__label lens-material__label--left">Shatter Resistance</div>
<div class="lens-material__image-wrapper">
<img class="lens-material__image" src="/assets/images/lens-material-superthin.svg">
<span class="lens-material__caption">ST</span>
</div>
<div class="lens-material__label lens-material__label--right">Scratch Resistance</div>
</div>
<div class="lens-material__label lens-material__label--bottom">Weight</div>
</div>
</div>
<div class="lens-material">
<h6 class="lens-material__title">{{title}}</h6>
<p class="lens-material__description">{{description}}</p>
<div class="lens-material__diagram">
<div class="lens-material__label lens-material__label--top">{{labels.top}}</div>
<div class="lens-material__middle">
<div class="lens-material__label lens-material__label--left">{{labels.left}}</div>
<div class="lens-material__image-wrapper">
<img class="lens-material__image" src="{{image}}">
<span class="lens-material__caption">{{abbreviation}}</span>
</div>
<div class="lens-material__label lens-material__label--right">{{labels.right}}</div>
</div>
<div class="lens-material__label lens-material__label--bottom">{{labels.bottom}}</div>
</div>
</div>
{
"labels": {
"top": "Clarity",
"left": "Shatter Resistance",
"right": "Scratch Resistance",
"bottom": "Weight"
},
"abbreviation": "ST",
"title": "Superthin Glass",
"description": "SuperThin Glass provides the absolute best optics available. It is the heaviest of our four materials, but is 20% thinner and lighter than standard glass.",
"image": "/assets/images/lens-material-superthin.svg"
}
.lens-material {
text-align: center;
}
.lens-material__title {
@include text-label;
margin: 0;
@include breakpoint($breakpoint-md) {
width: 100%;
float: left;
font-size: 1.9rem;
line-height: 3.0rem;
}
}
.lens-material__description {
@include text-label;
@include breakpoint($breakpoint-md) {
@include span(10);
@include push(1);
text-align: left;
}
@include breakpoint($breakpoint-xl) {
width: 100%;
margin: 15px 0;
}
}
.lens-material__diagram {
@include text-label;
@include clearfix;
margin-bottom: 20px;
@include breakpoint($breakpoint-md) {
clear: both;
}
}
.lens-material__middle {
display: table;
width: 100%;
max-width: 350px;
margin: 0 auto;
}
.lens-material__label--left {
display: table-cell;
width: calc(50% - 75px);
text-align: right;
vertical-align: middle;
}
.lens-material__label--right {
display: table-cell;
width: calc(50% - 75px);
text-align: left;
vertical-align: middle;
}
.lens-material__label--bottom {
clear: both;
}
.lens-material__image-wrapper {
display: table-cell;
position: relative;
width: 150px;
vertical-align: middle;
}
.lens-material__image {
width: 100%;
}
.lens-material__caption {
position: absolute;
top: calc(50% - 8px);
right: 0;
bottom: 0;
left: 0;
color: $color-white;
font-weight: $font-weight-bold;
}
There are no notes for this item.