Infohunt Styleguide

Grid

8px grid system

Gutter: 24px

Columns: 12

Colors

$primary
$primary-accent
$primary-light
$secondary
$light / $gray-100
$black
$white

Typography

Font used: Montserrat (300, 400, 500, 600, 700, 800)

Display title

Heading 1

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5
Heading 5
Lead

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

Regular (body text)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

Text link
Example content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, ducimus amet optio voluptatum ut numquam debitis ea voluptatem possimus similique dolor. Odio necessitatibus reiciendis ducimus, mollitia neque rem doloremque accusantium!

Buttons

Regular size buttons

Small size buttons

Large size buttons

Lists

  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae adipisci molestiae nobis possimus amet.
  • Lorem ipsum
    • Lorem ipsum
    • Consequatur deleniti quasi, voluptatum in quos error, necessitatibus fuga rem aut eius neque.
    • Lorem ipsum
  • Lorem ipsum
  1. Lorem ipsum
  2. Lorem ipsum
  3. Lorem ipsum
  4. Lorem ipsum
  5. Lorem ipsum

Table

# Column heading Column heading Column heading
1 Column content Column content Column content
1 Column content Column content Column content
1 Column content Column content Column content
1 Column content Column content Column content

Form elements

Accordion

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Pellentesque dapibus hendrerit tortor. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Curabitur vestibulum aliquam leo. Aenean massa. Maecenas malesuada. Ut non enim eleifend felis pretium feugiat. Nam adipiscing. Fusce egestas elit eget lorem. Cras non dolor.

Sed cursus turpis vitae tortor. Nulla porta dolor. Fusce pharetra convallis urna. Duis leo. In hac habitasse platea dictumst. Morbi ac felis. Sed lectus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla porta dolor. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Aenean massa. Morbi nec metus. Quisque id mi. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Proin magna.

Contacts card

Kohatäite pilt

Mari Maasikas

Noorsootöötaja

Uudise card

Päris pildiga uudis

Tallinn Music Week ja Infohunt kutsuvad kokku 100 noort, et 48 tunnises häkatonis üheskoos leida vastuseid ja luua reaalseid lahendusi noorte seas just siin ja praegu kõige põletavamatele küsimustele...

Kohatäite pilt

Vabaõhuretk koos matkajuhiga

Tallinn Music Week ja Infohunt kutsuvad kokku 100 noort, et 48 tunnises häkatonis üheskoos leida vastuseid ja luua reaalseid lahendusi noorte seas just siin ja praegu kõige põletavamatele küsimustele...

Sündmuse card

Vabaõhuretk koos matkajuhiga

  • 2. august 18:00 - 21:00
  • Kuressaare teemapark
EST 180 €
Kohatäite pilt

Kudumisklubi

  • 2. august 18:00 - 21:00
  • Muhu
EST Tasuta €

Koha card

Albu noortekeskus

  • E: T: 12:00-17:30
    K: 12:00-16:15
    N: 13:00-17:30
    R: 12:00-16:15
    L, P: Suletud
Kohatäite pilt

Albu noortekeskus

  • E-R: 07:00-16:00
    L, P: Suletud

Event card small

"Tunne oma kodusaart" väljakutse

  • juuli - 3. august
  • Kuressaare teemapark

News card small