diff --git a/bin/materialize.css b/bin/materialize.css index 08a0cdcea7..eb6334bd9b 100644 --- a/bin/materialize.css +++ b/bin/materialize.css @@ -4548,8 +4548,12 @@ small { overflow: hidden; } -.card.small .card-content, .card.medium .card-content, .card.large .card-content { +.card.small .card-image + .card-content, .card.medium .card-image + .card-content, .card.large .card-image + .card-content { max-height: 40%; +} + +.card.small .card-content, .card.medium .card-content, .card.large .card-content { + max-height: 100%; overflow: hidden; } @@ -4572,6 +4576,50 @@ small { height: 500px; } +.card.horizontal { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.card.horizontal.small .card-image, .card.horizontal.medium .card-image, .card.horizontal.large .card-image { + height: 100%; + max-height: none; + overflow: visible; +} + +.card.horizontal.small .card-image img, .card.horizontal.medium .card-image img, .card.horizontal.large .card-image img { + height: 100%; +} + +.card.horizontal .card-image { + max-width: 50%; +} + +.card.horizontal .card-image img { + max-width: 100%; + width: auto; +} + +.card.horizontal .card-stacked { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; +} + +.card.horizontal .card-stacked .card-content { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + .card.sticky-action .card-action { z-index: 2; } diff --git a/cards.html b/cards.html index 29b7598096..92010c2ed5 100644 --- a/cards.html +++ b/cards.html @@ -207,6 +207,56 @@
I am a very simple card. I am good at containing small bits of information.
+
+ <div class="col s12 m7">
+ <h2 class="header">Horizontal Card</h2>
+ <div class="card horizontal">
+ <div class="card-image">
+ <img src="http://lorempixel.com/100/190/nature/10">
+ </div>
+ <div class="card-stacked">
+ <div class="card-content">
+ <p>I am a very simple card. I am good at containing small bits of information.</p>
+ </div>
+ <div class="card-action">
+ <a href="#">This is a link</a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ I am a very simple card. I am good at containing small bits of information.
+
+ <div class="col s12 m7">
+ <h2 class="header">Horizontal Card</h2>
+ <div class="card horizontal">
+ <div class="card-image">
+ <img src="http://lorempixel.com/100/190/nature/10">
+ </div>
+ <div class="card-stacked">
+ <div class="card-content">
+ <p>I am a very simple card. I am good at containing small bits of information.</p>
+ </div>
+ <div class="card-action">
+ <a href="#">This is a link</a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ I am a very simple card. I am good at containing small bits of information. + I am convenient because I require little markup to use effectively. + Lorem ipsum dolor sit amet, consectetur adipisicing 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. +
+I am a very simple card. I am good at containing small bits of information. + I am convenient because I require little markup to use effectively. + Lorem ipsum dolor sit amet, consectetur adipisicing 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. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. +
+I am a very simple card. I am good at containing small bits of information. + I am convenient because I require little markup to use effectively.
+I am a very simple card. I am good at containing small bits of information. + I am convenient because I require little markup to use effectively.
+I am a very simple card. I am good at containing small bits of information. + I am convenient because I require little markup to use effectively.
+I am a very simple card. I am good at containing small bits of information. + I am convenient because I require little markup to use effectively.
+I am a very simple card. I am good at containing small bits of information. + I am convenient because I require little markup to use effectively.
+I am a very simple card. I am good at containing small bits of information. + I am convenient because I require little markup to use effectively.
+