Moment Image
v0.0.0
The Moment Image component shows a Circular Image decorated with a moment circle in different configurations defined with modifiers.
It is a low-level component to aid all kinds of Cards, Card Strips and Heroes. This is not intended to be used outside these components.
The Moment Image has a intrinsic ratio that stretches to the width of it's container. The ratios differ per modifier.
Card Moment #
Use --card-moment and one of the variation modifiers for the Moment Image used in the Card Moment.
Add one of the following modifiers to .vi-moment-image and .vi-moment-image__visual:
--card-moment-1--card-moment-2
A border is added to better illustrate the example.
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--card-moment vi-moment-image--card-moment-1">
<div class="vi-moment-image__visual vi-moment-image__visual--card-moment vi-moment-image__visual--card-moment-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--card-moment vi-moment-image--card-moment-2">
<div class="vi-moment-image__visual vi-moment-image__visual--card-moment vi-moment-image__visual--card-moment-2">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>Strip Neutral #
Use --strip-neutral and one of the variation modifiers for the Moment Image used in the Strip Neutral.
Add one of the following modifiers to .vi-moment-image and .vi-moment-image__visual:
--strip-neutral-1--strip-neutral-2--strip-neutral-3--strip-neutral-4
A border is added to better illustrate the example.
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-neutral vi-moment-image--strip-neutral-1">
<div class="vi-moment-image__visual vi-moment-image__visual--strip-neutral vi-moment-image__visual--strip-neutral-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-neutral vi-moment-image--strip-neutral-2">
<div class="vi-moment-image__visual vi-moment-image__visual--strip-neutral vi-moment-image__visual--strip-neutral-2">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-neutral vi-moment-image--strip-neutral-3">
<div class="vi-moment-image__visual vi-moment-image__visual--strip-neutral vi-moment-image__visual--strip-neutral-3">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-neutral vi-moment-image--strip-neutral-4">
<div class="vi-moment-image__visual vi-moment-image__visual--strip-neutral vi-moment-image__visual--strip-neutral-4">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>Strip Moment #
Use --strip-moment and one of the variation modifiers for the Moment Image used in the Strip Moment.
Add one of the following modifiers to .vi-moment-image and .vi-moment-image__visual:
--strip-moment-1--strip-moment-2
A border is added to better illustrate the example.
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-moment vi-moment-image--strip-moment-1">
<div class="vi-moment-image__visual vi-moment-image__visual--strip-moment vi-moment-image__visual--strip-moment-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-moment vi-moment-image--strip-moment-2">
<div class="vi-moment-image__visual vi-moment-image__visual--strip-moment vi-moment-image__visual--strip-moment-2">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>Strip Intro #
Use --strip-intro and one of the variation modifiers for the Moment Image used in the Strip Intro.
Add one of the following modifiers to .vi-moment-image and .vi-moment-image__visual:
--strip-intro-1--strip-intro-2
A border is added to better illustrate the example.
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-intro vi-moment-image--strip-intro-1">
<div class="vi-moment-image__visual vi-moment-image__visual--strip-intro vi-moment-image__visual--strip-intro-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-intro vi-moment-image--strip-intro-2">
<div class="vi-moment-image__visual vi-moment-image__visual--strip-intro vi-moment-image__visual--strip-intro-2">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>Strip Intro Label #
Use --strip-intro-label and one of the variation modifiers for the Moment Image used in the Strip Intro Neutral.
Add one of the following modifiers to .vi-moment-image and .vi-moment-image__visual:
--strip-intro-label-1--strip-intro-label-2
This element has extra markup
To display a thematic logo the element .vi-moment-image__label is added.
Following preset modifiers can be used on the .vi-moment-image__label:
--life-effects(displays Life Effects logo)
When other logos are needed, and it falls outside the scope of this library,
a background-image can be set via the style attribute. Label image used in example can found at the end of the page.
Please note that there is discussion on the font for Life Effects. But from technical perspective nothing will change.
A border is added to better illustrate the example.
Life Effects
Odcienie Zdrowia
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-intro-label vi-moment-image--strip-intro-label-1">
<div class="vi-moment-image__label vi-moment-image__label--life-effects vi-moment-image__label--strip-intro-label vi-moment-image__label--strip-intro-label-1">
<span class="sr-only">Life Effects</span>
</div>
<div class="vi-moment-image__visual vi-moment-image__visual--strip-intro-label vi-moment-image__visual--strip-intro-label-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-intro-label vi-moment-image--strip-intro-label-2">
<div class="vi-moment-image__label vi-moment-image__label--life-effects vi-moment-image__label--strip-intro-label vi-moment-image__label--strip-intro-label-2" style="background-image:url(/assets/images/labels/life-effects/logo-odcienie-zdrowia.png)">
<span class="sr-only">Odcienie Zdrowia</span>
</div>
<div class="vi-moment-image__visual vi-moment-image__visual--strip-intro-label vi-moment-image__visual--strip-intro-label-2">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>Strip Mood #
Use --strip-mood and one of the variation modifiers for the Moment Image used in the Strip Mood.
Add one of the following modifiers to .vi-moment-image and .vi-moment-image__visual:
--strip-mood-1--strip-mood-2
A border is added to better illustrate the example.
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-mood vi-moment-image--strip-mood-1">
<div class="vi-moment-image__visual vi-moment-image__visual--strip-mood vi-moment-image__visual--strip-mood-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-mood vi-moment-image--strip-mood-2">
<div class="vi-moment-image__visual vi-moment-image__visual--strip-mood vi-moment-image__visual--strip-mood-2">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>Strip Mood Label #
Use --strip-mood-label and one of the variation modifiers as drop in replacement for the Strip Mood Moment Image
used in the Strip Mood.
Add one of the following modifiers to .vi-moment-image and .vi-moment-image__visual:
--strip-mood-label-1--strip-mood-label-2
This element has extra markup
To display a thematic logo the element .vi-moment-image__label is added.
Following preset modifiers can be used on the .vi-moment-image__label:
--life-effects(displays Life Effects logo)
When other logos are needed, and it falls outside the scope of this library,
a background-image can be set via the style attribute. Label image used in example can found at the end of the page.
Please note that there is discussion on the font for Life Effects. But from technical perspective nothing will change.
A border is added to better illustrate the example.
Life Effects
Odcienie Zdrowia
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-mood-label vi-moment-image--strip-mood-label-1">
<div class="vi-moment-image__label vi-moment-image__label--life-effects vi-moment-image__label--strip-mood-label vi-moment-image__label--strip-mood-label-1">
<span class="sr-only">Life Effects</span>
</div>
<div class="vi-moment-image__visual vi-moment-image__visual--strip-mood-label vi-moment-image__visual--strip-mood-label-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--strip-mood-label vi-moment-image--strip-mood-label-2">
<div class="vi-moment-image__label vi-moment-image__label--life-effects vi-moment-image__label--strip-mood-label vi-moment-image__label--strip-mood-label-2" style="background-image:url(/assets/images/labels/life-effects/logo-odcienie-zdrowia.png)">
<span class="sr-only">Odcienie Zdrowia</span>
</div>
<div class="vi-moment-image__visual vi-moment-image__visual--strip-mood-label vi-moment-image__visual--strip-mood-label-2">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>Timeline #
Use --timeline and one of the variation modifiers for the Moment Image used in the Timeline Milestone.
Add one of the following modifiers to .vi-moment-image and .vi-moment-image__visual:
--timeline-1--timeline-2--timeline-3--timeline-4--timeline-5--timeline-6--timeline-7--timeline-8--timeline-9
A border is added to better illustrate the example.
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-1">
<div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-2">
<div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-2">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-3">
<div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-3">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-4">
<div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-4">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-5">
<div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-5">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-6">
<div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-6">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-7">
<div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-7">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-8">
<div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-8">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-9">
<div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-9">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</div>
</div>Contextual #
Use --contextual and one of the variation modifiers for the Moment Image used in Contextual Images.
Add one of the following modifiers to .vi-moment-image and .vi-moment-image__visual:
--contextual-1--contextual-2--contextual-3--contextual-4--contextual-5--contextual-6--contextual-7--contextual-8
A border is added to better illustrate the example.
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-1">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-2">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-2">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-3">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-3">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-4">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-4">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-5">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-5">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-6">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-6">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-7">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-7">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-8">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-8">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>Video #
Use --video to create a video trigger.
Note that the element is an a tag.
The following modifier is available:
--video-timeline(spacing follows timeline context)
Add the modifier to .vi-moment-image and .vi-moment-image__visual.
A border is added to better illustrate the example.
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<a href="#moment-image-3a2e68" class="vi-moment-image vi-moment-image--video">
<div class="vi-moment-image__visual vi-moment-image__visual--video">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</a>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<a href="#moment-image-e10a8e" class="vi-moment-image vi-moment-image--video vi-moment-image--video-timeline">
<div class="vi-moment-image__visual vi-moment-image__visual--video vi-moment-image__visual--video-timeline">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
</div>
</a>
</div>Modal #
Use --modal to create a modal trigger.
Note that the element is an a tag.
The following modifier is available:
--modal-product(max-width specific to product pages)
Add the modifier to .vi-moment-image and .vi-moment-image__visual.
A border is added to better illustrate the example.
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<a href="#moment-image-c16ae2" class="vi-moment-image vi-moment-image--modal" role="button">
<div class="vi-moment-image__visual vi-moment-image__visual--modal">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-480x480.jpg"></div>
</div>
</a>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
<!-- Moment Image -->
<a href="#moment-image-6c8e88" class="vi-moment-image vi-moment-image--modal vi-moment-image--modal-product" role="button">
<div class="vi-moment-image__visual vi-moment-image__visual--modal vi-moment-image__visual--modal-product">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-480x480.jpg"></div>
</div>
</a>
</div>Label Images #
Label images can be downloaded here:
Stylesheets #
The following stylesheets are required to display this component.
The following additional stylesheet is used to display the example(s).
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- Broken modal icon.
Changed
- Allow element to be a button.
- Print: css adjustments
Added
- PBS support Contextual
- PBS support Timeline, Video
- Added Moment Images for Contextual images
- PBS support Mood, Neutral, Modal
- Partial PBS support
- Added example on how to use background-images on moment image labels for intro and mood strip.
- Added Moment Images with trigger indicator for opening Modal
- Added Moment Images with label for Intro Strip
- Added Moment Images with label for Mood Strip
- Added Moment Images for Timeline
- Initial draft