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 @@

Image Card

+
+
+ +
+

Horizontal Card

+
+
+ +
+
+
+

I am a very simple card. I am good at containing small bits of information.

+
+ +
+
+
+
+



+

+ Here is the standard card with a horizontal image. +

+
+
+
+

+  <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>
+            
+
+
+
+
+
@@ -460,6 +510,7 @@

Card Panel

+
+
+ +
+

Horizontal Card

+
+
+ +
+
+
+

I am a very simple card. I am good at containing small bits of information.

+
+ +
+
+
+
+



+

+ Here is the standard card with a horizontal image. +

+
+
+
+

+  <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>
+            
+
+
+
+
+
@@ -349,6 +399,7 @@

Card Panel

+
+

Card Sizes

+
+
+
+ Card Title +

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. +

+
+ +
+
+
+
+
+ Card Title +

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. +

+
+
+
+
+ +
+

Horizontal Card

+
+
+
+ +
+
+
+ Card Title +

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.

+
+ +
+
+
+ +
+
+
+
+ Card Title +

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.

+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+ Card Title +

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.

+
+
+
+
+ +
+
+
+
+ Card Title +

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.

+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ Card Title +

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.

+
+ +
+
+
+ +
+
+
+
+ Card Title +

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.

+
+ +
+
+ +
+
+
+
+ + +