Typography

von web944 | Dez 5, 2014 | Features

h1 headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus.

h2 headline

h3 Headline

h4 headline

h5 headline

h6 headline

Block Quote Style

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Joostrap

Body Copy Styles

Lead text copy

Paragraph text copy

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is an H4 heading

This is an H5 heading

This is the lead text class

This is the normal paragraph text

H1 heading with Secondary text

H2 heading with Secondary text

H3 heading with Secondary text

H4 heading with Secondary text

H5 heading with Secondary text

Miscellaneous Text

This is ^superscript and _subscript text
This is emphasised text
This is strong text
This is a link

This is a section title

H1 heading with Label

H2 heading with Label

H3 heading with Label

H4 heading with Label

H5 heading with Label

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum bibendum turpis, in auctor purus congue et. Praesent faucibus egestas eros sit amet condimentum. Ut vel lacus pulvinar, fringilla sem quis, sagittis enim. Integer ligula ipsum, egestas vestibulum dolor eu, placerat eleifend nisl. Curabitur hendrerit consectetur odio, a commodo arcu pretium vitae. Fusce neque ligula, dapibus ac metus eget, molestie ullamcorper massa. Cras in sem leo.

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Toggle

100% Responsive

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Clean & Professional Design

Collapsible Group Item #3

Alerts

Warning! Best check yo self, you’re not looking too good.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it’s not super important.

Alerts with Dismiss

Warning! Best check yo self, you’re not looking too good.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it’s not super important.

Dropcap

Duis non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper. Nulla facilisi. Donec interdum, enim in dignissim lacinia, lectus nisl viverra lorem, ac pulvinar nunc ante at neque. Proin et dui eros, at aliquet est. Pellentesque consectetur lectus quis enim mollis ut convallis urna malesuada. Sed tincidunt interdum sapien vel gravida. Nulla a tellus lectus, in aliquet tellus. Donec aliquam.

Styled List Items

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Code Display

<form>
  <fieldset>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
      <input type="checkbox"> Check me out
    </label>
    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>

Jumobtron example

This is a showcase of Bootstrap 3 Typography examples included with the Joostrap templates.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Default
Primary
Success
Info
Warning
Danger

Inbox 42

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it’s not super important.

Warning! Best check yo self, you’re not looking too good.

Oh snap! Change a few things up and try submitting again.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Cras justo odio

Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Typography

h1 headline

h2 headline

h3 Headline

h4 headline

h5 headline

h6 headline

Block Quote Style

Body Copy Styles

Lead text copy

Paragraph text copy

Text

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is an H4 heading

This is an H5 heading

H1 heading with Secondary text

H2 heading with Secondary text

H3 heading with Secondary text

H4 heading with Secondary text

H5 heading with Secondary text

Miscellaneous Text

This is a section title

H1 heading with Label

H2 heading with Label

H3 heading with Label

H4 heading with Label

H5 heading with Label

Tabs

Toggle

100% Responsive

Clean & Professional Design

Collapsible Group Item #3

Alerts

Alerts with Dismiss

Dropcap

Styled List Items

Code Display

Jumobtron example

Buttons

Tables

Images

Labels

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Badges

Alerts

Progress bars

List groups

List group item heading

List group item heading

List group item heading

Panels

Panel title

Panel title

Panel title

Panel title

Panel title

Panel title

Wells

...unser Tennisclub am Spessart

TCAS ist

...unser Tennisclub am Spessart

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger

Default
Primary
Success
Info
Warning
Danger