Publishing tips and tricks - carbon-design-system/carbon-for-ibm-dotcom-website GitHub Wiki

Table of contents

Linking to an anchor on the same page:
How to open a destination page in a new window
How to create em dash with markdown
Applying grid to images and content
Adding a horizontal rule

Here are some tips and tricks for using the Gatsby theme.

Linking to an anchor on the same page:

Instead of using the full URL string:

[Related components](https://www.ibm.com/standards/carbon/patterns/lead-space#related-components-and-patterns)

simply use the last hash-tag segment:

[Related components](#related-components-and-patterns)

How to open a destination page in a new window

Instead of linking with markdown as follows:

[link](https://ibm.box.com/s/26ze6is6ff50nohlx5v28fubkh2w2f2x)

Link using the HTML anchor tag as follows:

<a href="https://ibm.box.com/s/26ze6is6ff50nohlx5v28fubkh2w2f2x" target="_blank">link</a>

How to create em dash with markdown

Add the — in between the name and the — will show up.

Applying grid to images and content

Use the following two React components to create rows and columns.

<Row> creates a row. <Column> creates a column.

The following example creates a column structure that spans 8 columns, leaving the right 4 columns empty.

<Row>
<Column colMd={8} colLg={8}>

![Base type size change](../../images/guidelines/expressive-theme/exp-theme-research-visual.png)

</Column>
</Row>

Adding a horizontal rule

Use the following element:

<hr/>