menu
Components / Cards
  • About
  • Contact
  • Legal information

Cards

A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
sub-title

Styled title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... 

<!-- Simple card -->
<mdl-card mdl-shadow="@MdlShadows.Dp2">
    <mdl-card-title title-size="@MdlCardTitleSize.H2" expand="true" title="Card title" ></mdl-card-title>
    <mdl-card-supporting-text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </mdl-card-supporting-text>
    <mdl-card-title subtitle="sub-title" ></mdl-card-title>
</mdl-card>
                
                
<!-- Title styled card -->        
<mdl-card mdl-shadow="@MdlShadows.Dp2">
    <mdl-card-title title-size="@MdlCardTitleSize.H2" expand="true" 
        title="Styled title" 
        style="color: #fff; height: 170px; background: url('/images/11874722676_6450fcb8ba_b.jpg') center/cover;"> 
    </mdl-card-title> 
    <mdl-card-supporting-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... 
    </mdl-card-supporting-text> 
</mdl-card>
    


<!-- full card image --> 
<mdl-card mdl-shadow="mdl-shadow--2dp"> 
    <mdl-card-media src="/images/Supercars.jpg" width="100%">
    </mdl-card-media> 
</mdl-card>
Image Card

Asia

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<!-- image and subtitle --> 
<mdl-card mdl-shadow="@MdlShadows.Dp2"> 
    <mdl-card-media src="/images/13818125963_5a67445be7_b.jpg" width="100%">
    </mdl-card-media> 
    <mdl-card-title title-size="@MdlCardTitleSize.H2" expand="true" subtitle="Image Card">
    </mdl-card-title> 
</mdl-card>
                
<!-- Title, image and text -->         
<mdl-card mdl-shadow="@MdlShadows.Dp2">
    <mdl-card-title title-size="@MdlCardTitleSize.H2" expand="true" title="Asia"></mdl-card-title>
    <mdl-card-media src="/images/13328697884_d57586dfe4_b.jpg" width="100%"></mdl-card-media>
    <mdl-card-supporting-text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </mdl-card-supporting-text>
</mdl-card>

GitHub

facebook

Windows id

Amazon


<!-- image in colored background --> 
<mdl-card mdl-shadow="@MdlShadows.Dp2">
    <mdl-card-title title-size="@MdlCardTitleSize.H2" expand="true" title="GitHub"></mdl-card-title>
    <mdl-card-media mdl-bgcolor="@MDLColors.Grey.WithBritghness800" src="/images/github_white_24.svg" 
                border="0" alt="" width="40%" style="padding:5%; position: relative;left:25%">
    </mdl-card-media>
</mdl-card>

Card with actions

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button One Button Two

Card with stacked actions

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button One
Button Two

Card with actions on right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button One

Card with icon actions

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card with actions

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action
The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.
Get Started


Auckland Sky Tower
Auckland, New Zealand

The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.
Wikipedia entry


Auckland Sky Tower, taken March 24th, 2014
The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.


Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
Get Started


Update

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
View Updates


Image.jpg


Featured event:
May 24, 2016
7-11pm

Add to Calendar
event