• Open
• Working
• Close

BoatTile.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
	
    <aura:attribute name="boat" type="Boat__c" default="{
                                                        'sObjectType' : 'Boat__c',
                                                        'Name' : '',
                                                        'Picture__c' : '',
                                                        'Contact__c' : ''
                                                        }"/>
    
    <aura:registerEvent name="selectedBoat" type="c:BoatSelect" />
    
    <lightning:button class="tile" >
    	<div style="{!'background-image:url(\'' + v.boat.Picture__c + '\'); '}" class="innerTile">
        	<div class="lower-third">
            	<h1 class="slds-truncate">{!v.boat.Contact__r.LastName}</h1>
            </div>
        </div>
    </lightning:button>
</aura:component>


BoatTile.css

.THIS.tile {
    position:relative;
    display: inline-block;
    width: 100%;
    height: 220px;
    padding: 1px !important;
}
.THIS .innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

<apex:page standardController="Contact" recordSetVar="contacts"  lightningStylesheets="true">
    <apex:pageBlock title="Contacts List">

        <!-- Contacts List -->
        <apex:pageBlockTable cellpadding="1000px" value="{! contacts }" var="ct">
            <apex:column value="{! ct.FirstName }"/>
            <apex:column value="{! ct.LastName }"/>
            <apex:column value="{! ct.Email }"/>
            <apex:column value="{! ct.Account.Name }"/>
        </apex:pageBlockTable>
        
    </apex:pageBlock>
</apex:page>