CSS Test
This page demonstrates use of each CSS class implemented on pdfa.org for content styling purposes.
See page 22 of PDFA design r03.pdf by Color Crate for inline styling visualizations.
Layout effects
mecca_post
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
pdfaImageHangerRight
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
pdfaImageHangerLeft
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Hide an image on Mobile devices
Add class="fps large" to the image.
Tables
pdfa_table
First column header | Column header | Column header |
---|---|---|
Row Header | Content | Content |
Row Header | Content | Content |
mecca_table
First column header | Column header | Column header |
---|---|---|
Row Header | Content | Content |
Row Header | Content | Content |
mecca_fancy
First column header | Column header | Column header |
Row Header | Content | Content |
Row Header | Content | Content |
mecca_feature
First column header | Column header | Column header |
Row Header | Content | Content |
Row Header | Content | Content |
Heading effects
pdfa_h2wb
An h2 heading style used for emphasis
Should include a horizontal rule below the text of 100% width with a 1px solid #E6E7E8 border and 30px of top and bottom margin.
Image effects
pdfa_full_width_image
When images are displayed at full width, they should always receive a top and bottom border with 30px of top and bottom margins and the borders set 20px away from the top and bottom of the image.
my_dropshadow
A standardized dropshadow border for images.
Text effects
etc...
PDFaLeadGen Box
<div class="fpslarge">
<div class="my_info_box">, OR
<div class="my_info_box_wide"> for a wider result.
NOTE: The box will not appear on small screen; the text will simply appear inline without the background.
Example for use on an Article post:
Got a question? Ping me; I'll get back to you ASAP!
The PDF Company
<email field> [Go!]
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Colored text effets
Add second class to my_info_box. Available colors:
- my_info_box_red
- my_info_box_blue
- my_info_box_green
- my_info_box_gold
- my_info_box_gray
Example:
Caution
Reading this article could change your life.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.