```
#### Unordered list
Unordered lists are marked up using ‹ul› tags. An unordered list describes a collection of items.
```html_example
Unordered list item
Unordered list item
Unordered list item
Unordered list item
Unordered list item
Unordered list item
```
#### Nested Unordered Lists
```html_example
Unordered list item
Nested unordered list item
Nested unordered list item
Nested unordered list item
Unordered list item
```
#### Ordered Lists
Ordered lists are marked up using ‹ol› tags. An ordered list may have various numbering schemes presented through CSS.
```html_example
Ordered list item
Ordered list item
Ordered list item
Ordered list item
Ordered list item
Ordered list item
```
*/
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 16px; }
ol {
display: block;
list-style-type: decimal;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 16px; }
li {
display: list-item;
text-align: -webkit-match-parent; }
ol ul,
ul ol,
ul ul,
ol ol {
-webkit-margin-before: 0px;
-webkit-margin-after: 0px; }
ul ul, ol ul {
list-style-type: circle; }
.list-unstyled,
ul.menu {
list-style: outside none none;
padding-left: 0; }
/*doc
---
title: Media
name: media
category: Elements - Media
---
#### Using media as links
https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H2
https://bitsofco.de/alternative-text-and-images/
https://responsiveimages.org/demos/
https://cloudfour.com/thinks/responsive-images-101-part-5-sizes/
#### Informative Images
Informative images are images that, as you would guess, provide some information. This information can be anything from a label, to supplementary information, to just an impression.
For informative images, the alternative text should convey the same information that the image does. This might be as simple as one word saying what the image is. For example, in the image below, images are used to label each section.
#### Functional images
Functional images are those that represent an action to be taken. Unlike informative images, which purely provide information for the user, functional images are used convey something actionable. These images are also typically tied to interactive elements such as links or buttons. For functional images, the alternative text should clearly communicate the action that is to be taken.
#### Decorative images
Decorative images are images that don’t convey any actual/actionable information to the viewer. Their purpose is purely styling. For example, a background pattern on an element does not provide any informative value to the user.
In these cases, an empty alt attribute should be provided. This allows the image to be simply skipped by the screenreader since it is of no use to a user with visual impairments.
#### complex images
Complex images, a type of informative image, are those that contain a very detailed and substantial amount of information. For example bar charts or graphs. For these images, it is suggested that we provide both short and long descriptions.
The short description should be provided via the alt attribute. The long description can be defined in some other element, and simply referenced using the longdesc/ aria-labelledby attributes, or by using the
and elements.
*/
/*doc
---
title: Logo
name: logo
parent: media
---
*/
.site-logo {
position: relative; }
.site-logo img {
outline: 0;
border: 0;
position: absolute;
left: 0;
max-width: 100%;
height: auto; }
.site-logo a {
text-decoration: none; }
.site-logo a:hover {
background-color: transparent; }
/*doc
---
title: Card image
name: card-image
parent: media
---
We use a mixin to keep the aspect ratio check
https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
here you can find resets for the responsive card image and image effects for mouseover.
### data-image-effect="zoom"
```html_example
```
*/
.card-image[data-image-variation="image-rounded"] {
width: 250px;
height: 250px;
border-radius: 150px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat; }
/*doc
---
title: Full width banner
name: full-width-banner
parent: media
---
#### Using media as links
https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H2
#### Full Width Banner
Full width Banners are very powerful to attract the users attention because the large background image is visually stimulating
They can be used in top of a page or in the image addon somewhere in the page.
Best practice is to size down an image to keep it sharp, with screens getting bigger the best size to pick would be 1920x1080 with a ratio of 16:9
Best is to resize the image for smaller screensizes and load the appropriate image depending the used screen size.
reference
http://www.wordstream.com/blog/ws/2016/06/07/hero-images-guide
https://www.webmalama.com/the-best-full-screen-background-image-sizes-for-web-design/
In this example we use a full sized banner size 1920x1280
The screensize picked is half of the screen (50vh) and the position is center bottom because most content of this image seems to be at the bottom
The size of this image is 452kb
for wide screens min width 1200px
for desktops min-width:992px
for tablets min-width:768px
for tablets min-width:768px
*/
.full-width-banner {
background-image: url("/wp-content/themes/wbb-pagebuilder/assets/img/full-width-banner-min.jpg"); }
.full-width-banner .pattern-block {
margin-bottom: 0;
display: block; }
.full-width-banner .pattern-block .pattern-layer {
background-color: #777;
background-repeat: repeat;
cursor: default;
display: block;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
margin-bottom: 0; }
.full-width-banner .image-intro {
z-index: 999;
position: relative; }
/*doc
---
title: Video background
name: video-background
parent: media
---
For showing background videos we use the script vide.js
http://vodkabears.github.io/vide/
for this script you upload an mp4, ogv, webm and jpg video.
They all must have the same name
By default video is muted, looped and starts automatically.
*/
.video-background {
position: absolute;
z-index: 9999;
text-align: center;
overflow: auto;
height: 100vh; }
/*doc
---
title: Image Effects
name: image-effect
parent: media
---
#### parallax
The term 'parallax' refers to the apparent movement of objects when viewed from different positions.
The technique was originally used in 2D video games where background images moved slower than foreground images,
creating an illusion of depth. Who would have thought something popularized in 1982 arcade game Moon Patrol would become a major trend for web design 30 years later!
The effect is used in the hero addon.
*/
[data-image-effect="parallax"] {
background-attachment: fixed;
background-size: contain; }
figure {
margin: 0; }
img {
margin: 0;
max-width: 100%;
height: auto; }
.cortana-container {
max-width: 100% !important; }
.wide-container {
width: 1200px; }
.desktop-container {
width: 992px; }
.tablet-container {
width: 768px; }
.mobile-container {
width: 320px; }
/*doc
---
title: Tables
name: tables
category: Elements - Tables
---
Firstname
Lastname
Age
Jill
Smith
50
Eve
Jackson
94
*/
table {
border-collapse: collapse;
margin: 0.75em 0;
table-layout: fixed;
width: 100%; }
th {
border-bottom: 1px solid black;
font-weight: 600;
padding: 0.75em 0;
text-align: left; }
td {
border-bottom: 1px solid black;
padding: 0.75em 0; }
tr,
td,
th {
vertical-align: middle; }
/*doc
---
title: Text
name: text
category: Elements - Text
---
#### Inline Text Elements
```html_example
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
```
#### Blockquotes
Block quotes are marked up using ‹blockquote› tags. You may use an optional ‹cite› element to cite an attribution.
```html_example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
name of person
```
*/
body {
color: #000;
font-family: verdana;
font-size: 1rem;
line-height: 1.5rem; }
@media screen and (min-width: 320px) and (max-width: 480px) {
body {
font-size: 0.9rem; } }
hr {
border-bottom: 1px solid black;
border-left: 0;
border-right: 0;
border-top: 0;
margin: 1.5em 0; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0; }
/*doc
---
title: Paragraph
name: paragraph
parent: text
---
Paragraphs are preset with a body font size and a primary font, line height and spacing to match the overall vertical rhythm.
The main text is styled in Source Sans Pro Ligh
#### Default Text
```html_example
A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea.
A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions).
Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos,
similar to an underscore at the beginning of the new group.
The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
```
#### Lead text
A lead paragraph (also called a lead or lede) in journalism and sometimes other kinds of literature is the opening paragraph of an article, essay, news story or book chapter. Often called the lead, it usually occurs together with the headline or title.
It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.
```html_example
A lead paragraph (also called a lead or lede) in journalism and sometimes other kinds of literature is the opening paragraph of an article, essay, news story or book chapter. Often called the lead, it usually occurs together with the headline or title.
It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.
```
#### Medium Text
An additional medium text class as alternative for the large text.
```html_example
This is a lead paragraph. Lead paragraphs are preset with a body font size and a primary font, line height and spacing to match the overall vertical rhythm.
```
#### Large text
An additional lead class alters a paragraph’s presentation, and can be used at the start of an article
```html_example
This is a large text. Large texts are used in letterboxes and are preset with a body font size and a primary font, line height and spacing to match the overall vertical rhythm.
```
*/
p {
margin: 0 0 0.75em;
font-size: 16px;
font-size: 1rem;
line-height: 1.4; }
.lead {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.6; }
@media screen and (min-width: 320px) {
.medium-text {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3; } }
@media screen and (min-width: 768px) {
.medium-text {
font-size: 24px;
font-size: 1.5rem; } }
@media screen and (min-width: 320px) {
.large-text {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.3; } }
@media screen and (min-width: 768px) {
.large-text {
font-size: 36px;
font-size: 2.25rem; } }
/*doc
---
title: Inline text (Text-level Semantics)
name: inline
parent: text
---
#### Links and anchors
The a element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web.
According to WCAG 2.0, color isn’t sufficient for a link to be accessible. For general usability they suggest using underlines on links as a best practice.
Some rules to apply using text links
Reference: https://www.w3.org/WAI/WCAG20/quickref/20140916/#visual-audio-contrast-without-color https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/working-examples/G183/link-contrast.html https://www.sitepoint.com/15-rules-making-accessible-links/
```html_example
this is a text link
This is a reference to an external page that opens a new tab Opens in new window
```
#### Stressed emphasis
The em element is used to denote text with stressed emphasis, i.e., something you’d pronounce differently. Where italicizing is required for stylistic differentiation, the i element may be preferable.
```html_example
this is some text with one emphased element as an example
```
#### Strong importance
The strong element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the b element may be preferable.
```html_example
this is some text with a couple of words in a strong tag as an example
```
*/
a {
color: #0000FF;
text-decoration: underline;
transition: color 150ms ease; }
a:active, a:focus, a:hover {
color: #0000bf;
background-color: #cccccc; }
/*doc
---
title: Heading
name: heading
parent: text
---
The styles for all of the header elements that are balanced and based on a modular scale.
```html_example
h1. first level header.
h2. Second level header.
h3. Third level header.
h4. Fourth level header.
h5. Fifth level header.
h6. Sixth level header.
```
The heading above is a first-level, heading one that may be used for page
titles as well as titles in sectioning elements including ‹body›, ‹section› and ‹article›.
Other headings are lower level, Use to create a document, section or article outline.
### Other Heading
#### Section title
Section titles are always part carnas thin and part handwriting
``` html_example
This is a section heading in a secondary font
```
#### Cards Heading
For Cards we use this heading
```html_example
This is a heading for cards
```
#### Articles sub-heading
For articles we use special heading
```html_example
This is a sub-header for articles
```
#### Widget title
Widget titles are special classes generated by WordPress widgets
```html_example
This is a heading for widgets
```
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: verdana;
line-height: 1.1;
margin: 0 0 0.75em; }
h1 {
font-size: 3.15733em; }
h2 {
font-size: 2.36859em; }
h3 {
font-size: 1.77689em; }
h4 {
font-size: 1.333em; }
h5 {
font-size: 1.333em;
font-style: italic; }
h6 {
font-size: 1.333em;
text-transform: uppercase; }
.section-heading {
font-family: georgia;
text-transform: uppercase; }
.entry-content h2 {
font-family: verdana;
font-size: 1.333em;
margin: 0;
line-height: 1.3; }
.widgettitle {
font-family: georgia;
text-transform: uppercase;
font-size: 1.333em; }
h3.card-title {
font-size: 1.333em; }
/*doc
---
title: Buttons
name: buttons
category: Elements - Buttons
---
We have an HTML element specifically meant for controlling a user interface: button.
The distinction isn’t just semantic. 'button' and 'a' respond to different keyboard events, and screen readers treat them differently.
By using an 'a' , we tell screen readers that the standard behavior should apply.
Pressing the enter key should navigate to the URL of the link. Visually disabled users shouldn’t have to deal with confusing interactions
just because sighted users can’t tell the difference.
Reference:
https://css-tricks.com/use-button-element/
Each project requires different sets of button designs, for creating them we use the wonderful button styles from unicorn-ui. For more info and all
options check http://unicorn-ui.com/buttons/
By default we only import the shapes and sizes and border and borderless buttons, but depending the project you can decide which classes to use.
But in most cases we will use the following buttons
```html_example
some link buttonbutton with a long label
```
*/
.card[data-card-type$="bottom"] {
display: inline-block; }
.card[data-card-type$="bottom"] .card-image {
display: none; }
.card[data-card-type$="bottom"] .card-image-bottom {
display: block; }
.card {
position: relative;
overflow: hidden;
zoom: 1;
line-height: 1; }
/*doc
---
title: Navigation
name: navigation
category: Components - Navigation
---
*/
/*doc
---
title: Off Canvas
name: off-canvas
parent: navigation
---
*/
.launch-menu {
position: fixed;
top: 10px;
z-index: 999999;
width: 60px;
height: 60px;
cursor: pointer;
transition: all 0.3s ease; }
.c-hamburger {
display: block;
overflow: hidden;
margin: 0;
padding: 0;
width: 60px;
height: 60px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background 0.3s; }
.c-hamburger:focus {
outline: none;
background-color: transparent; }
.c-hamburger:hover {
background-color: transparent; }
.c-hamburger span {
display: block;
position: absolute;
top: 29px;
left: 9px;
right: 18px;
height: 4px;
width: 70%;
background: #000000; }
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 4px;
background-color: #000000;
content: ""; }
.c-hamburger span::before {
top: -15px; }
.c-hamburger span::after {
bottom: -15px; }
/**
* Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
* down to center and transform into an "x".
*/
.c-hamburger--htx {
background-color: rgba(255, 255, 255, 0); }
.c-hamburger--htx span {
transition: background 0s 0.3s; }
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s; }
.c-hamburger--htx span::before {
transition-property: top, transform; }
.c-hamburger--htx span::after {
transition-property: bottom, transform; }
/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
background-color: transparent; }
.c-hamburger--htx.is-active span {
background: none; }
.c-hamburger--htx.is-active span::before {
top: 0;
transform: rotate(45deg); }
.c-hamburger--htx.is-active span::after {
bottom: 0;
transform: rotate(-45deg); }
.c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after {
transition-delay: 0s, 0.3s; }
/* -----------------------------------------------------------------------------
NAVIGATION MENU
----------------------------------------------------------------------------- */
.mobile-menu.menu-left .launch-menu {
left: 20px; }
.mobile-menu.menu-left .launch-menu.active {
left: 250px; }
.mobile-menu.menu-left nav,
.mobile-menu.menu-left nav .sub-menu {
left: -320px; }
.mobile-menu.menu-left nav.active,
.mobile-menu.menu-left nav .sub-menu.active {
left: 0; }
.mobile-menu.menu-right .launch-menu {
right: 20px; }
.mobile-menu.menu-right .launch-menu.active {
right: 250px; }
.mobile-menu.menu-right nav,
.mobile-menu.menu-right nav .sub-menu {
right: -320px;
left: inherit; }
.mobile-menu.menu-right nav.active,
.mobile-menu.menu-right nav .sub-menu.active {
right: 0; }
@media screen and (min-width: 320px) {
.mobile-menu.mobile {
display: block; } }
@media screen and (min-width: 768px) {
.mobile-menu.mobile {
display: none; } }
@media screen and (min-width: 320px) {
.mobile-menu.tablet {
display: block; } }
@media screen and (min-width: 992px) {
.mobile-menu.tablet {
display: none; } }
@media screen and (min-width: 320px) {
.mobile-menu.desktop {
display: block; } }
.mobile-menu nav {
position: fixed;
top: 0;
z-index: 99999;
width: 320px;
height: 100%;
padding: 0;
overflow: hidden;
background-color: black;
transition: all 0.3s ease; }
.mobile-menu nav ul {
list-style: none;
padding: 0;
top: 0;
left: 0;
width: 340px;
height: 100%;
overflow-y: scroll; }
.mobile-menu nav ul li {
padding: 0.3em 1em;
border-bottom: 1px solid black;
transition: all 0.3s ease; }
.mobile-menu nav ul li a {
color: #999999; }
.mobile-menu nav ul li:first-child {
margin-top: 60px; }
.mobile-menu nav ul li:last-child {
border-bottom: 0; }
.mobile-menu nav ul li:hover {
background-color: #333333; }
.mobile-menu nav ul li ul.sub-menu {
position: absolute;
top: 0;
background-color: black;
transition: all 0.3s ease;
display: none; }
.mobile-menu nav ul li ul.sub-menu li {
position: relative; }
.mobile-menu nav ul li ul.sub-menu li:first-child {
padding-left: 2em;
text-transform: uppercase; }
.mobile-menu nav ul li ul.sub-menu li:first-child button {
border: 0;
background-color: transparent;
font-size: 1em;
text-transform: uppercase;
-webkit-appearance: none;
font-family: verdana; }
.mobile-menu nav ul li ul.sub-menu li:first-child button:hover {
cursor: pointer; }
.mobile-menu nav ul li ul.sub-menu li:first-child:before {
content: '';
position: absolute;
top: 50%;
margin-top: -0.3em;
margin-left: 1em;
left: 0;
/* By using an em scale, the arrows will size with the font */
width: 0.6em;
height: 0.6em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(-135deg); }
.mobile-menu nav ul li[class*="-has-children"] a {
position: relative; }
.mobile-menu nav ul li[class*="-has-children"] a:after {
content: '';
position: absolute;
top: 50%;
margin-top: -6px;
left: 0;
margin-left: 280px;
/* By using an em scale, the arrows will size with the font */
width: 12px;
height: 12px;
border-right: 3px solid black;
border-top: 3px solid black;
transform: rotate(45deg); }
.mobile-menu nav ul li:not(.menu-item-has-children) a:after {
content: '';
border: 0; }
.main-container {
transition: all 0.3s ease;
transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0); }
.main-container.translate-left {
transform: translate3d(-320px, 0, 0);
-moz-transform: translate3d(-320px, 0, 0);
-webkit-transform: translate3d(-320px, 0, 0); }
.main-container.translate-right {
transform: translate3d(320px, 0, 0);
-moz-transform: translate3d(320px, 0, 0);
-webkit-transform: translate3d(320px, 0, 0); }
/*doc
---
title: Main Navigation
name: main-navigation
parent: navigation
---
*/
.site-navigation {
margin-top: 30px; }
@media screen and (min-width: 320px) {
.site-navigation {
display: none; } }
@media screen and (min-width: 768px) {
.site-navigation {
display: block; } }
.site-navigation.navigation-left {
text-align: left;
padding-right: 30px; }
.site-navigation.navigation-left ul li .sub-menu {
left: 0; }
.site-navigation.navigation-left ul li .sub-menu li [class*="sub-menu"] {
left: 100%; }
.site-navigation.navigation-right {
text-align: right;
padding-left: 30px; }
.site-navigation.navigation-right ul li .sub-menu {
right: 0; }
.site-navigation.navigation-right ul li .sub-menu li [class*="sub-menu"] {
right: 100%; }
.site-navigation ul li {
list-style-type: none;
display: inline-block;
position: relative;
white-space: nowrap;
padding: 0.5em;
transition: all 0.3s ease; }
.site-navigation ul li a:hover {
cursor: pointer; }
.site-navigation ul li:hover {
cursor: pointer; }
.site-navigation ul li:hover > .sub-menu {
display: block; }
.site-navigation ul li .sub-menu {
display: none;
position: absolute;
top: 100%;
margin: 0;
padding: 0; }
.site-navigation ul li .sub-menu li [class*="sub-menu"] {
top: 0; }
.wbb-menu-widget .navigation-menu li .sub-menu li {
display: block;
position: relative; }
.wbb-menu-widget .navigation-menu li .sub-menu li .sub-menu {
left: 100%; }
/*doc
---
title: Image Block
name: image-block
parent: image-blocks
---
```html_example
This is the section title
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
````
*/
.accordion {
background-color: #f6f6f6;
border: 1px solid gainsboro;
margin: 0 0 1.5em 0;
padding: 0; }
.accordion li {
list-style: none;
border-top: 1px solid gainsboro;
margin: 0; }
.accordion li > a {
color: #333;
display: block;
padding: 0.75em 1.618em;
text-decoration: none; }
.accordion li:last-child {
border: 0;
border-top: 1px solid gainsboro; }
.accordion li:first-child {
border-top: none; }
.accordion ul.submenu {
border-top: solid 1px gainsboro;
display: none;
padding: 0; }
.accordion ul li {
background-color: #e9e9e9;
padding: 0.75em 1.618em; }
.accordion ul li:first-child {
border-top: 1px solid gainsboro;
box-shadow: inset 0 1px 1px #d9d9d9; }
/*doc
---
title: Article
name: article
category: Sections - Article
---
The main section is the part of the page that shows the content. The entry-content style is added in the entry-content file in base.
```html_example
This is a longer headline that will take two lines in a normal screen
This is the lead paragraph. A lead paragraph (also called a lead or lede) in journalism and sometimes other kinds of literature is the opening paragraph of an article, essay, news story or book chapter. Often called the lead,
it usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.[1]
This is a subheading
A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea.
A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions).
Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos,
similar to an underscore at the beginning of the new group.
The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
```
*/
[data-grid-type="flex"] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow: auto; }
[data-grid-type="flex"] li,
[data-grid-type="flex"] > .card {
flex-grow: 1; }
[data-grid-type="flex"][data-columns="2"] li,
[data-grid-type="flex"][data-columns="2"] > .card {
flex-basis: 25em; }
[data-grid-type="flex"][data-columns="3"] li,
[data-grid-type="flex"][data-columns="3"] > .card {
flex-basis: 19em; }
[data-grid-type="flex"][data-columns="4"] li,
[data-grid-type="flex"][data-columns="4"] > .card {
flex-basis: 15em; }
[data-grid-type="flex"][data-columns="5"] li,
[data-grid-type="flex"][data-columns="5"] > .card {
flex-basis: 12em; }
[data-grid-type="flex"][data-columns="6"] li,
[data-grid-type="flex"][data-columns="6"] > .card {
flex-basis: 11em; }
/*doc
---
title: Alternate
name: alternate
parent: grid
---
*/
[data-grid-type="alternate"] {
margin: 0;
display: block; }
[data-grid-type="alternate"] li {
margin: 0; }
[data-grid-type="alternate"] li:nth-child(2n+1) .card-image {
float: right; }
/*doc
---
title: Site Footer
name: site-footer
category: Sections - Site-footer
---
Site footer needs to be more dynamic and should be set in the wp-admin
For now we have two containers, one for logo and one for the other content.
*/
.site-footer {
max-width: 100%;
margin-left: auto;
margin-right: auto;
width: 100%;
padding: 1vw 5vw 0vw; }
.site-footer:after {
content: " ";
display: block;
clear: both; }
.site-footer .widget-container {
display: flex;
flex-direction: row;
justify-content: space-around; }
.site-footer .widget-container li {
min-width: 20%; }
/*doc
---
title: Site Header
name: site-header
category: Sections - Site-header
---
The set header has some options in wp-admin to switch between a visible or a transparent header.
We have two widget areas where we can set the widgets this gives us several options for creating a header
We use a flexbox approach with justified content, so widget 1 and widget 2 are aligned to the left/right.
Styling of the header will be easy because we only need to change some flexbox settings. Also we will create a library here of different options
with their settings.
```html_example
widget 1
widget 2
```
Options should be to show a relative or an absolute header (so visible or header over the content)
Fixed menu (sticky)
full width or width of the container etc....
For now we have two containers, one for logo and one for the navigation.
when site-header is set to absolute it will show header over the container below.
When the header-block is 100% the menu will be aligned below the logo.
For ideas check
https://www.elegantthemes.com/blog/resources/exploring-divi-2-4-all-new-header-styles-and-design-settings
*/
/*.site-header {
@include outer-container(100%);
background-color:$header-background-color;
z-index:999;
width:100%;
.header-widgets {
@include fill-parent();
.widget-container {
display: flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
}
}
}*/
.site-header {
display: flex;
justify-content: space-between;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-color: transparent;
z-index: 999;
width: 100%; }
.site-header:after {
content: " ";
display: block;
clear: both; }
.site-header .header-widgets {
width: 100%;
flex: 1; }
.site-header.wp-relative-header {
position: relative; }
.site-header.wp-absolute-header {
position: absolute; }
/*doc
---
title: Homepage
name: homepage
category: Templates - Homepage
---
``` html_example
A letterbox is great for creating a focal point and lays different text sizes.
