This is the page introduction. It is defined in the front matter (ie. the list of variables that come before the post body). You can include links using HTML syntax.

Basic text styles

The NSIN site uses Markdown and some basic HTML to format content. This example post shows all of the differnt formatting options at your disposal.

Bold text. Italic text. Bold italic text. Inline link. Basic paragraph text is just written out normally without any characters on either side. To create a new paragraph, just hit return twice!

I’m a blockquote. By default I’m 100% wide at small browser dimensions (mobile and tablet), and 50% wide at desktop dimensions.

Because blockquotes are 50% wide at desktop dimensions, it’s always a good idea to have a paragraph after them so that there’s something to the right of them on large browser windows. If there’s an image or video or headline or nothing after them, it’ll look weird!

Below this paragraph is a horizontal rule.


Headline styles (this is heading 2)

Heading level 3

Heading level 4

Heading level 5
Heading level 6

There’s also a Heading 1 style that follows the same format, but you shouldn’t use it. The heading 1 is used on the post titles at the top of the page, and it should be the only heading 1 on the page for accessibility purposes (ie. screen readers for blind users).


Lists

  1. Ordered list.
  2. Second item, auctor diam a, tempor sapien. Fusce quis tincidunt enim. Proin sapien lacus, tincidunt quis ante ut, scelerisque lacinia urna. In aliquam commodo erat, in elementum libero pharetra vel.
  3. Third item
    1. Indented item
    2. Second indented item, auctor diam a, tempor sapien. Fusce quis tincidunt enim. Proin sapien lacus, tincidunt quis ante ut, scelerisque lacinia urna. In aliquam commodo erat, in elementum libero pharetra vel.
  4. Fourth item
  5. Fifth item
  6. Sixth item
  7. Seventh item
  8. I lost count around here (note that you don’t even need to order lists properly in code for them to be ordered properly when rendered on the page).
  9. What number am I on?
  10. Tenth item. Numbers are right aligned.

Spacer paragraph between lists. This isn’t required, it’s simply included here to make the two different lists easier to read. Feel free to ignore it.

  • Unordered list.
  • Second item, auctor diam a, tempor sapien. Fusce quis tincidunt enim. Proin sapien lacus, tincidunt quis ante ut, scelerisque lacinia urna. In aliquam commodo erat, in elementum libero pharetra vel.
  • Third item
    • Indented item
    • Second indented item, auctor diam a, tempor sapien. Fusce quis tincidunt enim. Proin sapien lacus, tincidunt quis ante ut, scelerisque lacinia urna. In aliquam commodo erat, in elementum libero pharetra vel.
  • Fourth item

Includes

Includes are special pieces of code that generate their own complex HTML.

Logo Grid

Example output:

The logo grid displays a series of logos in boxes with optional links. Images should be landscape orientation otherwise stretching will occur to preserve the page layout!

Requirements: You must define the logo_grid array in the front matter on every page where you use this include. Look above in this page’s source to see how it is included.

Example logo_grid array in front matter:

logo_grid:
  - logo: 
    source_file: /assets/img/content/events/2019-02-15-example-event-post-lorem-ipsum-dolor/logo-barclays.png
    link: http://example.com
  - logo:
    source_file: /assets/img/content/events/2019-02-15-example-event-post-lorem-ipsum-dolor/logo-columbia-entrepeneurship.png
    link: http://example.com
  - logo:
    source_file: /assets/img/content/events/2019-02-15-example-event-post-lorem-ipsum-dolor/logo-newlab.png
    link: http://example.com
  - logo:
    source_file: /assets/img/content/events/2019-02-15-example-event-post-lorem-ipsum-dolor/logo-nyu.png
    link: http://example.com
  - logo:
    source_file: /assets/img/content/events/2019-02-15-example-event-post-lorem-ipsum-dolor/logo-partnership-for-new-york-city.png
    link: http://example.com

Example include within post body:


{% include logo-grid.html %}

Buttons

Example output:

Button text

Button text

Example include within post body:


{% include button.html 
   button_text="Button text" 
   button_url="http://example.com" 
   button_type="magenta" 
%}

  • button_text defines what text is displayed in the button.
  • button_url defines where the button goes. Links must start with http:// or https:// or they won’t work!
  • new_window defines whether the button should open in a new window or not. Notice you don’t use quotes here.
  • button_type defines the button’s visual appearance, either “border” or “magenta”.

Images

Images can be embedded into posts in a couple of different ways.

Full width image

Example output:

Description of the image

I am caption text. Rich text formatting is available within captions, but you shouldn’t use anything other than: bold, struck, italic and links.

The full width image is always displayed at 16:9 dimensions and has a little bit of extra top and bottom padding so it has ample breathing room.

Example include within post body:


{% include image.html 
   source_file="/assets/img/content/news/2019-02-15-another-example-post/thumbnail.jpg" 
   alt="Description of the image" 
   caption="I am caption text. Rich text formatting is available within captions, but you shouldn't use anything other than: **bold,** ~~struck,~~ *italic* and [links.](https://www.example.com)" 
%}

  • source_file defines where the image lives within the site.
  • alt text is important for accessibility purposes (eg. it may be read aloud by screen readers for blind users).
  • caption is optional, but if provided it will be displayed in plain text directly below the image.
Floated images

Floated images are always 50% width and can float to either the left or right of content. Note that they should always come before a big chunk of text! If you put them before a headline or image or video they won’t look good at all.

Left aligned images

Example output:

Description of the image

I am caption text. Rich text formatting is available within captions, but you shouldn’t use anything other than: bold, struck, italic and links.

Filler paragraph for example purposes, feel free to ignore. Morbi faucibus nisi sit amet libero semper, nec facilisis lorem ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis tortor suscipit, auctor diam a, tempor sapien. Fusce quis tincidunt enim. Proin sapien lacus, tincidunt quis ante ut, scelerisque lacinia urna. In aliquam commodo erat, in elementum libero pharetra vel. Morbi faucibus nisi sit amet libero semper, nec facilisis lorem ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis tortor suscipit, auctor diam a, tempor sapien. Fusce quis tincidunt enim. Proin sapien lacus, tincidunt quis ante ut, scelerisque lacinia urna.

Example include within post body:


{% include image-align-left.html 
   source_file="/assets/img/content/news/2019-02-15-another-example-post/thumbnail.jpg" 
   alt="Description of the image" 
   caption="I am caption text. Rich text formatting is available within captions, but you shouldn't use anything other than: **bold,** ~~struck,~~ *italic* and [links.](https://www.example.com)" 
%}

  • source_file defines where the image lives within the site.
  • alt text is important for accessibility purposes (eg. it may be read aloud by screen readers for blind users).
  • caption is optional, but if provided it will be displayed in plain text directly below the image.

Right aligned images

Example output:

Description of the image

I am caption text. Rich text formatting is available within captions, but you shouldn’t use anything other than: bold, struck, italic and links.

Filler paragraph for example purposes, feel free to ignore. Morbi faucibus nisi sit amet libero semper, nec facilisis lorem ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis tortor suscipit, auctor diam a, tempor sapien. Fusce quis tincidunt enim. Proin sapien lacus, tincidunt quis ante ut, scelerisque lacinia urna. In aliquam commodo erat, in elementum libero pharetra vel. Morbi faucibus nisi sit amet libero semper, nec facilisis lorem ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis tortor suscipit, auctor diam a, tempor sapien. Fusce quis tincidunt enim. Proin sapien lacus, tincidunt quis ante ut, scelerisque lacinia urna.

Example include within post body:


{% include image-align-right.html 
   source_file="/assets/img/content/news/2019-02-15-another-example-post/thumbnail.jpg" 
   alt="Description of the image" 
   caption="I am caption text. Rich text formatting is available within captions, but you shouldn't use anything other than: **bold,** ~~struck,~~ *italic* and [links.](https://www.example.com)" 
%}

  • source_file defines where the image lives within the site.
  • alt text is important for accessibility purposes (eg. it may be read aloud by screen readers for blind users).
  • caption is optional, but if provided it will be displayed in plain text directly below the image.

Video

Example output:

Example include within post body:


{% include video.html
   embed_code='<iframe width="560" height="315" src="https://www.youtube.com/embed/CJinWua98NA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
%}

  • embed_code is the code provided by whatever video service hosts your video. In this example we’re using YouTube, but Vimeo and many other services work as well. It’s important to note that quotation marks matter here. Whatever type of quotation mark the video provider users in their code, you must use the opposite or else the video will fail to render. So for example:
    • If the embed code uses single quotes (eg. <iframe width='560'...) you must use double quotes embed_code="<iframe width='560'...".
    • If the embed code uses double quotes (eg. <iframe width="560"...) you must use single quotes embed_code='<iframe width="560"...'.

Technically speaking, you can just copy and paste embed code from your video provider straight into a post. However using the video include allows the video to resize itself dynamically to fit the user’s browser. Videos embedded without using this include may look too small or large, or may overlap parts of the layout they shouldn’t.