# Style Guide Source: https://minimal.spyr.me/style/ Published: 2017-11-08 --- This page will give you an overview of this theme’s typography and styling. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam anchor text. Integer volutpat mattis venenatis. Sed *italicized text* tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum.1 **Bolded text**, non venenatis libero pellentesque in. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. Donec tempor nisi diam, non venenatis libero pellentesque in. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. --- ## Color Palette ### White ### Base ### Contrast ### Primary ### Primary (Darker) ### Secondary ### Neutral --- ## Content Widths ### None Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Wide Width Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Full Width Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. --- ## Headings # Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ## Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Heading 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. #### Heading 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ##### Heading 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ###### Heading 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. --- ## Spacing ### xSmall Margin / Padding Outer box margin and padding are set to the above size. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Small Margin / Padding Outer box margin and padding are set to the above size. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Medium Margin / Padding Outer box margin and padding are set to the above size. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Large Margin / Padding Outer box margin and padding are set to the above size. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### xLarge Margin / Padding Outer box margin and padding are set to the above size. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. --- ## Font Sizes ### Font Size: Default Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Font Size: Extra Small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Font Size: Small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Font Size: Medium Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Font Size: Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. ### Font Size: Extra Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. --- ## Buttons ### Block Spacing: Default Default Outline Drop Shadow ### Block Spacing: 0 Default Outline Drop Shadow ### Block Spacing: xSmall Default Outline Drop Shadow ### Block Spacing: Small Default Outline Drop Shadow ### Block Spacing: Medium Default Outline Drop Shadow ### Block Spacing: Large Default Outline Drop Shadow ### Block Spacing: xLarge Default Outline Drop Shadow --- ## Blocks ### List - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam [anchor text](http://tru-fse.local/wp-admin/post.php?post=18&action=edit#). - Integer volutpat mattis venenatis. Sed *italicized text* tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. - **Bolded text**, non venenatis libero pellentesque in. 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam [anchor text](http://tru-fse.local/wp-admin/post.php?post=18&action=edit#). 2. Integer volutpat mattis venenatis. Sed *italicized text* tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. 3. **Bolded text**, non venenatis libero pellentesque in. ### Quote > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam [anchor text](http://tru-fse.local/wp-admin/post.php?post=18&action=edit#). Integer volutpat mattis venenatis. Sed *italicized text* tempus. > > *Cras ullamcorper* ### Code ``` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam anchor text. Integer volutpat mattis venenatis. Sed italicized text tempus. ``` ### Details **Lorem ipsum dolor sit amet, consectetur adipiscing elit.** Nam [anchor text](http://tru-fse.local/wp-admin/post.php?post=18&action=edit#). Integer volutpat mattis venenatis. Sed *italicized text* tempus. **Nam [anchor text](http://tru-fse.local/wp-admin/post.php?post=18&action=edit#). Integer volutpat mattis venenatis. Sed *italicized text* tempus.** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam [anchor text](http://tru-fse.local/wp-admin/post.php?post=18&action=edit#). Integer volutpat mattis venenatis. Sed *italicized text* tempus. ### Preformatted ``` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam anchor text. Integer volutpat mattis venenatis. Sed italicized text tempus. ``` ### Pullquote > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam [anchor text](http://tru-fse.local/wp-admin/post.php?post=18&action=edit#). Integer volutpat mattis venenatis. Sed *italicized text* tempus. > > *Sed *italicized text* tempus.* ### Table | Lorem ipsum | dolor sit amet | consectetur adipiscing elit | | --- | --- | --- | | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam [anchor text](http://tru-fse.local/wp-admin/post.php?post=18&action=edit#). Integer volutpat mattis venenatis. Sed *italicized text* tempus. | Nam [anchor text](http://tru-fse.local/wp-admin/post.php?post=18&action=edit#). Integer volutpat mattis venenatis. | Sed *italicized text* tempus. | *Lorem ipsum dolor sit amet, consectetur adipiscing elit.* ### Verse ``` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam anchor text. Integer volutpat mattis venenatis. Sed italicized text tempus. ``` ### Footnotes Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam [anchor text](http://tru-fse.local/wp-admin/post.php?post=18&action=edit#). Integer volutpat mattis venenatis. Sed *italicized text* tempus.2 1. ↩︎ 2. ↩︎ ### Image ![Underwater](https://sandbox.spyr.me/wp-content/uploads/sites/14/2023/10/neom-U07mDramqTw-unsplash-683x1024.jpg) *This is a photo caption* ### Gallery ![](https://sandbox.spyr.me/wp-content/uploads/sites/14/2023/10/clay-banks-LeqHBBRHZUE-unsplash-1024x683.jpg) ![](https://sandbox.spyr.me/wp-content/uploads/sites/14/2023/10/neom-kXbit_yx8t4-unsplash-683x1024.jpg) *This is what a caption looks like.* ![](https://sandbox.spyr.me/wp-content/uploads/sites/14/2023/10/samuel-arkwright-jT7IxiJBeGc-unsplash-768x1024.jpg) ![](https://sandbox.spyr.me/wp-content/uploads/sites/14/2023/10/gloria-cretu-4lYDCj67Go-unsplash-683x1024.jpg) ![](https://sandbox.spyr.me/wp-content/uploads/sites/14/2023/10/dylan-shaw-jnsa2RxvQpA-unsplash-1024x575.jpg) ![](https://sandbox.spyr.me/wp-content/uploads/sites/14/2023/10/karsten-winegeart-oNVtSCYeHe0-unsplash-682x1024.jpg) ![Underwater](https://sandbox.spyr.me/wp-content/uploads/sites/14/2023/10/neom-U07mDramqTw-unsplash-683x1024.jpg) *This is a photo caption*