With Link & Photo

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<html>
<head>
</head>
<body>
<div id="app">
            <ul>
                <li v-for="item in items">
                  <a :href="item['fields']['Link']">
    <div class="name">{{ item['fields']['Name'] }}</div>
</a>

    <div :id="item['fields']['Status']">
    
    <div class="title">{{ item['fields']['Title'] }}</div></div>

   
                    
                    <div class="nickname">Nickname:<fill>{{ item['fields']['Nickname']}}</fill></div> 
                    <div class="court">Courts: <fill>{{ item['fields']['Courts'] .join(', ') }}</fill></div>
                    <div class="kingdom">Kingdoms:<fill> {{ item['fields']['Kingdoms'] .join(', ') }}</fill></div>
                    <div class="partner">Partner:<fill>{{ item['id']['Partner']['fields']['Name'] }} </fill></div>
                    <div class="partnertwo">Partner:<fill>{{ item['fields']['Title2']  }} </fill></div>
                       <div class="foto"><div class="photobot">
                       <img :src="item['fields']['Photo'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']" class="foto"></div>
                        <div class="cartoonhov"><img :src="item['fields']['Cartoon'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Cartoon']" class="cartoon"> </div></div>
                    
                </li>
            </ul>            
        </div><!--app-->
</body>
</html>

CSS

#app {
  font-variant: small-caps;
}

#app li {display: inline-block;
width: 250px;
height:300px;
position: relative;
overflow:hidden;
margin: 20px;}

#Locked .title {
  color:#ff0000;
  text-decoration: line-through;
}

#Locked .title::before { 
    content: "locked: ";
    }

#app .name{
  text-align: right;
  border-bottom: 1px #999 solid;
  font-size: 20px;
  width: 250px;
  position: absolute;
  right:0px;
}


#app .foto img{
  height:100px;
  width: 100px;
  object-fit: cover;
  position: absolute;
  top:0px;
  left: 0px;
  z-index:998;
}


#app .cartoonhov {
  display: none;
}

#app .foto:hover .cartoonhov {
  display: block;
}

#app .title {
  position: absolute;
  right: 0px;
  font-weight:100;
  font-size: 12px;
  top: 25px;
}

#app .nickname {
  text-align: left;
  border-bottom: 1px solid #999;
  position: absolute;
  top: 100px;
  left: 0px;
  width:250px;
}

#app .nickname fill {
  text-align: right;
  position: absolute;
  right:0px;
}

#app .court {
  text-align: left;
  border-bottom: 1px solid #999;
  position: absolute;
  top: 120px;
  left: 0px;
  width:250px;
  font-size: 14px;
}

#app .court fill {
  text-align: right;
  font-size: 10px;
}
#app .kingdom {
  text-align: left;
  border-bottom: 1px solid #999;
  position: absolute;
  top: 140px;
  left: 0px;
  width:250px;
  font-size: 14px;
}

#app .kingdom fill {
  line-height:20px;
  right:0px;
  position: absolute;
  font-size: 10px;
}

#app .partner {
  text-align: left;
  border-bottom: 1px solid #999;
  position: absolute;
  top: 160px;
  left: 0px;
  width:250px;
  font-size: 14px;
}

#app .partner fill {
  line-height:20px;
  right:0px;
  position: absolute;
  font-size: 10px;
}

#app .partnertwo {
  text-align: left;
  border-bottom: 1px solid #999;
  position: absolute;
  top: 180px;
  left: 0px;
  width:250px;
  font-size: 14px;
}

#app .partnertwo fill {
  line-height:20px;
  right:0px;
  position: absolute;
  font-size: 10px;
}

JavaScript

var app = new Vue({
                el: '#app',
                data: {
                    items: []
                },

                mounted: function(){
                   this.loadItems(); 
                },
               
                methods: {
                 
                    loadItems: function(){
                    
                        
                        // Init variables
                        var self = this
                        var app_id = "appxvypyRGpQEPiQo";
                        var app_key = "keyR7BRqyzvZhUaKI";
                        this.items = []
axios.get(
                            "https://api.airtable.com/v0/"+app_id+"/Characters?view=Grid%20view",
                            { 
                                headers: { Authorization: "Bearer "+app_key } 
                            }
                        ).then(function(response){
                            self.items = response.data.records
                        }).catch(function(error){
                            console.log(error)
                        })
                    }
                }
            })