The markup and class structure should look like the following:
restaurant-menu
restaurant-menu-item
restaurant-menu-item-name
restaurant-menu-item-price
restaurant-menu-item-description
(optional)
restaurant-menu-item
restaurant-menu-item-name
restaurant-menu-item-price
restaurant-menu-item-description
(optional)
- ...
Modifiers
Add with-dot-leaders
to display dot leaders for menu items.
Add with-description
to bold the menu item name and italicize the description.
Note: these modifiers can be applied to restaurant-menu
to apply to all menu items in that group
or to restaurant-menu-item
to only apply them to a single menu item.
Standard
With Dots
With Description
With Dots + Description
Additional Styling For Items With Descriptions
With Description
With Dots + Description
Applying Dots To a Single Menu Item
If you want dots on particular menu items and not all items, add the class with-dot-leaders
class to a
restaurant-menu-item
to have dots on that particular menu item.