[SalesForce] Lightning listbox selection styling

In the developer docs they have a really cool Listbox-looking thing where you select an item (with nice hover effects and everything) and then it changes the content of several other components.
For example: https://developer.salesforce.com/docs/component-library/bundle/lightning:tile/example#lightningcomponentdemo:exampleTile
You can select a different example and it changes the card next to the content and the card with the code in it below.
That is exactly what I need. How do I implement that?
I have a component displaying a list of items to select, and another component that displays details based on what is selected. The first fires an event that the other listens to and updates its data accordingly.
My question is more about styling. How do I get the first component's list to look like the list in the docs?
So here's my markup:

<ul>
    <aura:iteration items="{!v.itemsArray}" var="item">
        <li class="slds-item">
            <lightning:tile>
                <p class="slds-text-heading--medium slds-p-horizontal--medium" onclick="{!c.itemClicked}">
                {!item.Name}
                </p>
            </lightning:tile>
        </li>
    </aura:iteration>
</ul>

The itemClicked function in the controller fires an event that the other components are listening for.
But I want to style it like that listbox thing. I could do it myself, it's probably nothing more than

.my-clicky-class{
    cursor:pointer;
}
.my-clicky-class:hover{
    background-color: #ccccc
}

But I'd rather use the build-in slds classes.