Headings:
All HTML headings, <h1> through <h6>, are available.
H1. Heading example
H2. Heading example
H3. Heading example
H4. Heading example
H5. Heading example
H6. Heading example
List Types
Ordered List
An unordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:
- List Item 1
- List Item 2
- Nested list item A
- Nested list item B
- List Item 3
Unordered List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets by default:
- List Item a
- List Item b
- Nested list item 1
- Nested list item 2
- Double Nested item 1
- Double Nested item 2
- List Item 3
You can also remove the default styling by adding the class list--unstyled. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. Style Guide
Example:
<ul class="list--unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
</ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
Blockquotes & alert boxes
Blockquotes
For quoting blocks of content from another source within your document.
Single line blockquote:
Stay hungry. Stay foolish.
Multi line blockquote:
People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. - Biron Themes
Alert boxes
You can create the following content boxes using the markdown editor.
Default
<div class="alert">
...
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Info
<div class="alert info">
...
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Warning
<div class="alert warning">
...
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Error
<div class="alert error">
...
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Success
<div class="alert success">
...
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
HTML Tags
Code
Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because we have more specific typographic needs for code, we'll specify Consolas and Monaco ahead of the browser-defined monospace font.
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
Here are a few examples of code highlighting:
HTML markup:
<!DOCTYPE html>
<html>
<body>
<h2>The title attribute</h2>
<p title="I'm a tooltip">
Check out the title attribute as a tooltip.
</p>
</body>
</html>
CSS code:
body {
background-color: #FFFFF0;
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: #00008B;
}
Javascript code:
var x, y, z;
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML = z;
Text-level semantics
Styling for common inline HTML5 elements.
The a element example.
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example
The <details> element.
Epcot Center [[1]]
Buttons
Colors
<button class="btn m-b">Default</button>
<button class="btn btn--brand m-b">Primary</button>
<button class="btn btn--secondary m-b">Secondary</button>
<button class="btn btn--dark m-b">Dark</button>
<button class="btn btn--light m-b">Light</button>
Default [[2]]
Primary
Secondary
Dark
Light
Sizes
<button class="btn btn--sm m-b">Small Button</button>
<button class="btn m-b">Default Button</button>
<button class="btn btn--lg m-b">Large Button</button>
<button class="btn btn--xl m-b">Huge Button</button>
<button class="btn btn--full m-b">Full Width Button</button>
Small Button
Default Button
Large Button
Huge Button
Full Width Button [[3]] and text.
Tables
| # | Table_Header_1 | Table_Header_2 | Table_Header_3 | Table_Header_4 | Table_Header_5 | Table_Header_6 | Table_Header_7 | Table_Header_8 |
|---|---|---|---|---|---|---|---|---|
| 1 | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Division 6 | Division 7 | Division 8 |
| 2 | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Division 6 | Division 7 | Division 8 |
| 3 | Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Division 6 | Division 7 | Division 8 |
| # | Table_Header_1 | Table_Header_2 | Table_Header_3 |
|---|---|---|---|
| 1 | Division 1 | Division 2 | Division 3 |
| 2 | Division 1 | Division 2 | Division 3 |
| 3 | Division 1 | Division 2 | Division 3 |
Bookmark Card
Albert Henk van Urkalberthenk.com
Images
Our Two Tiered Workforce!
It's not an accident. It's by design.
What we're witnessing at Busways isn't just about paychecks and contracts. It's about power. More specifically, it's about how to systematically dismantle it.
Let me show you what's really happening behind the wheel...
Busways first move was brilliant in its simplicity: Create two classes of drivers. The veterans under the old STA award, and the new blood under the mentor program. Same work, different rewards. It's the oldest trick in the playbook - divide and conquer.
But that's just the surface layer.
Zoom out, and you'll see something fascinating: A masterclass in responsibility diffusion. The government privatized public transport by regions, each with its own agreement. Suddenly, the union's collective voice became a whisper. How do you coordinate industrial action when everyone's playing by different rules?
Here's where it gets interesting...
Follow the money trail. Busways operates on razor-thin margins (~5% an educated guess). They're not the puppet master - they're just another player in this carefully orchestrated dance. The real power? It's in the hands of those who control the funding.[1]
The government holds the purse strings but points to private operators when things go wrong. The operators point to contract constraints. And the drivers? They're caught in the middle of what experts call a "wicked problem" - where every solution seems to create new complications. [2]
But here's what they don't want you to realize:
Understanding the system is the first step to changing it.
Believe in you
For drivers to reclaim their power, they need to:
- See beyond the artificial divisions
- Build bridges between the two tiers
- Target advocacy where it matters most - government funding
- Document how this fragmentation affects service quality and safety
The question isn't whether this system was designed to weaken collective bargaining power - it was. The real question is: What happens when drivers finally see the bigger picture?
Because sometimes, the most powerful act of resistance is simply understanding exactly how the game is being played.
And this game? It's just getting started...
[[1]]: This is a footnote for three, it sits all the way where ever you want it, but has to be on a line unto itself.
[[2]]: this is for footnote 2.
[[3]]: this is for 3rd footnote.
