Promo Test Three

This is the full post Lorem ipsum dolor sit amet steak frites steak frites!

Ut vis aperiam quaeque, cum offendit facilisi gubergren et, usu intellegat dissentiet contentiones at. Nec et modo soluta elaboraret. Mei liber dolores ne, possim mollis placerat ei quo, meliore propriae inimicus sea ne. Eu nostrum persequeris pro, elit repudiare ex mei. Fuisset mentitum ius no, vel cu nihil diceret maluisset. Per an novum docendi moderatius.

Mel amet causae cu. No usu denique ancillae, his ei nonumy comprehensam. Eros ludus qualisque ut mea, doming laoreet voluptaria nec ea, cum cu mundi dicam euismod. In harum zril nominavi duo. Sapientem dissentiunt mel eu, cu est minimum expetendis.

Mea ut esse nobis. Sed clita deserunt scriptorem id, et ius eirmod deleniti pertinacia, eu vitae timeam persius per. In noster melius vim, eum tollit scripta mediocrem cu. Enim porro cum ei, ei ipsum ignota convenire his, sit adhuc propriae ad. Ridens mandamus efficiendi est no, qui homero epicurei id, fugit maiestatis intellegam ius et.

Cu vix impedit liberavisse, per ad utamur civibus. No cum lucilius detraxit vituperata, vix atomorum abhorreant id, latine equidem admodum ad duo. Dicit salutandi efficiantur sit in, cu vix virtute facilisis. Ad nam clita graeci, eu sumo moderatius mea, ut sit nostrud utroque noluisse.

Vix at accusam neglegentur, qui no sumo dissentiunt. Id sea illum tacimates. Agam impedit expetendis ei mei. Vidisse rationibus at quo, ea sed exerci ignota dolores. Nulla nostrud mentitum ex est.

Invidunt senserit at nam, eam ullum iracundia cu, nec te petentium maiestatis. Te idque deleniti similique mel, duo eu tota commodo dissentiet, laboramus rationibus ad mei. Tale utroque ad per, te pro epicurei quaerendum, eu vix diam democritum voluptaria. At eum altera omittam appetere, cu cum case molestie instructior, in est convenire urbanitas. Pri oratio ancillae electram ei, per an corpora offendit recteque.

Offendit consequuntur nam ei, in eam atqui nihil commodo. Primis animal vix ea, nec dico euismod rationibus ea. Est postea salutandi percipitur ut, quaestio oportere intellegebat mel no. Quo et hinc exerci essent. Nec utamur euripidis ex, qui te tota audiam nominati.









Promo Test Two

Here’s the full post content. Curabitur sit amet nibh purus. Curabitur in luctus ligula, vel pellentesque neque. Ut ut sodales elit, vitae gravida orci. Nam mauris urna, auctor vitae diam eget.

Invidunt senserit at nam, eam ullum iracundia cu, nec te petentium maiestatis. Te idque deleniti similique mel, duo eu tota commodo dissentiet, laboramus rationibus ad mei. Tale utroque ad per, te pro epicurei quaerendum, eu vix diam democritum voluptaria. At eum altera omittam appetere, cu cum case molestie instructior, in est convenire urbanitas. Pri oratio ancillae electram ei, per an corpora offendit recteque.

Offendit consequuntur nam ei, in eam atqui nihil commodo. Primis animal vix ea, nec dico euismod rationibus ea. Est postea salutandi percipitur ut, quaestio oportere intellegebat mel no. Quo et hinc exerci essent. Nec utamur euripidis ex, qui te tota audiam nominati.

Invidunt senserit at nam, eam ullum iracundia cu, nec te petentium maiestatis. Te idque deleniti similique mel, duo eu tota commodo dissentiet, laboramus rationibus ad mei. Tale utroque ad per, te pro epicurei quaerendum, eu vix diam democritum voluptaria. At eum altera omittam appetere, cu cum case molestie instructior, in est convenire urbanitas. Pri oratio ancillae electram ei, per an corpora offendit recteque.

Offendit consequuntur nam ei, in eam atqui nihil commodo. Primis animal vix ea, nec dico euismod rationibus ea. Est postea salutandi percipitur ut, quaestio oportere intellegebat mel no. Quo et hinc exerci essent. Nec utamur euripidis ex, qui te tota audiam nominati.









Promo Test One

Full post content is here

Lorem ipsum dolor sit amet. Test content for Promo Test One. Let’s add a photo and see what happens.

Invidunt senserit at nam, eam ullum iracundia cu, nec te petentium maiestatis. Te idque deleniti similique mel, duo eu tota commodo dissentiet, laboramus rationibus ad mei. Tale utroque ad per, te pro epicurei quaerendum, eu vix diam democritum voluptaria. At eum altera omittam appetere, cu cum case molestie instructior, in est convenire urbanitas. Pri oratio ancillae electram ei, per an corpora offendit recteque.

Offendit consequuntur nam ei, in eam atqui nihil commodo. Primis animal vix ea, nec dico euismod rationibus ea. Est postea salutandi percipitur ut, quaestio oportere intellegebat mel no. Quo et hinc exerci essent. Nec utamur euripidis ex, qui te tota audiam nominati.

Lorem ipsum dolor sit amet. Test content for Promo









Article Test One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, ante quis fringilla accumsan, nisi sem mollis ipsum, non bibendum purus diam quis massa. In tincidunt commodo massa, ut ullamcorper sem rhoncus sit amet. Etiam vel consequat lacus. Praesent maximus nulla nisl, nec mollis felis sodales ut. Aliquam erat volutpat. Nam sagittis pulvinar scelerisque. Sed euismod risus nec velit venenatis, eu accumsan orci dapibus. Ut augue ex, faucibus ac nulla lacinia

Pharetra laoreet ligula
  • Nunc ante mauris, gravida eu vehicula vel, ultricies at tellus
  • Maecenas urna turpis, auctor a sollicitudin ac, pharetra nec mauris
  • Nam id lacus non sem viverra mattis
  • Donec vel semper risus. Vestibulum rutrum tincidunt sapien
  • Sed ut diam nunc
  • Aliquam sollicitudin enim risus, nec semper nunc congue et
  • Donec non ipsum id lectus placerat interdum at sit amet velit
  • Proin quis faucibus leo
  • Duis sagittis est vitae commodo hendrerit

Sed in ex sit amet metus pretium cursus

Integer tincidunt metus eget turpis accumsan, faucibus tincidunt libero hendrerit. Vestibulum neque justo, iaculis quis feugiat sit amet, aliquam ac leo. Vivamus in lorem nec sapien tempus dapibus. Vivamus id ante sagittis, consectetur elit sed, scelerisque odio. Sed molestie iaculis lectus, a condimentum justo sodales nec. Nullam diam turpis, fermentum finibus ligula at, sodales venenatis risus.

Vivamus congue orci urna, vitae tempor justo ultricies et. Praesent ac ex non metus scelerisque iaculis. Ut at mi dui. Suspendisse vitae ullamcorper elit. Aliquam ut ipsum efficitur, sagittis diam vel, malesuada dolor. Aenean consectetur purus lorem, quis laoreet dolor imperdiet ac. Etiam pretium velit pretium accumsan ullamcorper. Nulla volutpat odio eu convallis placerat.









Tearsheet

Typography

Paragraph

Standard paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere auctor vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In id facilisis arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas et tristique leo, at sollicitudin ligula. Proin eget vehicula ligula, vel fringilla turpis.

Morbi venenatis odio arcu, quis maximus enim fermentum vitae. Pellentesque gravida laoreet dapibus. Praesent et interdum turpis, vitae congue metus.

Here is an example of highlighted text.

Font Stack

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Headers

Heading h1

Heading h2

Heading h2 class=”component-title”

Heading h2 class=”component-title-alt”

Heading h3

Heading h4

Heading h5
Heading h6
Blockquote

Standard <blockquote>. Use for pull quotes, emphasis, callouts. Maecenas et tristique leo, at sollicitudin ligula. Proin eget vehicula ligula.

Lists

Unordered base

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

Unordered no bullets <ul class="list-flat">

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

Ordered base

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
  5. Item Five

List group base

  • Cras justo odio
  • Dapibus ac facil
  • Morbi leo risus

 

Unordered or ordered list with spacing between items

The ul has an added class of “space-li” <ul class="space-li">

  • Item One .space-li li:first-child { margin: 2rem 0 1rem; }
  • Item Two and subsequent .space-li li { margin: 1rem 0; }
  • Item Three
  • Item Four
  • Item Five

Here’s another paragraph of text, preceding an ordered list with a class of “space-li” <ol class="space-li">

  1. Item One .space-li li:first-child { margin: 2rem 0 1rem; }
  2. Item Two and subsequent .space-li li { margin: 1rem 0; }
  3. Item Three
  4. Item Four
  5. Item Five

Complex Ordered

  1. Nest <ol> tags
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in accumsan felis, ut consequat sapien. Phasellus cursus eros semper felis imperdiet mollis
    1. Quisque non massa ullamcorper, pulvinar nisl nec
    2. Nunc elementum eros nec molestie sollicitudin:
      1. Nulla eget tempus dui
      2. Morbi dignissim, sapien id tincidunt rhoncus, erat libero dignissim ligula, vel auctor tellus dolor ac lacus. Fusce vel felis non massa tristique malesuada at ut orci auctor augue nulla, nec aliquam ante gravida vitae
      3. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia

Code Display

inline

For inline code, use the <code> tag

code block

For code blocks, use the <pre> tag. Remove all unnecessary leading spaces/tabs and convert all < to &lt; and all > to &gt;

Sample: Pre

<div class="col-md-4">
  <h4>List group base</h4>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">This is a long line to demonstrate horizontal scrolling of the containing box. Lorem ipsum dolor</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Forms

More in the Bootstrap 4 documentation


We’ll never share your email with anyone else.





This is some placeholder block-level help text for the above input. It’s a bit lighter and easily wraps to a new line.
Radio buttons

Tables

More in the Bootstrap 4 documentation

Responsive

Table heading Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell

Reflow

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Text Links

Example of the default text link style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere auctor vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In id facilisis arcu.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas et tristique leo, at sollicitudin ligula. Proin eget vehicula ligula, vel fringilla turpis.

Colors

$primary-color
$secondary-color
$tertiary-color
$quaternary-color
$highlight-color
$brand-success
$brand-info
$brand-warning
$brand-danger
$text-color
$white-color
$black-color
$gray-xxdk
$gray-xdk
$gray-dk
$gray-md
$gray-xmd
$gray-lt
$gray-xlt
$gray-xxlt
$gray-xxxlt

Buttons


Images

Formats

RASTER: Continuous tone images should generally be jpg format, standard Photoshop compression level 60 recommended. PNG (Portable Network Graphics) format may be occasionally appropriate in specific circumstances and is used by some legacy elements.

A width of about 1200 pixels is ideal. Smaller images will look pixelated and larger ones are overkill.

VECTOR: All non-continuous tone images should be SVG (Scalable Vector Graphics) format. SVG requirements:

  • Convert all fonts to outlines before saving SVGs for Production. An additional Illustrator file with editable fonts may need to be saved by artwork creators for future updates of diagrams. SVGs with editable fonts may not display properly across all devices and platforms.
  • In general, fit artboard to artwork bounds before saving SVG. This allows all padding/margin to be applied via CSS and reduces complexity of maintenance and upgrades. Illustrator (or other vector art creation software) artboards can exceed artwork size where cropping is required.
  • Simplify SVGs where possible: no stray points, line things up, delete unnecessary elements. Contact the DoITT UX Group for assistance if needed.
  • Save SVGs from Illustrator using the SVG 1.1 default settings. We might switch to compressed SVG in the future but we’re not recommending it at this time.

 

Full width

Use class “img-fluid” to make image responsive to fill its container horizontally and give it default top and bottom margin. Brief, descriptive alt tags are required.

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder-1200x400" class="img-fluid">

placeholder-1200x400

Float left using width-md and bootstrap utility classes

placeholder 1200x400

Use default Bootstrap utility classes for responsive floats at the standard breakpoints (xs, sm, md, lg, xl).

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-md float-md-left">

Include the class width-sm which will supply default padding. Text will wrap beside and under the floated image.

 

Float left using width-sm and bootstrap utility classes

placeholder 1200x400

Use default Bootstrap utility classes for responsive floats at the standard breakpoints (xs, sm, md, lg, xl).

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-sm float-md-left">

Include the class width-sm which will supply default padding. Text will wrap beside and under the floated image.

 

Float right using width-md and bootstrap utility classes

placeholder 1200x400

Use default Bootstrap utility classes for responsive floats at the standard breakpoints (xs, sm, md, lg, xl).

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-md float-md-right">

Include the class width-md which will supply default padding. Text will wrap beside and under the floated image.

 

Float right using width-sm and bootstrap utility classes

placeholder 1200x400

Use default Bootstrap utility classes for responsive floats at the standard breakpoints (xs, sm, md, lg, xl).

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-sm float-md-right">

Include the class width-sm which will supply default padding. Text will wrap beside and under the floated image.

 

Center image using width-lg center-block, width-md center-block or width-sm center-block

placeholder 1200x400

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-lg center-block">

placeholder 1200x400

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-md center-block">

placeholder 1200x400

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width center-block">

Bootstrap 4 Documentation

For components not outlined here, refer to the Bootstrap 4 general documentation