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-->
Comments
0 comments
Please sign in to leave a comment.