Knowledge Base
  Login

The Card Template

Below are the templates that we use for card development. Every card that is submitted to the Holos Marketplace must be in the shape set by .card in the standard CSS template. This template is mirrored on the Holos CodePen Template here: http://codepen.io/holos/pen/Mpyvry

Standard HTML Template

<html lang='en'>
    <head>
    <meta charset='UTF-8' />

    //Pull in the Luengo Font
    <link href='https://s3-us-west-2.amazonaws.com/luengo-font/fonts.css' rel='stylesheet' type='text/css'>

    </head>

    <body>

    //Everything must go in this div
    <div class='card'>

        //Your card stuff here

    </div>

    </body>
</html>

Standard CSS Rules


* {
    box-sizing: border-box;
}

//Defines the card shape
.card {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 1400px;
    width: 800px;
    border-style: solid;
    border-width: 10px;
    border-color: white;
    border-radius: 50px;
}

body {
    background-color: transparent;
    font-family: 'Luengo-Bold', sans-serif;
}

//We don't need people in Holos to select text in most cases
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;           /* non-prefixed version */
}

Luengo Font Family

Luengo UltraLight: 'Luengo-UltraLight'
Luengo Light: 'Luengo-Light'
Luengo Regular: 'Luengo-Regular'
Luengo Bold: 'Luengo-Bold'
Luengo Extra Bold: 'Luengo-ExtraBold'
Still need help? Get in touch!
Last updated on 24th Sep 2018