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
Chicken Fajitas $11.99
Chicken Wings $14.99
<div class="restaurant-menu"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
</div> | |
</div> |
<div class="restaurant-menu"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
</div> | |
</div> |
<div class="restaurant-menu"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
</div> | |
</div> |
With Dots
Chicken Fajitas $11.99
Chicken Wings $14.99
<div class="restaurant-menu with-dot-leaders"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
</div> | |
</div> |
<div class="restaurant-menu with-dot-leaders"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
</div> | |
</div> |
<div class="restaurant-menu with-dot-leaders"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
</div> | |
</div> |
With Description
Chicken Fajitas $11.99
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.
Chicken Wings $14.99
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.
<h3>With Description</h3> | |
<div class="restaurant-menu"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
<h3>With Description</h3> | |
<div class="restaurant-menu"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
<h3>With Description</h3> | |
<div class="restaurant-menu"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
With Dots + Description
Chicken Fajitas $11.99
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.
Chicken Wings $14.99
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.
<div class="restaurant-menu with-dot-leaders"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
<div class="restaurant-menu with-dot-leaders"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
<div class="restaurant-menu with-dot-leaders"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
Additional Styling For Items With Descriptions
With Description
Chicken Fajitas $11.99
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.
Chicken Wings $14.99
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.
<div class="restaurant-menu with-description"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
<div class="restaurant-menu with-description"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
<div class="restaurant-menu with-description"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
With Dots + Description
Chicken Fajitas $11.99
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.
Chicken Wings $14.99
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.
<div class="restaurant-menu with-dot-leaders with-description"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
<div class="restaurant-menu with-dot-leaders with-description"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
<div class="restaurant-menu with-dot-leaders with-description"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Fajitas | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$11.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse. | |
</div> | |
</div> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name"> | |
Chicken Wings | |
</span> | |
<span class="restaurant-menu-item-price"> | |
$14.99 | |
</span> | |
<div class="restaurant-menu-item-description"> | |
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum. | |
</div> | |
</div> | |
</div> |
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
Chicken Wings $14.99
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.
Chicken Fajitas $11.99
<div class="restaurant-menu with-description"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name">Chicken Wings</span> | |
<span class="restaurant-menu-item-price">$14.99</span> | |
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.</div> | |
</div> | |
<div class="restaurant-menu-item with-dot-leaders"> | |
<span class="restaurant-menu-item-name">Chicken Fajitas </span> | |
<span class="restaurant-menu-item-price">$11.99</span> | |
</div> | |
</div> |
<div class="restaurant-menu with-description"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name">Chicken Wings</span> | |
<span class="restaurant-menu-item-price">$14.99</span> | |
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.</div> | |
</div> | |
<div class="restaurant-menu-item with-dot-leaders"> | |
<span class="restaurant-menu-item-name">Chicken Fajitas </span> | |
<span class="restaurant-menu-item-price">$11.99</span> | |
</div> | |
</div> |
<div class="restaurant-menu with-description"> | |
<div class="restaurant-menu-item"> | |
<span class="restaurant-menu-item-name">Chicken Wings</span> | |
<span class="restaurant-menu-item-price">$14.99</span> | |
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.</div> | |
</div> | |
<div class="restaurant-menu-item with-dot-leaders"> | |
<span class="restaurant-menu-item-name">Chicken Fajitas </span> | |
<span class="restaurant-menu-item-price">$11.99</span> | |
</div> | |
</div> |