Source: assets/src/css/6-layout/_6-readme.scss, line 1
Specific parts of the page layout made up of other components. Let's keep this very limited
to just a few high level layout items (e.g. header, footer, article, container, and specific
on-off page templates like search). Namespace these classes with l-. Use BEM syntax.
Source: assets/src/css/6-layout/_l-article.scss, line 1
Handles the general layout of the article page
Source: assets/src/css/6-layout/_l-article--featured.scss, line 1
@define l-article Handles the custom featured layout of the article page
Source: assets/src/css/6-layout/_l-article--issues.scss, line 1
@define l-article Handles the custom layout of the article Issues template
Source: assets/src/css/6-layout/longform/article.scss, line 1
Handles the custom longform layout of the article page
Source: assets/src/css/6-layout/_l-container.scss, line 1
The wrapper for the entire site. Applies a white background.
Source: assets/src/css/6-layout/_l-content.scss, line 1
The wrapper for the main content area.
Source: assets/src/css/6-layout/dark/_l-content--darkMode.scss, line 6
The wrapper for the main content area
Source: assets/src/css/6-layout/_l-editorsPicks.scss, line 1
Glide.js carousel of curated posts
Source: assets/src/css/6-layout/_l-featuredCarousel.scss, line 1
Glide.js carousel of post images along with a selector list of headlines overlaid.
Source: assets/src/css/6-layout/_l-guests.scss, line 1
Used on program pages
Source: assets/src/css/6-layout/_l-header.scss, line 6
Styles for the site header, which is just the blue bar up top not including any navigation.
Source: assets/src/css/6-layout/dark/_l-header--darkMode.scss, line 6
Source: assets/src/css/6-layout/_l-headerAd.scss, line 1
Styling for the header leaderboard ad that appears directly below the navigation.
Source: assets/src/css/6-layout/dark/_l-headerAd--darkMode.scss, line 6
Styling for the header leaderboard ad that appears directly below the navigation.
Source: assets/src/css/6-layout/_l-headerBanner.scss, line 1
The banner is used on Issues template
Source: assets/src/css/6-layout/_l-highImpact.scss, line 1
Styling for top stories' high impact mode
Source: assets/src/css/6-layout/_l-inlineStories.scss, line 1
Source: assets/src/css/6-layout/interactive/article.scss, line 1
Handles the interactive layout of the article page
Source: assets/src/css/6-layout/_l-main.scss, line 1
This section specifies the grid for the article and sidebar.
Source: assets/src/css/6-layout/_l-main--featured.scss, line 1
@define l-main This section specifies custom featured treatment for the article and sidebar.
Source: assets/src/css/6-layout/_l-main--interactive.scss, line 1
@define l-main This section specifies custom interactive treatment
Source: assets/src/css/6-layout/_l-main--issues.scss, line 1
@define l-main This section specifies custom treatment for the article and sidebar on Issues template.
Source: assets/src/css/6-layout/_l-main--longform.scss, line 1
@define l-main This section specifies custom longform treatment
Source: assets/src/css/6-layout/_l-main--results.scss, line 1
@define l-main This section specifies custom featured treatment for the article and sidebar.
Source: assets/src/css/6-layout/_l-notification.scss, line 1
Styles the onsite notification banners used for breaking news and live content.
when there is a notification item in place
l-notification--active
when there is notification is hiding
l-notification--hiding
Source: assets/src/css/6-layout/_l-offline.scss, line 1
Basic styles for the offline page
Source: assets/src/css/6-layout/_l-overflow.scss, line 1
Used in conjunction with MenuOverflow.js. JS will add an arrow if the overflow list is longer than the page width. User can click the arrow to reveal the rest of the menu.
Source: assets/src/css/6-layout/_l-panel.scss, line 1
A generic dropdown menu that can be customized for specific submenu navigations.
Source: assets/src/css/6-layout/_l-panel--comments.scss, line 6
This panel contains Facebook Comments section. It behaves like regular submenu panel on mobile, and slides out from the right on larger screen sizes
Source: assets/src/css/6-layout/_l-panel--events.scss, line 6
These styles are for events Type filter and Calendar filter
Source: assets/src/css/6-layout/_l-panel--interactive.scss, line 6
This panel contains the full list of social share buttons. It can be toggled by clicking the "+" button next to a list of social links. Social links appear in the article above the byline, and in the navigation after the user has scrolled a certain distance down the page.
Source: assets/src/css/6-layout/_l-panel--local.scss, line 6
Panel that appears when the user toggles the "Local" dropdown menu to change regions
Source: assets/src/css/6-layout/_l-panel--more.scss, line 6
This is the main menu panel that appears when the user clicks the hamburger icon in the navigation.
Source: assets/src/css/6-layout/_l-panel--noSidebar.scss, line 6
Panel width is set with css on templates without a sidebar Example: Longform and Issues
Source: assets/src/css/6-layout/_l-panel--search.scss, line 6
This panel contains the search bar as well as trending content and, eventually, top search terms.
Source: assets/src/css/6-layout/_l-playlist.scss, line 1
Source: assets/src/css/6-layout/_l-popup.scss, line 1
Styling of modal dialog boxes, such as the report an error popup on article pages.
Source: assets/src/css/6-layout/_l-programHero.scss, line 1
Styling of program hero section which contains host image, logo and latest video
Source: assets/src/css/6-layout/_l-radioCarousel.scss, line 1
Displays Radio Carousel on radio station home pages
Source: assets/src/css/6-layout/_l-section.scss, line 1
Sections are the basic building blocks for content on the home and archive pages. They contain a main content area and a sidebar. The main content area has several different layout options.
Source: assets/src/css/6-layout/_l-section--dark.scss, line 6
Used on video section on homepages and videoHub
Source: assets/src/css/6-layout/_l-sidebar.scss, line 1
Styles for the right rail on article pages.
Source: assets/src/css/6-layout/_l-stream.scss, line 1
Layout for pages with article stream (ex. /trending, /latest ).
Source: assets/src/css/6-layout/_l-topics.scss, line 1
This section contains a list of topic-based story widgets (e.g. Entertainement, Politics, Health).
The styles here are for the container, individual topic based story widgets are styled with c-posts--gridList.
Source: assets/src/css/6-layout/_l-videoCarousel.scss, line 1
Glide.js carousel of videos thumbnails along with a player on top. When a user clicks the thumbnail the video will start playing in the player area above.
Source: assets/src/css/6-layout/_l-videoCarousel--standalone.scss, line 6
Curated video carousel that appears on the home page or archive pages.
Source: assets/src/css/6-layout/_l-videoHub.scss, line 1
@define l-videoHub Handles the layout of the video hub