Style guide
Markdown styles
Most text fields on the site support Markdown formatting syntax. See a complete markdown reference here. Examples for how these render are below–edit this page to see the syntax.
Heading styles
Heading styles let create hierarchy within a text module. Make a heading by adding a series of # at the beginning of a line. For example, to make a Heading 4, add “#### ” (with the space included) at the beginning of a line of text.
Here’s an example of each type of heading:
Heading 1 uses large type in green.
Heading 2 uses regular size type in green.
Headings 3, 4, 5, and 6 uses regular size type in white.
Text emphasis
Make text italic with asterisks – add * on either side of the italicized words.
You can also make text italic this way – by adding _ on either end of the italicized words.
extra bold text is made by using two asterisks, **.
Layout
End a line with two spaces
to make a line break
- Create a bulleted list
- by adding “- ” at the beginning
- of each line of text
- Create a numbered list
- by adding a number– i.e. “1.”
- at the beginning of each line
Inline links
There’s a special syntax for including a link in a text field:
[link text](url goes here)
This text is a link to the homepage
When linking to another page on the d4bl.org site, the link URL should always start with / so it doesn’t include the domain name:
Yes: /about
No: about
No: https://amant.org/about
No: amant.org/about
Create a table using markdown like so:
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
Button Module
Use a button module to add a large link to the page. Remember, if you want to link to another page on the D4BL site, you can simply write the page path, starting with /, and omitting https://www.d4bl.org. Linking to an external site, you should include the full URL. For example:
CORRECT
- /campaigns/18-data-for-black-lives-statement-in-solidarity-with-palestine
- /get-involved
- https://github.com/d4bl
INCORRECT
Carousel module
Photos from D4BL conferences
Download module
Embed module
Grid Module
Homepage carousel module
Image module
Page title module
A large page title
Pull quote module
Related module
Section title module
Staff module
Text module
Add some text to the page. Choose either large or regular size text. Accepts markdown.
This text module is regular size
Most modules can have an optional title, and can also be set to work as an accordion. You can also specify whether you want the accordion to be open or closed by default.
This text module has an accordion that is set to closed by default.