Feed Card Components

Below is a list of commonly used HTML components.

See something you like? Feel free to copy and paste into your card library! 

 

*Note: For easiest implementation, after copy+pasting your feed card content, look out for the bold text to replace. It's that easy!

 

Header Block 

copy+paste below

<!-- THIS IS THE HEADER -->
<div class="primary-bg item item-text-wrap" style= "padding: 8px">
 <h5 class='white strong' style= "letter-spacing: 3px; padding-left: 8px;"></h5>
 <h1 class='white strong' style="letter-spacing: -1.2px; line-height: .95; padding-left: 8px; padding-bottom: 8px;">This is the Header</h1>
 </div>
<!-- THIS IS THE HEADER END -->

 

Header Block 

 

copy+paste below

<!--Header Background-->
<div style=" background-color: white; padding-bottom: 8px;">
<div class=" primary-bg" style="width: 100%; position: relative; ">

<img class="full-image flex" style="opacity: .3;" src="https://fme-feed.s3.amazonaws.com/Winsford_University/Campus_life_3_B1@1x.jpg">


<div style="position: absolute; width: 100%; top: 30%; left: 16px; color: white;">

<h5 style="color: white; font-weight: 700; letter-spacing: 1.7vw; font-size: 3.0vw; text-transform: uppercase; ">DISCOVER winsford</h5>

<h3 style="color: #FFFFFF; font-weight: 700; line-height: 1.1; padding-bottom: 8px; padding-right: 24px; font-size: 5.8vw;">Visit Campus</h3>
</div>
</div>
<!--Header Background-->

 

Body Text

copy+paste below

<!-- THIS IS THE BODY TEXT -->
<div class="item-text-wrap primary" style="padding: 16px">
 <p style="line-height: 2.0; font-size: 1.2rem;">
This is the Body Text. Paste your introductory text here!</p>
 </div>
<!-- THIS IS THE BODY TEXT END -->

 

External Button (linking out to a web address)  

copy+paste below

<!-- THIS IS THE EXTERNAL BUTTON-->
<a class='button button-primary button-full'; href="https://google.com" style="border-radius: 25px;">
 External Link. Edit
</a>
<!-- THIS IS THE EXTERNAL BUTTON END-->

 

Card Content

  

copy+paste below

 <!--CARD-->
<div class="card">
 <div class="item item-text-wrap">
 <h2>headline</h2>
 This is a basic Card which contains an item that has wrapping text.
 <a class="" href="https://www.alliant.edu/csml/">
 Learn more
 </a> </div>
</div>
<!--CARD-->

 

Photo

copy+paste below

<!-- THIS IS THE PHOTO-->
<img src="
https://images.unsplash.com/photo-1535982330050-f1c2fb79ff78?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=63282f4e200080a9a188b9b2200ae7aa&auto=format&fit=crop&w=1267&q=80" width="100%">
<!-- THIS IS THE PHOTO END--> 

 

Contact Details Card 

 

copy+paste below

<!--Contact Card-->
<div style="padding-right: 16px; padding-left:16px;">
<div class="card">
<a class="item item-avatar item-text-wrap" href=" ">
 <img src="https://fme-feed.s3.amazonaws.com/Winsford_University/W-icon_B-400@1x.jpg">
 <h2><b>Counseling Office</b></h2>
<h3>1278 University Blvd. Suite #300</h3>
</a>
<hr style="opacity: .2;">

<div class="row">
 <div class="col text-center">
 <a class="button button-primary button-clear icon ion-email" href="mailto:test@test.com">
 </a>
 </div>
 <div class="col text-center">
 <a class="button button-primary button-clear icon ion-android-call" href="tel:5555555555">
 </a>
 </div>
 </div>
</div>
<!--Contact Card-->

 

Message Admissions Button

copy+paste below

<p style=" text-align: center; color:gray;">Need help now? Chat with an admissions advisor.
</p>
<!-- THIS IS THE INTERNAL BUTTON-->
<a class='button button-primary button-block button-outline' ui-sref="advisors">Message Admissions</a>
<!-- THIS IS THE INTERNAL BUTTON END-->