implement highlight left

epfl-si · Aug 10, 2018 · 43727cb · 43727cb
1 parent 0c07179
commit 43727cb
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 1 deletion.
diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-left.twig b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-left.twig
@@ -0,0 +1,40 @@
+<div class="fullwidth-teaser fullwidth-teaser-left">
+  <picture>
+    {% if not img %}{% set img %}./images/basic_page_teaser.jpg{% endset %}{% endif %}
+    <img src="{{img}}" aria-labelledby="background-label" alt="An image description"/>
+  </picture>
+
+  <div class="fullwidth-teaser-text">
+
+    <div class="fullwidth-teaser-header">
+      <div class="fullwidth-teaser-title">
+        <h3>
+          {% if not title %}{% set title %}Des océans plus froids que ce que nous le pensions{% endset %}{% endif %}
+          {{title}}
+        </h3>
+        <ul class="list-inline mt-2">
+          <li class="list-inline-item">Actualités</li>
+          <li class="list-inline-item">Biologie</li>
+        </ul>
+      </div>
+      <a href="#" aria-label="Link to read more of that page" class="btn btn-primary triangle-outer-top-right d-none d-xl-block">
+        Lire l'article
+        <span class="sr-only">sur Tech Transfer.</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-right'} %}
+      </a>
+    </div>
+
+    <div class="fullwidth-teaser-content">
+      <p>
+        {% if not content %}
+        {% set content %}Une équipe de chercheurs de l’EPFL et européenne a découvert une erreur dans la façon dont ont été estimées jusqu’ici les températures des océans, faisant potentiellement du réchauffement climatique actuel un évènement sans précédent ces cent derniers millions d’années.{% endset %}
+        {% endif %}
+        {{content}}
+      </p>
+    </div>
+
+    <div class="fullwidth-teaser-footer">
+      <a href="#" aria-label="Link to read more of that page" class="btn btn-primary btn-block d-xl-none">En savoir plus</a>
+    </div>
+  </div>
+</div>
diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss
@@ -249,3 +249,24 @@
     }
   }
 }
+
+.fullwidth-teaser-left {
+
+  @include media-breakpoint-up(md) {
+    picture img {
+      right: -10%;
+      left: auto;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    picture img {
+      right: 0;
+    }
+    .fullwidth-teaser-text {
+      right: auto;
+      left: 2rem;
+    }
+  }
+}
+
diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml
@@ -2,4 +2,6 @@ title: Fullwidth teaser
 name: fullwidth-teaser
 variants:
   - name: horizontal
-    title: Horizontal
+    title: Horizontal
+  - name: left
+    title: Left aligned