Styling

Spotify branding requirements

Please take the Branding Guidelines by Spotify into account when styling Atmosphere Exposé. These guidelines include, but are not limited to:

• Spotify logo requirements

• Displaying song metadata

• Displaying cover art

Static classes

Once you've completed all the steps described in the getting started pages you should have a functioning exposé visible on your website. The next step is to add the necessary styling (css) to suite your needs. Each element that is rendered by the SDK has a class associated with it. A complete list of all the classes that you can use to style (each part of) each component is as follows:

• .expose-image

• .expose-title

• .expose-description

• .expose-spotify-logo

• .expose-list

• .expose-item

• .expose-item-artist

• .expose-item-title

• .expose-item-time

Dynamic classes

Besides the static classes of the various components mentioned above there is one dynamic class that can be used to style the item that is currently active. When the user clicks on an item or when the player goes to the next song, the .active class is added to the corresponding item. Use .expose-item.active to add your additional styles.