Markup

Let's take a look at the markup of a section component, rendered by the LiSA Library.

To keep it simple we're using the first section from the Appearance example, which is uses the list layout for all shows that are currently live. In our example only one show is currently live.

Section markup

This example is based on the following markup:

<div class="lisa__section lisa__section--live lisa__section--list">
    <div class="lisa__section-title">Currently live</div>
    <ul class="lisa__section-listing">
        <li class="lisa__show lisa__show--portrait"
            data-lisa-show-id="e6e2390d-4339-4235-84df-72a7b4f5b16a" 
            id="lisa-show-e6e2390d-4339-4235-84df-72a7b4f5b16a">
            <div class="lisa__show-assets">
                <div class="lisa__show-asset lisa__show-asset--portrait">
                    <img class="lisa__show-asset--lazy" 
                         data-src="https://img.lisa-cdn.net/i/83ffb51a-b493-42d1-985d-2fb4d83abbc3.png" 
                         src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                         alt="15 Min Meals Masterclass">
                    <noscript>
                        <img src="https://img.lisa-cdn.net/i/83ffb51a-b493-42d1-985d-2fb4d83abbc3.png"
                             alt="15 Min Meals Masterclass">
                    </noscript>
                </div>
            </div>
            <div class="lisa__show-data">
                <span class="lisa__show-tag">
                    <span>LIVE</span>
                </span>
                <div class="lisa__show-avatars">
                    <div class="lisa__show-avatar">
                        <img src="https://img.lisa-cdn.net/i/55b38604-d11a-4a07-9989-641298181b89.png" 
                             alt="LiSA">
                    </div>
                </div>
                <strong class="lisa__show-title">15 Min Meals Masterclass</strong>
                <div class="lisa__show-description">
                    <p>Watch best selling cookbook author Dave cook a super tasty simple noodle dish that's packed with flavour.</p>
                </div>
                <span class="lisa__show-date">June 08, 19:00</span>
            </div>
            <a class="lisa__show-cta-play">
                <svg>
                    <circle cx="41" cy="41" r="40"></circle>
                    <polygon points="32,25 32,58 60,42"></polygon>
                </svg>
            </a>
        </div>
    </div>
</div>

Block, Element, Modifier

LiSA Library uses BEM notation for its markup to achieve reusable and customisable components.

The listing below provides an overview of all relevant class names:

Class name	Description
lisa__library-host-node	This class name gets added to your library host node's list of class names.
lisa__section	A library section component.
lisa__section-title	A library section title element.
lisa__section-listing	A library section item listing component containing all library items.
lisa__show	A show component containing all elements that compose a show library item.
lisa__show-assets	A component containing one or multiple media assets such as cover image or preview video.
lisa__show-asset	A show asset component containing a single media asset.
lisa__show-data	A show data component containing all relevant information of a show.
lisa__show-tag	A component indicating the show state, e.g. live.
lisa__show-avatars	A component containing show host avatar(s).
lisa__show-avatar	A component to display a single show host avatar.
lisa__show-title	A component to display a show's title.
lisa__show-description	A component to display a show description.
lisa__show-date	A component to display a show date.
lisa__show-cta-play	A component to display a call to action, used to launch a show.

Each of these components come with certain CSS properties and values to render the respective layout. Customisations to better fit your corporate design is easily done either by overwriting the existing CSS properties or by providing custom values for the available CSS Variables .

Component variations

Depending on your choice of layout (grid, list or slider), asset format (portrait or landscape) and/or show state certain components will be enriched with modifier class names:

Component	Modifiers	Description
lisa__section	--live --pre-show --replay	Library section of show that are either currently live, upcoming or recorded.
lisa__section	--grid --list --slider	Library section using either grid, list or slider layout.
lisa__show	--landscape --portrait	Library show item using asset in either landscape or portrait format.
lisa__show-asset	--landscape --portrait	Asset of a show item either in landscape or portrait format.

Host node class name

LiSA library layouts implement a Responsive design . To ensure all library components being perfectly aligned on all devices, the list of class names of the host node you provide with the configuration is extended with breakpoint marker class names:

lisa__library-host-node--gte-576 lisa__library-host-node--gte-864 lisa__library-host-node--gte-1152 lisa__library-host-node--gte-1140

In case you need different breakpoints, you can provide them with the LiSA Library configuration.