IPPC Design Docs 2021–2023 → HTML & CSS Templates → Single Page Template Updated on 2023-04-27
This page is a demonstration containing various types of content that can be used throughout the IPPC website. Basic typography, links, lists, tables, images, code, and more are all supported as expected. For exhaustive detailed documentation on these and more see the Bootstrap docs.
More components will continue to be added here until a rich set is available for use in all situations.
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
Here are examples of blockquotes:
Quoted text goes here.
This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:
And this is an ordered list:
And this is a definition list:
HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.
<strong>
.<em>
.<mark>
.<abbr>
, with an optional title
attribute for the full phrase.<cite>
.<del>
and inserted text should use <ins>
.<sup>
and subscript text uses <sub>
.Most of these elements are styled by browsers with few modifications on our part.
See also: Controlling sizing and spacing.
Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
Lowercased text.
Uppercased text.
CapiTaliZed text.
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
Example code block
This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.
# | First | Last | Handle |
---|---|---|---|
1 | Athena | of Greece | @athena |
2 | Nina | Simone | @nina |
3 | Margaret | Hamilton | @mhamilton |
Basic login form
Various form elements.
See also form validation.
JavaScript needed to control behavior Also see this if you have trouble, like I did, getting the default example to work!
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkWith supporting text below as a natural lead-in to additional content.
Go somewhereLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
With supporting text below as a natural lead-in to additional content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereThis is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Cards take 100% width by default, and rows and column sizing utilities must be used to size them.
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereThis is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated x mins ago
This card has supporting text below as a natural lead-in to additional content.
Last updated x mins ago
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated x mins ago
Caption text here.
Caption text here.
Caption text here.