function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sfdc_beginner7sfdc_beginner7 

How to make a lightning component to have a look and feel like a single related list ?

My requirement is to show all the cases related to parent object 'MTO' on case except the one case which is open .Ex there are 5 cases on MTO if I open 1 case then I should see other 4 cases on case related list. I have created lightning component .But the look and feel is not like related list .
Currently my lightning component is looking like this 
User-added image
also the view all button is not clickable .How can I show sandard view all button functionality?
But I want it to be look like this 
User-added image
 
sfdc_beginner7sfdc_beginner7
Below is my code
<article class="slds-card">
    <div class="slds-box slds-box_xx-small" style="padding:1Rem;">
     <div class="slds-card__header slds-grid"> 
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-case" title="Related Case">
<lightning:icon  iconName="standard:case" size="small" alternativeText="sss"/>
<span class="slds-assistive-text">Related case</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Related case">
<span class="slds-text-heading_small">Related case</span>
</a>
</h2>
</div>
</header>
        </div>
    </div>
    <div class="slds-box slds-box_xx-small" style="padding:1Rem;">
        <table class="slds-table slds-table_fixed-layout slds-table_bordered slds-no-row-hover slds-table_cell-buffer">
<div class="slds-card__body slds-card__body_inner">
    <span class="slds-section__title">Case Number</span>
        </div>
        </table>
       <!--  <div class="slds-box slds-box_xx-small" style="padding:1Rem;">-->
    <aura:iteration items="{!v.CaseRelatedList}" var="case">
                        <tr>
                            <a href="{!'https://.force.com/lightning/r/Case/'+ case.Id + '/view?0.source=alohaHeader'}" target="_blank">{!case.CaseNumber}
                            </a>
                   
                           </tr>
                    </aura:iteration>
    <!--</div>-->
    </div>
    <div class="slds-box slds-box_xx-small">
<footer class="slds-card__footer">
<a class="slds-card__footer-action" href="javascript:void(0);">View All
<span class="slds-assistive-text">Related case</span>
</a>
</footer>
    </div>
</article>