Custom cards examples

Discover custom cards examples with pre-made HTML codes

Contact details

HTML code

<style>
    body {
        padding: 0 10px;
        background: linear-gradient(90deg, #232956, #28357C);
    }

    #logo {
        display: block;
        margin: 24px auto;
        width: 50%;
    }

    .text {
        color: white;
        display: inline-block;
        font-family: Helvetica, sans-serif;
        vertical-align: top;
        font-size: 12px;
        padding-bottom: 14px;
        text-decoration: none;
    }

    .icon {
        display: inline-block;
        width: 16px;
        padding: 0 6px;
    }
</style>  

<a href="https://deviniti.com" target="_blank">
    <img id="logo" src="https://deviniti.com/app/uploads/2022/01/logo-footer.svg" alt="logo">
</a>
<div>
    
    <div class="text">
        153 Sudecka Street<br>
        53-128 Wrocław<br>
        Poland
    </div>
</div>
<div>
    
    <div class="text">
        +48 577 075 727
    </div>
</div>
<div>
    
    <a href="mailto:deviniti@deviniti.com" class="text">
        deviniti@deviniti.com
    </a>
</div>

Result

Links to other resources

HTML code

<style>
    body {
        margin: 0;
        border-left: 40px solid #28357C;
        height: 100vh;
    }

    #content {
        padding: 0 48px 0 24px;
        font-family: Helvetica, sans-serif;
    }

    #title {
        color: #ff4b1f;
        font-weight: bold;
        padding: 16px 0;
    }

    hr {
        margin: 0;
        border: none;
        border-top: 1px solid #dadada;
    }

    .article {
        position: relative;
        margin: 8px 0;
        font-size: 12px;
    }

    .icon {
        position: absolute;
        right: -36px;
        top: 8px;
    }

    #more {
        padding: 8px 0;
        font-size: 12px;
        font-weight: bold;
        text-align: right;
        color: #ff4b1f;
    }

    a {
        color: inherit;
        text-decoration: inherit;
        display: block;
    }
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="content">
    <div id="title">Latest updates</div>
    <hr>
    <a class="article" href="https://deviniti.com/blog/category/news/" target="_blank">
        <b>Deviniti news</b><br>
        Check out our latest solutions and achievements! Read about...
        
    </a>
    <hr>
    <a class="article" href="https://deviniti.com/blog/category/application-lifecycle-management/" target="_blank">
        <article>
            <b>Application lifecycle management</b><br>
            Develop your knowledge about application lifecycle management and learn...
        </article>
        
    </a>
    <div id="more">
        <a href="https://deviniti.com/blog/" target="_blank">Read more</a>
    </div>
</div>

Result

Links to social media

HTML code

   <style>
       body {
           margin: 0px;
           padding: 24px;
           background: linear-gradient(90deg, #232956, #28357C);
           text-align: center;
       }
   
       .text {
           padding: 24px 0 32px 0;
           color: white;
           font-family: Helvetica, sans-serif;
           font-size: 13px;
       }
   
       .icon {
           display: inline-flex;
           height: 20px;
           width: 40px;
           filter: brightness(10) saturate(0);
       }
   </style>
   <a href="https://deviniti.com/" target="_blank">
       <img src="https://deviniti.com/app/uploads/2022/01/logo-footer.svg" width="50%" alt="logo">
   </a>
   <div class="text">
       Check out our official Social Media channels:
   </div>
   <a href="https://www.facebook.com/DevinitiPL/" target="_blank">
       <img src="https://deviniti.com/app/themes/like-theme/assets/images/icons/facebook-color.svg" class="icon" width="50%" alt="facebook icon">
   </a>
   <a href="https://www.instagram.com/deviniti_aboutus/" target="_blank">
       <img src="https://deviniti.com/app/themes/like-theme/assets/images/icons/instagram.svg" class="icon" width="50%" alt="instagram icon">
   </a>
   <a href="https://www.linkedin.com/company/deviniti/" target="_blank">
       <img src="https://deviniti.com/app/themes/like-theme/assets/images/icons/linkedin-color.svg" class="icon" width="50%" alt="linkedin icon">
   </a>
    <a href="https://twitter.com/deviniti_voice" target="_blank">
       <img src="https://deviniti.com/app/themes/like-theme/assets/images/icons/twitter-color.svg" class="icon" width="50%" alt="twitter icon">
   </a>
   <a href="https://www.youtube.com/channel/UCfwVwy42UK5bC2k_14bR5Gw" target="_blank">
       <img src="https://deviniti.com/app/themes/like-theme/assets/images/icons/youtube-color.svg" class="icon" width="50%" alt="youtube icon">
   </a>
  

Result

Template with single link

<style>
 body {
 margin: 0;
padding: 8px;
 }
 a {
 display: block;
 width: 100%;
 height: 100vh;
 text-decoration: none;
}
</style>
<a href="http://deviniti.com/" target="_blank">
 your_card_content_here
</a>