The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.
What are Hawk Blocks?
Blocks are the most commonly used components of the website which can be placed in your project. They are constructed according to the BEM methodology, using SCSS and Hawk Variables set. Hawk Blocks are thoughtful to be as abstract as they should to be both universal and useful.
Titles
Titles are the main part of the website's content as you can suppose. They have three variants: regular (default), large and small which are presented below.
-
Large section title
-
Section title
-
Small section title
-
Large section subtitle
-
Section subtitle
-
Small section subtitle
-
Large subsection title
-
Subsection title
-
Small subsection title
-
Subsection subtitle
-
Simple title
-
Text title
-
Small title
HTML
<h2 class="section-title">Section title</h2>
SCSS
Text
Text block is the basic component of the website. It exists just to present the paragraphs of content on the webpage.
It deals with following proper features:
- font size
- line height
- font family
- space between paragraphs
Moreover, Text component works with common elements:
- ordered and unordered list
- links
- emphasizes
-
Large text is a variant of basic Text component of the website. It exists just to present the paragraphs of content on the webpage.
It deals with following proper features:
- font size
- line height
- font family
- space between paragraphs
Moreover, Text component works with common elements:
- ordered and unordered list
- links
- emphasizes
-
Small text is a variant of basic Text component of the website. It exists just to present the paragraphs of content on the webpage.
It deals with following proper features:
- font size
- line height
- font family
- space between paragraphs
Moreover, Text component works with common elements:
- ordered and unordered list
- links
- emphasizes
HTML
<div class="text">
<p>
<em>Text</em> block is the basic component of the website.
It exists just to present the paragraphs of content on the webpage.
</p>
<p>
It deals with following proper features:
</p>
<ol>
<li>font size</li>
<li>line height</li>
<li>font family</li>
<li>space between paragraphs</li>
</ol>
<p>
Moreover, <em>Text</em> component works with common elements:
</p>
<ul>
<li>ordered and unordered list</li>
<li><a href="/">links</a></li>
<li><em>emphasizes</em></li>
</ul>
</div>
SCSS
HTML
<button class="button" type="button">
<div class="button__wrapper">
<div class="button__inner">
Button
</div>
</div>
</button>
SCSS
Form fields
Form fields are necessary to interact with user and obtain data from her. They might have title or placeholder, border or underline.
HTML
-
<label class="form-field">
<div class="form-field__wrapper">
<input class="form-field__core" type="with-title" name="" />
</div>
</label> -
<label class="form-field">
<div class="form-field__wrapper">
<input class="form-field__core" type="with-placeholder" name="" />
</div>
</label> -
<label class="form-field form-field--underline">
<div class="form-field__wrapper">
<input class="form-field__core" type="with-placeholder" name="" />
</div>
</label>
SCSS
Choice fields (checkboxes, radio buttons)
HTML
-
<label class="choice-item">
<div class="choice-item__field">
<div class="choice-field">
<input class="choice-field__core" type="checkbox" name="exemplary-checkbox" value="Exemplary checkbox" />
<div class="choice-field__field">
</div>
</div>
</div>
<div class="choice-item__description">
Exemplary checkbox
</div>
</label> -
<label class="choice-item">
<div class="choice-item__field">
<div class="choice-field choice-field--radio">
<input class="choice-field__core" type="radio" name="exemplary-radio-button" value="Exemplary radio button" />
<div class="choice-field__field">
</div>
</div>
</div>
<div class="choice-item__description">
Exemplary radio button
</div>
</label>
SCSS
Tiles
Buttons are the main clickable blocks. They are filled or stroke, large, small or regular in some colours and can be freely extended and modified.
HTML
<article class="tile tile--clear">
<div class="tile__wrapper">
<div class="tile__base-layer"
style="background-image: url('/img/pictures/husaria.jpg')">
</div>
<div class="tile__above-layer">
</div>
</div>
</article>
-
The winged hussars arrived
-
The winged hussars arrived
The Polish hussars were one of the main types of cavalry in Poland.
HTML
<article class="tile tile--standard">
<div class="tile__wrapper">
<div class="tile__base-layer"
style="background-image: url('/img/pictures/husaria.jpg')">
</div>
<div class="tile__above-layer">
</div>
<div class="tile__content-layer">
<div class="tile__inner">
<header class="tile__header">
<h3 class="simple-title">The winged hussars arrived</h3>
</header>
<div class="tile__content">
<div class="text">
<p>
The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.
</p>
</div>
</div>
</div>
</div>
</div>
</article>
-
The winged hussars arrived
The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.
-
The winged hussars arrived
The Polish hussars were one of the main types of cavalry in Poland.
HTML
<article class="tile tile--content-revealing">
<div class="tile__wrapper">
<div class="tile__base-layer"
style="background-image: url('/img/pictures/husaria.jpg')">
</div>
<div class="tile__content-layer">
<div class="tile__inner">
<header class="tile__header">
<h3 class="simple-title">The winged hussars arrived</h3>
</header>
<div class="tile__content">
<div class="text">
<p>
The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.
</p>
</div>
</div>
</div>
</div>
</div>
</article>
-
The winged hussars arrived
The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.
-
The winged hussars arrived
The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.
HTML
<article class="tile tile--content-beneath">
<div class="tile__wrapper">
<div class="tile__base-layer"
style="background-image: url('/img/pictures/husaria.jpg')">
</div>
<div class="tile__above-layer">
</div>
</div>
<div class="tile__content-container">
<header class="tile__header">
<h3 class="simple-title">The winged hussars arrived</h3>
</header>
<div class="tile__content">
<div class="text">
<p>
The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.
</p>
</div>
</div>
</div>
</article>
SCSS
Icon item
Lorem ipsum dolor sit amet
Quisque adipiscing elit odio, fermentum rutrum. In sodales wisi accumsan luctus.
HTML
-
<article class="icon-item">
<div class="icon-item__icon-container">
<img class="icon-item__icon" src="/img/icons/large/icon-clock.svg" alt="Icon clock" />
</div>
<div class="icon-item__description-container">
<header class="icon-item__header">
<h3 class="simple-title">Lorem ipsum dolor sit amet</h3>
</header>
<div class="text">
<p>
Quisque adipiscing elit odio, fermentum rutrum. In sodales wisi accumsan luctus.
</p>
</div>
</div>
</article>
SCSS
Icon label
-
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet
HTML
-
<article class="icon-label">
<div class="icon-label__icon-container">
<img class="icon-label__icon" src="/img/icons/medium/icon-email.svg" alt="E-mail" />
</div>
<div class="icon-label__description-container">
<p class="text">
Lorem ipsum dolor sit amet
</p>
</div>
</article>
SCSS
Titled label
-
Helpline +48 723 917 812
HTML
-
<section class="titled-label">
<header class="titled-label__header">
Helpline
</header>
<div class="titled-label__content">
+48 723 917 812
</div>
</section>
SCSS
Extended icon
Extended icon is an abstract class which other icons can extend. It's constructed as a block with :before and :after pseudoelements laying on each other (:after is above the :before). :before is visible by default and :after could be displayed on hover or when the icon is active.
When the icon extends extended-icon, it should have dimensions and appropriate pictures for :before and :after set.
Extended icon is very useful to construct interface icons that should be defined once. For icons, which should rather use regular img elements (i.e. icons changed in CMS system), consider using the Plain extended icon.
HTML
-
<div class="icon-email"></div>
SCSS
Plain extended icon
Plain extended icon is a container for icon which changes its appearance on some actions (hover or state of the object) and needs two images to work properly and can't be a structure extending the extended-icon because it can't be defined in CSS stylesheet and needs to be changable for example in the CMS system.
It is constructed as a block with base-layer and above-layer elements laying on each other. Base-layer is visible by default and sets up the object's dimensions.
HTML
-
<div class="plain-extended-icon plain-extended-icon--interactive">
<div class="plain-extended-icon__base-layer">
<img class="plain-extended-icon__icon" src="/img/icons/medium/icon-email.svg" alt="" />
</div>
<div class="plain-extended-icon__above-layer">
<img class="plain-extended-icon__icon" src="/img/icons/medium/icon-email-primary.svg" alt="" />
</div>
</div>
SCSS
Lotem ipsum dolor sit amet
header.section-header
h2.section-title
div.text.text--distinguished
Maecenas nec quam. Ut a bibendum tellus, quis velit nulla nisl risus, consequat diam. Fusce aliquet ipsum sit amet, est. Curabitur nec ultrices et, scelerisque ligula, quis lorem nec magna ac turpis velit, vitae sagittis porta, turpis viverra pede dictum a, urna.
div.text
Aenean augue turpis, accumsan lectus bibendum purus feugiat tempus. Suspendisse auctor, sapien aliquet vulputate, arcu sit amet, accumsan et, elementum fringilla gravida. Duis ac lacus. Aenean et magnis dis parturient montes, nascetur ridiculus mus. Nunc vulputate.
Morbi porttitor, nulla ac massa in nisl. Nullam tellus felis auctor vitae, imperdiet neque. Etiam tempor auctor, egestas turpis. Fusce aliquam euismod nulla pulvinar augue. Pellentesque varius nunc ac turpis tellus, elementum vitae, vehicula neque. Phasellus pulvinar vitae, imperdiet nec.
header.section-subheader
h3.section-subtitle
Quisque facilisis gravida, erat blandit libero
Donec eget urna. Nulla iaculis odio, in faucibus condimentum ligula, sed lorem scelerisque fermentum malesuada. In hac habitasse platea dictumst. Vestibulum ante sodales nulla in faucibus ligula, elementum quis, aliquam turpis.
Fusce ullamcorper feugiat, pulvinar interdum. Etiam lobortis velit nec mauris. Pellentesque eu enim. Duis ipsum. Suspendisse dolor sit amet sapien accumsan sit amet, varius risus nec mauris. Nullam pharetra hendrerit vitae, pede.
SCSS