Skip to content

Sample Page

gatsby-theme-musician comes with some components, utility classes, and plugins you can use out-of-the-box to help you write your content. You can see them in action here, and open sample-page.mdx in your content folder to see the source.

For more information about writing in MDX, go to their website.

🎸 Theme Components

You can see these theme-specific components in action on the landing page (artist-landing-page.mdx). Read more about these components in the Components Documentation.

  • Banner

    Display the artist name, tagline, and social links configured in src/gatsby-theme-musician/config

  • Releases

    Display entries in releases.yml

  • Shows

    Display entries in shows.yml

πŸ“ Layout


By default, page content takes the entire screen width. Use <Container> to create a centered layout block with a maximum width (the default is 1024 px). Try removing the <Container> opening and closing tags at the top and the bottom of this page and see what the page looks like.


Use the <Grids> component to display your content in a grid. The grid content must be separated by two line-breaks each. (On small screens, the columns expand to entire screen width.)

hello world


what's up?

By default, the Grids consist of 3 columns. You can modify it by adding the columns attribute.

this grid





πŸ”Ή Basic Elements

Paragraphs and Blocks

This is a regular text paragraph.

This paragraph is centered using className="text-center" attribute.

And this paragraph is aligned right using className="text-right" attribute.

Other than paragraphs, these class names also work with the <div> element.



This is an unordered list with child lists:

  • Vestibulum tristique tempor neque quis malesuada
    • Duis dictum vitae tortor a porttitor
      • Duis dictum vitae tortor a porttitor
  • Curabitur fringilla eros justo, id consequat dui scelerisque vitae

This is an ordered list:

  1. Vestibulum tristique tempor neque quis malesuada
  2. Duis dictum vitae tortor a porttitor
  3. Curabitur fringilla eros justo, id consequat dui scelerisque vitae


Regular Markdown image

gatsby-theme-musician demo site

Regular Markdown image with hyperlink (click image to open)

gatsby-theme-musician demo site

HTML image with figcaption

gatsby-theme-musician demo site
Photo Β© Eka 2019 |{" "} Source


You can create hyperlinks with Markdown formatting or with regular HTML anchor element.

You can give them the appearance of a button with the following class names: .gtm-button, .gtm-button-primary, and .gtm-button-invert.

Button link Β  Primary button link Β  Inverted button link



Here is a blockquote. Lorem ipsum dolor sit amet, vis doctus iriure recteque te, alii disputationi eu eum.

Mollis aliquam senserit quo ad. Eam ad regione delenit gloriatur. At eos oporteat consetetur, id pri adhuc corpora. Stet vocibus explicari vim in, sed ne gloriatur elaboraret.


πŸ“» Media

You can embed Youtube videos by using the <Youtube> component included in this theme.

You can also embed from Spotify and Soundcloud simply by inserting the link in a separate line with two line breaks before and after it.

To embed from Spotify, insert a link to the album, track, playlist, or artist. You can get the link by clicking the ellipsis (β‹―) after the item title on Spotify and choosing "Copy [Album, Track, etc] Link".

To embed from Soundcloud, insert a link to a track or a set.

To center the embedded Spotify or Soundcloud media, wrap it in a centered div.