News and Events

News stories and events: the news grid, event lists, events from events.cmu.edu, and date blocks and event cards.

News Grid Template

A grid of linked stories, each with a picture, a date, a title and a sentence. After the first batch, the rest wait behind a Load More button. In Cascade, a news index writes all of this; the markup is here for apps and for knowing the parts.

• The picture is the background of a div.img, cropped to fill the space, so any shape works.
• Load More is the template's: put a .section-id around the grid and mark the items to hold back hide, with the picture in data-img so it loads only when shown. Each click shows 12 more. Try it below: three more are hidden. In an app, use the kit's Load More.
• Add a color (grey, darkgrey, and so on) to put the stories in white boxes on that color, and plaid or globe for a pattern behind them. This one is grey plaid. See Colors and Background Patterns.

section-id, grid column3 news, grey, plaid, filterable, img, hide, loadmore

Event List Template

A short list of dates, each with a month-and-day block beside it, as in the Information Security Office's sidebar. Each item is a link whose first span holds the month (in its own span) and the day; the whole row is the link. For an item with nothing to link to, use <i> instead of <a>. It fits a sidebar box; add simple for no gray.

events

Events From events.cmu.edu Template

CMU's events calendar, events.cmu.edu, gives any page a live list of upcoming events. Its widgets bring their own styles: a list with a month-and-day block beside each event, or tiles with a photo and the date over its corner. The widget is set up on events.cmu.edu, which gives it a number; the page needs only two lines:

<div class="lwcw" data-options="id=24&amp;format=html"></div>
<script id="lw_lwcw" src="//events.cmu.edu/livewhale/theme/core/scripts/lwcw.js"></script>

• Put it in a grid box or a sidebar box with a heading, and end with a call to action that links to the full calendar, such as “View the Full Student Affairs Calendar.”
• Ask your calendar's events.cmu.edu administrator for a widget; they choose which events it shows and how many.
• For dates you list yourself, such as deadlines, use the template's event list, or the kit's date blocks, which match the widget's look.

Date Blocks and Event Cards CMS

From the kit (cmu-cms.css), unlike the rest of this page: the template has no date block that stands on its own or sits over a photo.

A month-and-day block in the style of the events.cmu.edu widgets, for a date that stands on its own or sits over a photo. For a list of dates, use the template's event list; for a calendar of events, embed its events.cmu.edu widget. Use a <time> with a datetime so the full date is in the markup, and add cmu-date--red for a red month.

cmu-date, cmu-date-month, cmu-date-day, cmu-date--red

Event cards put the date over the corner of a photo, with a red rule under it. Use photos of the same shape; the kit crops them to 3:2.

cmu-event-cards, cmu-date--red