Hero-unit
#+begin_o_blog_hero_unit #+HTML: <h1>Heading</h1> tagline #+BEGIN_HTML <a class="btn btn-primary btn-large"> Learn more </a> #+END_HTML #+end_o_blog_hero_unit
Page header
#+begin_o_blog_page_header #+HTML: <h1>Page header</h1> Some text #+end_o_blog_page_header
Page header
Some text
Using labels
Label and annotate text using a label:TYPE
link prefix where TYPE
is
one of default
, success
, warning
, important
, info
or
reverse
. The URL part of the link is used as the label text.
[[ob-label:default][Default]] [[ob-label:success][Success]] [[ob-label:warning][Warning]] [[ob-label:important][Important]] [[ob-label:info][Info]] [[ob-label:inverse][Inverse]]
- Default
- Success
- Warning
- Important
- Info
- Inverse
Using badges
Indicators and unread counts as for labels. Use the badge:TYPE
link
prefix.
[[ob-badge:default][Default]] [[ob-badge:success][Success]] [[ob-badge:warning][Warning]] [[ob-badge:important][Important]] [[ob-badge:info][Info]] [[ob-badge:inverse][Inverse]]
- Default
- Success
- Warning
- Important
- Info
- Inverse
Using progress bars
For loading, redirecting, or action status. Use a progress:TYPE
link
where TYPE
is one of info
, success
, warning
or
danger
. Additional classes (striped
or active
) can be added using comma.
The URL is the progress percent.
[[ob-progress:info][25]] [[ob-progress:success,striped][50]] [[ob-progress:warning,striped,active][75]] [[ob-progress:danger][100]]
Well
Use the well as a simple effect on an element to give it an inset effect.
#+begin_o_blog_well , Look, I'm in a well! #+end_o_blog_well
Look, I'm in a well!