FlipBox rotate left
Content Front Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.
Content Behind Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.
<div class="eds_flipBox">
<div class="eds_front">
<h5>FlipBox rotate left</h5>
<strong>Content Front</strong> Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.
</div>
<div class="eds_behind">
<strong>Content Behind</strong> Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.
</div>
</div>
FlipBox rotate right
Content Front Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.
Content Behind Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.
<div class="eds_flipBox eds_flipRight">
<div class="eds_front">
<h5>FlipBox rotate right</h5>
<strong>Content Front</strong> Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.
</div>
<div class="eds_behind">
<strong>Content Behind</strong> Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.
</div>
</div>
FlipBox rotate top
Content Front Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.
Content Behind Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.
<div class="eds_flipBox eds_flipTop">
<div class="eds_front">
<h5>FlipBox rotate top</h5>
<strong>Content Front</strong> Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.
</div>
<div class="eds_behind">
<strong>Content Behind</strong> Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.
</div>
</div>
FlipBox rotate bottom
Content Front Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.
Content Behind Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.
<div class="eds_flipBox eds_flipBottom">
<div class="eds_front">
<h5>FlipBox rotate bottom</h5>
<strong>Content Front</strong> Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.
</div>
<div class="eds_behind">
<strong>Content Behind</strong> Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.
</div>
</div>
FlipBox with various elements example
Short title goes here.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident
Short title goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Read more
<div class="eds_flipBox">
<div class="eds_front">
<div class="eds_box5">
<div class="text-center mb-3">
<span class="eds_fontIcon mb-4">
<i class="fas fa-coffee"></i>
</span>
<h6>Short title goes here.</h6>
</div>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
</div>
</div>
<div class="eds_behind">
<div class="eds_box13">
<div class="eds_boxContent text-center">
<span class="eds_fontIcon eds_styleWhite mb-4">
<i class="fas fa-coffee"></i>
</span>
<h5 class="mb-3 eds_whiteColor">Short title goes here.</h5>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#" class="eds_boxReadMore">Read more</a>
</div>
<img alt="Fusce adipiscing" src="/Portals/0/landscape.jpg" class="eds__boxImage" title="" />
</div>
</div>
</div>
Short title goes here.
Temporibus autem quibusdam et aut officiis debitis aut rerum
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
Short title goes here.
Temporibus autem quibusdam et aut officiis debitis aut rerum
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
<div class="eds_flipBox">
<div class="eds_front">
<div class="eds_box1">
<h6 class="eds_primaryColor">Short title goes here. </h6>
<h5>Temporibus autem quibusdam et aut officiis debitis aut rerum</h5>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
</div>
</div>
<div class="eds_behind">
<div class="eds_box4">
<h6 class="eds_whiteColor">Short title goes here. </h6>
<h5>Temporibus autem quibusdam et aut officiis debitis aut rerum</h5>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
</div>
</div>
</div>
Short title goes here.
Temporibus autem quibusdam et aut officiis debitis aut rerum
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
Short title goes here.
Temporibus autem quibusdam et aut officiis debitis aut rerum
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident
Read more
<div class="eds_flipBox">
<div class="eds_front">
<div class="eds_box3">
<div class="eds_boxHeader">
<span><small>APRIL 28, 10:12 PM, 2016</small></span>
</div>
<div class="eds_boxContent">
<h6 class="eds_primaryColor">Short title goes here. </h6>
<h5>Temporibus autem quibusdam et aut officiis debitis aut rerum</h5>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
</div>
</div>
</div>
<div class="eds_behind">
<div class="eds_box7">
<h6 class="eds_primaryColor">Short title goes here. </h6>
<h5>Temporibus autem quibusdam et aut officiis debitis aut rerum</h5>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
<a href="#" class="eds_boxReadMore">Read more</a>
</div>
</div>
</div>
Styled FlipBoxes
FlipBox example 1
Short title goes here.
Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Short title goes here.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Short title goes here.
Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Short title goes here.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Short title goes here.
Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Short title goes here.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="row no-gutters">
<div class="col-md-4">
<div class="eds_flipBox1">
<img alt="Fusce adipiscing" src="/Portals/0/demoImage1.jpg" title="" />
<div class="eds_flipBox">
<div class="eds_front">
<div class="eds_boxContent text-center">
<h5 class="eds_whiteColor">Short title goes here.</h5>
<p class="eds_whiteColor">Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
<div class="eds_behind">
<div class="text-center">
<i class="eds_boxIcon fas fa-coffee"></i>
<h5 class="mt-3 eds_whiteColor">Short title goes here.</h5>
<h6 class="mt-3 eds_whiteColor">Lorem ipsum dolor sit amet</h5>
<p class="text-left eds_whiteColor">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="eds_flipBox1">
<img alt="Fusce adipiscing" src="/Portals/0/demoImage2.jpg" title="" />
<div class="eds_flipBox">
<div class="eds_front">
<div class="eds_boxContent text-center">
<h5 class="eds_whiteColor">Short title goes here.</h5>
<p class="eds_whiteColor">Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
<div class="eds_behind">
<div class="text-center">
<i class="eds_boxIcon fas fa-coffee"></i>
<h5 class="mt-3 eds_whiteColor">Short title goes here.</h5>
<h6 class="mt-3 eds_whiteColor">Lorem ipsum dolor sit amet</h5>
<p class="text-left eds_whiteColor">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="eds_flipBox1">
<img alt="Fusce adipiscing" src="/Portals/0/demoImage3.jpg" title="" />
<div class="eds_flipBox">
<div class="eds_front">
<div class="eds_boxContent text-center">
<h5 class="eds_whiteColor">Short title goes here.</h5>
<p class="eds_whiteColor">Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
<div class="eds_behind p-4 text-center">
<i class="eds_boxIcon fas fa-coffee"></i>
<h5 class="mt-3 eds_whiteColor">Short title goes here.</h5>
<h6 class="mt-3 eds_whiteColor">Lorem ipsum dolor sit amet</h5>
<p class="text-left eds_whiteColor">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
FlipBox example 2
Short title goes here.
Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Integer ut nunc ligula. Quisque convallis urna nec metus convallis, ut tempus orci molestie. Nullam lacinia ornare ante et imperdiet. Suspendisse nec turpis vitae mi vehicula dictum.
Lorem ipsum dolor sit amet
Short title goes here.
Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Integer ut nunc ligula. Quisque convallis urna nec metus convallis, ut tempus orci molestie. Nullam lacinia ornare ante et imperdiet. Suspendisse nec turpis vitae mi vehicula dictum.
Lorem ipsum dolor sit amet
<div class="row">
<div class="col-md-6">
<div class="eds_flipBox2">
<img alt="Fusce adipiscing" src="/Portals/0/demoImage1.jpg" title="" />
<div class="eds_flipBox">
<div class="eds_front">
<div class="eds_boxContent">
<h6 class="eds_whiteColor">Short title goes here.</h6>
<h5>Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h5>
</div>
</div>
<div class="eds_behind">
<div class="eds_boxContent">
<h5>Lorem ipsum dolor sit amet.</h5>
<p class="text-left">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Integer ut nunc ligula. Quisque convallis urna nec metus convallis, ut tempus orci molestie. Nullam lacinia ornare ante et imperdiet. Suspendisse nec turpis vitae mi vehicula dictum. </p>
</div>
<h4 class="m-4 eds_primaryColor">Lorem ipsum dolor sit amet</h4>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="eds_flipBox2">
<img alt="Fusce adipiscing" src="/Portals/0/demoImage2.jpg" title="" />
<div class="eds_flipBox">
<div class="eds_front">
<div class="eds_boxContent">
<h6 class="eds_whiteColor">Short title goes here.</h6>
<h5>Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h5>
</div>
</div>
<div class="eds_behind">
<div class="eds_boxContent">
<h5>Lorem ipsum dolor sit amet.</h5>
<p class="text-left">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Integer ut nunc ligula. Quisque convallis urna nec metus convallis, ut tempus orci molestie. Nullam lacinia ornare ante et imperdiet. Suspendisse nec turpis vitae mi vehicula dictum. </p>
</div>
<h4 class="m-4 eds_primaryColor">Lorem ipsum dolor sit amet</h4>
</div>
</div>
</div>
</div>
</div>