typography.less
Here, 'Typography' refers to classes and styles that are related to the various 'texts' of a page.
Simple header text styles. Add <small> for inline captions.
The uppercase style is applied to header tags starting from <h3> and under for emphasis. You can change the default setting by changing the @header-uppercase variable in petal.less to false.
To manually apply the uppercase and wide letter-spacing appearance, use .uppercase and .keepcase if the other way around.
Header tags have their margin-top values reset to 0 to make things simpler. Bottom margins have been set to 0.5em to follow respective font sizes.
Paragraphs (<p>) tags also have 0 top margins, and have a bottom margin of 1em. Line height can be changed by modifying the @paragraph-line-height variable.
Lists have their margins reset similar to paragraphs: 1em on the bottom of both ol and ul lists, and 2em padding for the left bullets/numbering space. List items (li) have 0.5em bottom margins each.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit esse aut quia accusamus? Tempora itaque, culpa adipisci nostrum suscipit libero
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, ducimus officia excepturi consequuntur magnam praesentium maxime ab dicta reiciendis, odit fuga, suscipit. Eius, dolor, reprehenderit. Dignissimos voluptatum, sint similique fuga?
Quia voluptas numquam accusantium beatae exercitationem culpa provident itaque fuga repudiandae nostrum placeat, laborum esse dolores velit dolor atque blanditiis molestiae perferendis.
Tempora itaque, culpa adipisci nostrum suscipit libero, nemo illum necessitatibus tempore repellendus at fugiat iusto. Voluptates, similique?
<blockquote> element will add a left colored border (follows @primary-accent-color) and appropriate margin/padding.
... voluptatum praesentium, placeat id est veritatis quam iure provident modi, illum libero, animi ipsa aspernatur! Quis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, consectetur, sint. Nihil inventore aut aspernatur vero ut ipsam ...
Use <hr> tags appropriately to visually separate meaningful sections of text or content.