Card examples and markup

Instructions

Below are all the PRL card options. See the source html to copy the code. Use the bootstrap grid to restrict card size. Another option is to download the PRL card markup.

 

Basic card

cyano bloom

Card Title

The information falls here. Be brief and avoid extraneous information.

Action 1 Action 2

 

Basic card without image

Card Title

The information falls here. Be brief and avoid extraneous information.

Action 1 Action 2

 

Card without image and with bottom border

Card With Bottom Border

The information falls here. Be brief and avoid extraneous information.

Action 1 Action 2

 

Card with image and bottom border

cyano bloom

Card With Bottom Border

The information falls here. Be brief and avoid extraneous information.

Action 1 Action 2

 

Card with image and title overlay, summary content and button

cyano bloom

Card Title

The information falls here. Be brief and avoid extraneous information.

Action 1 Action 2

 

Card with image and text overlay only

cyano bloom

Card Title

Optional text can go here too

Action 1

 

Card with image, title overlay, and summary content, without button

cyano bloom

Card Title

Related Story: This is the summary of the story

Action 1

 

Small borderless card

cyano bloom

Card Title

Link here.