scss-library/components/05_Molecules/teaser/teaser.hbs

47 lines
1.9 KiB
Handlebars

<div class="RV-Teaser">
<div class="RV-Teaser__Image">
<img class="RV-Image RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%" src="{{ path '/images/landscape.jpeg' }}"/>
</div>
<div class="RV-Teaser__Preview">
<div class="RV-Teaser__Headline">
<h2>This is a headline for a teaser it is indeed dear reader</h2>
</div>
<div class="RV-Teaser__Text">
<div class="RV-Truncation RV-Truncation--fade">
<div class="RV-Truncation__Cutter">
<p class="RV-Truncation__Content">
Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
</p>
</div>
</div>
</div>
<div class="RV-Teaser__Buttons">
<a href="#"class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{path '/icons/plus.svg'}}"/>
</div>
<div class="RV-Button__Text">
More
</div>
</a>
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{path '/icons/favourite.svg'}}"/>
</div>
<div class="RV-Button__Text">
Favorite
</div>
</a>
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{path '/icons/information.svg'}}"/>
</div>
<div class="RV-Button__Text">
Details
</div>
</a>
</div>
</div>
</div>