You can adding the class valign-wrapper
to the container holding the items you want to vertically align.
<div class="row">
<div class="card-panel brown valign-wrapper">
<h5 class="white-text">This is vertical alignement</h5>
</div>
</div>
Text alignment classes are : .left-align
, .center-align
, .right-align
.
<div class="row">
<div class="card-panel cyan">
<h5 class="left-align">left aligned</h5>
</div>
<div class="card-panel cyan">
<h5 class="center-align">Center aligned</h5>
</div>
<div class="card-panel cyan">
<h5 class="right-align">Right aligned</h5>
</div>
</div>
hide/show content utility classes on specific screen sizes in following table.
Class | Screen Range |
---|---|
.hide |
Hidden for all Devices |
.hide-on-small-only |
Hidden for Mobile Only |
.hide-on-med-only |
Hidden for Tablet Only |
.hide-on-med-and-down |
Hidden for Tablet and Below |
.hide-on-med-and-up |
Hidden for Tablet and Above |
.hide-on-large-only |
Hidden for Desktop Only |
.show-on-small |
Show for Mobile Only |
.show-on-medium |
Show for Tablet Only |
.show-on-large |
Show for Desktop Only |
.show-on-medium-and-up |
Show for Tablet and Above |
.show-on-medium-and-down |
Show for Tablet and Below |
<div class="row hide-on-small-only">
<div class="card-panel amber">
<h5 class="center-align">Hide Only Small Screens</h5>
</div>
</div>
To truncate
long lines of text in an ellipsis, add the .truncate
class to the tag which contains the text. See an example below of a header being truncated inside a card.
<div class="row">
<div class="col s12 m6 l4 offset-m3 offset-l4">
<div class="card-panel blue white-text">
<!-- Start truncate class -->
<h4 class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
<!-- End truncate class -->
</div>
</div>
</div>
The hoverable is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.
<div class="container">
<div class="card-panel hoverable orange center-align">
<img src="../images/Free-Time-Learning.png" class="responsive-img" alt="F T L">
<h5 class="white-text">www.freetimelearning.com</h5>
</div>
</div>