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)
- ...
- restaurant-menu-item
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 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.
With Dots
With Description With Dots + Description Additional Styling For Items With DescriptionsWith Description With Dots + Description Applying Dots To a Single Menu ItemIf you want dots on particular menu items and not all items, add the class class to a to have dots on that particular menu item.With Dots