Pugpig Bolt features a range of cards that form the content of your timelines. Some will be used more commonly than others, but all are available out of the box. As well as any automated content workflows you may have, all card types can be added via your Pugpig Express site. When you hover over 'Content' you'll see the list of card types available to you. When you click into any of the card types, you'll then be able to see all existing cards of that type, which you can filter by date or collection tag. You'll also have the option, at the top of the page, to create a new card of that type.

If any are missing, reach out to Pugpig Support team and we'll add them for you. 

Card types

Article cards

Article cards are the standard, and most common, timeline cards, used to deliver content to your users. When tapped they load an article which can contain various combinations of text, images, video, audio and other HTML content. 

Audio cards

Audio cards provide a way for you to add audio content to your timeline, which plays using our audio player on iOS and Android and the native HTML5 audio player on web. Tapping on an audio card will bring up the audio context menu, allowing users to decide what they'd like to do with the track and they can continue to browse the app as it plays in the background.

Carousel cards

Carousel cards feature several cards in a horizontally-navigable layout. It can include any type of card which can be swiped between and tapped on, as normal.

Event cards

Event cards allow you to highlight upcoming events with information about date, time and location. Events can be added to users' calendars, or include a link to find out more elsewhere.

Explore cards

Explore cards work by adding link cards to your timeline. When tapped on, they direct users to dynamically generated timelines, curated by specifically chosen sections.

Google Ad cards

Google ad cards allow you to insert medium rectangle (MREC) or mid-page unit (MPU) ads into your timeline, between other cards. 

Header cards

Header cards insert a text heading in between or above other cards in the Timeline. These can be inserted manually, or configured to automatically appear based on certain rules.

Iframe cards

Iframe (inline frame) cards embed HTML pages into your timeline within a card.

Inline HTML cards

Inline HTML cards allow you to put your own HTML content into your timeline. They're similar to iframe cards, but instead of a whole page, they show specifically written HTML.

Image cards

Image cards are used to display an inline image on the timeline.

Link cards

Link cards link elsewhere when tapped on. These can either be outside of the app to any URL of your choosing, or within the app to a piece of content, another tab or any other screen.

Quote cards

Quote cards can be used to highlight a quote that you'd like to display on your timeline.

Search cards

Search cards provide another method for the search function of the app to be accessed. A search card will appear as a small search bar on any timeline of your choosing and will then load results in a dynamically generated timeline.

Social cards

Social cards provide the ability to embed social media cards within your timeline. Currently our only supported provider is Twitter.

Video cards

Video cards display videos from our supported providers (YouTube, Vimeo, Brightcove, JW Player). When a user taps the card, the video video will begin playing in-line within the timeline.

Card customisation

Card layout

Timeline cards offer a number of layout options for how they appear together in the timeline. Out of the box we support the ability to set one rule for the top card in the timeline and another rule for the rest. Additionally specific cards can be overridden manually, or via a feed. These mainly apply to timeline cards. Most media-focused cards always use the ‘Image large’ layout. 

Further curation is possible via custom development if required.

Card contents

What is displayed on each card is driven by its contents. Different cards have different options and you can see exactly what on the respective card type articles, but in general they can display:

• Section or flash
• Title
• Kicker
• Summary
• Main image
• Author

Most cards feature the Card Action Bar (CAB) at the bottom of the card which, by default, includes:

1. Published date
2. Estimated read time, if enabled
3. Text to speech or audio button, if applicable
4. Save and share buttons

Those that don't include; Latest, Carousel, Search and Header.

Card styling

In addition to the layout you do have some control over the look and feel of these cards.

We are able to change:

• Card text colour (any text above the CAB)
• CAB text colour (any text within the CAB)
• Read opacity (If a card has been read, how much should it fade)
• Border colour (The, by default invisible, line between the card body and the CAB)
• Background colour

If you're looking to add customisation and functionality over-and-above, or instead of that offered by our standard cards, we offer two further levels of customisation. Both of these will be undertaken by our professional services team, and are billed on a time and materials basis.

1. Custom styling: this allows greater flexibility over the styling of any of the cards mentioned above.
2. Custom cards: larger projects may involve creating specific card types just for you if the available ones don't suit the requirements.

Card configuration

All card configuration is done on your Express CMS site. Any information displayed on the card will be taken from your content as specified. Usually any curation or styling rules will be set up before going live, by our support and development teams, so you shouldn't need to know too much about how to change them. But if you're curious or want to adjust anything yourself, then feel free to take a look at the above linked card type articles.