Skip to Main Content

Bento Quattro

Make sure to pair with the card set template "Bento Quattro"

DTSF Bento Stat Cards

$240

Daily Revenue
That's a lot of espresso

12000

People Helped

$1234.00

Widget Revenue

890

Tons of Coffee Trash Removed

243K

This is the smaller headline which gives you a little more room to say too much

Bento Box Stat Card Notes

This block should be paired with the card set template "Stat Cards".

Use the Card Set assigned to the block to change the number of cards displaying in a row (and their size) by adjusting the individual card field "Custom Grid Class". This follows the same logic as our other column classes, where mobile view size is set first (col-12), followed by desktop view (col-lg-#). Multiple cards are in the same row in desktop view if their individual col-lg-#'s add up together to 12 or less. 

This shows two cards in the card set style 'Stat Card'. It shows the individual fields for a card, which includes fields for an image, custom grid class, statistic, larger headline, smaller headline. The top card has a blank field for the custom grid class while the bottom card has a custom grid class field that reads 'col-12 col-lg-6'.
Example view of cards in the card set type "Stat Cards". Note that the top card has an empty custom grid class, while the bottom card has "col-12 col-lg-6" set as the value for its custom grid class.

If no value is set for Custom Grid Class, then the display defaults to a mobile view of 1 card in a row, and desktop view of 3 cards in a row, as you see in the first row of the sample block.

Other custom grid class values combinations you might use include:

  • two cards each set as col-12 col-lg-6 (in desktop view, one card takes up 50% of the row width)
  • one card set as col-12 col-lg-8 and one card set as col-12 col-lg-4
  • three cards each set as col-12 col-lg-4 

Bento Intro

Bento Box Intro Notes

This block should be paired with the card set template "Bento Intro".

  • Review the Bento Box Stat notes on how setting the custom grid class for this card set works. 
  • To achieve the large text effect seen in the "Your Next Adventure Starts Downtown" section,
    • Create its own card in the deck
    • Do not assign a photo to this card.
    • Set the custom grid class to col-12 col-lg-5 order-0 order-lg-3 make-larger

DTSF Pill Button Cards

DTSF Box Cards with Show/Hide

You can vary the height of the boxes by adjusting the standard box class field of height-200. Below, boxes are set to height-400. 

This 7-foot-by-16-foot civic art installation, inspired by Tony Bennett's ballad, “I Left my Heart in San Francisco”, anchors the space culturally and serves as a beautiful backdrop for photographs, a defining symbol of civic pride, and an invitation for everyone to fall in love with downtown all over again.

Fifteen educational plaques, developed in partnership with SFMTA and Market Street Railway, embedded in the plaza tell the rich history and legacy of the California Cable Car lines. 

Playful, branded signage serve as wayfinding guides to nearby cultural attractions and local businesses, encouraging deeper exploration of nearby neighborhoods like Chinatown, North Beach, and the Ferry Building.

Understanding the need for rest in a busy urban environment, we partnered with City Blocks to introduce colorful modular seating (accommodating up to 28 people) that transforms a pass-through into a true gathering space, encouraging dwell time, relaxation, and street-level vibrancy. 

Floral sidewalk graphics compliment the surrounding greenery and add a whimsical touch underfoot, bringing softness and life to the urban space.

The placement of lush standalone planters and integrated seating islands infuses textured greenery, creating a natural sense of enclosure and inviting pedestrians to pause and recharge.

Large Featured Event Header

Use Card Set type "Large Featured Event"