Custom Blocks
Examples of some of the Custom Blocks
Bento Box Quattro Bento Box Stat Cards Bento Intro Pill Button Cards Simple Nav Cards
News Link Ticker Large Featured Event Events Slider News Link Ticker
Projects Slider
Bento Quattro
Make sure to pair with the card set template "Bento Quattro"
DTSF Bento Stat Cards
$240
12000
$1234.00
890
243K
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.

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 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.
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"
Events By Group
DTSF News Link Ticker HTML
Use a News Links Group to set what content appears with this block.