Home Reference Components Demo Source code

Complex components

1. Button

Markdown Syntax:

[*Transparent*](https://base.finance)
[**Solid color**](https://base.finance)

Result:

Transparent Solid color

2. Top bar

Markdown Syntax:

[![BF logo](icon-36.png "Logo")](https://github.com/bndp/beautiful-markdown)
[*Home*](https://github.com/bndp/beautiful-markdown)
[*Reference*](reference)
[*Components*](components)
[*Demo*](.)
[*Source code*](source)

---

Result:

Home Reference Components Demo Source code

3. Menu

Markdown Syntax:

> [*Home*](https://github.com/bndp/beautiful-markdown)
> [*Reference*](reference)
> [*Components*](components)
> [*Demo*](/beautiful-markdown)
> [*Source code*](source)

Result:

Home Reference Components Demo Source code

4. Card

Markdown Syntax:

> ##### Yorkshire Terrier
> by Wikipedia
>
> ![Yorkshire Terrier](https://live.staticflickr.com/2129/2451023350_9ed36c934e_b.jpg)
>
> The Yorkshire Terrier (often shortened as Yorkie) is one of the smallest dog breed of terrier type, and of any dog breed.
>
> [*Read*](https://en.wikipedia.org/wiki/Yorkshire_Terrier)
> [*More*](https://en.wikipedia.org/wiki/Yorkshire_Terrier#Description)

> ##### More info
>
> Subscribe to our newsletter and stay up-to-date.
>
> [**Subscribe**](#)

Result:

Yorkshire Terrier

by Wikipedia

The Yorkshire Terrier (often shortened as Yorkie) is one of the smallest dog breed of terrier type, and of any dog breed.

Read More

More info

Subscribe to our newsletter and stay up-to-date.

Subscribe

5. Gallery

Markdown Syntax:

> ![credit: barkpost.com](https://barkpost.com/wp-content/uploads/2014/06/DOG-2-superJumbo.jpg)
> ![credit: petpaw.com](https://www.petpaw.com.au/wp-content/uploads/2013/02/Dachshund1.jpg)
> ![credit: petinsurancequotes.com](https://www.petinsurancequotes.com/app/uploads/2019/08/greyhound-dogs.jpg)
> ![credit: nationalgeographic.com](https://www.nationalgeographic.com/content/dam/news/2017/09/09/booktalk-dogs-feelings/booktalk-dogs-feelings-NationalGeographic_1433912.ngsversion.1504880274221.adapt.1900.1.jpg)
> ![credit: funpeep.com](https://funpeep.com/wp-content/uploads/2015/11/Cute-Pictures-of-Dogs-Pomeranian-Puppy.jpg)
> ![credit: cutenessoverflow.com](https://www.cutenessoverflow.com/wp-content/uploads/2014/06/adorable-dogs-8.jpg)
> ![credit: zastavki.com](https://www.zastavki.com/pictures/1920x1200/2012/Animals_Dogs_Little_puppy_033758_.jpg)
> ![credit: pixfeeds.com](https://pixfeeds.com/images/dogs/1280-527856963-young-black-pug-puppy-eating.jpg)
> ![credit: wagwalkingweb.com](https://images.wagwalkingweb.com/media/daily_wag/behavior_guides/hero/1530413619.26/why-do-boxer-dogs-stink.jpg)
> ![credit: wagwalkingweb.com](https://images.wagwalkingweb.com/media/daily_wag/behavior_guides/why-dogs-like-fetch/hero/Why-Dogs-Like-Fetch.jpg)

Result: