Panel

Create layout boxes with different styles.

UIkit uses panels to outline certain sections of your content, which can be styled differently. Typically, panels are arranged in grid columns from the Grid component.


Usage

The Panel component consists of the panel itself, the panel title and a panel badge. To prevent redundant white space, top and bottom margins are removed from the panel's content.

Class Description
.uk-panel Add this class to a <div> element to define the Panel component.
.uk-panel-title Add this class to a heading to create the panel title.
.uk-panel-badge Add this class to a <div> element to create a panel badge. The easiest way to style your badge, is by adding the modifier classes from the Badge component.

Example

Hot

Title

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

NOTE By default, a panel is blank and has no styling. That is why it is important to add a modifier class, which gives the panel some styling. In our examples we used the .uk-panel-box class.

Markup

<div class="uk-panel">
    <div class="uk-panel-badge uk-badge">...</div>
    <h3 class="uk-panel-title">...</h3>
    ...
</div>

Panels in a grid

This is a short example of how to use panels with the Grid component. Both panels are using the .uk-width-medium-1-2 class.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel">...</div>
    </div>
</div>

Modifiers

Modifier classes are necessary to add a specific style to panels. UIkit includes a number of panel modifiers and you also have the possibility to create your own.

Panel box

Add the .uk-panel-box class to create a visually styled box. This is the default panel modifier.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box

Markup

<div class="uk-panel uk-panel-box">...</div>

NOTE To create a hover effect on the panel, just add the .uk-panel-box-hover class. This comes in handy when working with anchors.


Panel box primary

Add the .uk-panel-box-primary class to modify the box panel and emphasize it with a different color.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-primary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-primary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-primary

Markup

<div class="uk-panel uk-panel-box uk-panel-box-primary">...</div>

NOTE To create a hover effect on the panel, just add the .uk-panel-box-primary-hover class. This comes in handy when working with anchors.


Panel box secondary

Add the .uk-panel-box-secondary class to modify the box panel and give it a light background.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-secondary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-secondary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-secondary

Markup

<div class="uk-panel uk-panel-box uk-panel-box-secondary">...</div>

NOTE To create a hover effect on the panel, just add the .uk-panel-box-secondary-hover class. This comes in handy when working with anchors.


Panel hover

Add the .uk-panel-hover class to add a hover effect to the panel. This comes in handy when using the panel as an anchor.

Example

Markup

<a class="uk-panel uk-panel-hover" href="">...</a>

Panel header

Add the .uk-panel-header class to separate the panel title and content with a horizontal line.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-header

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-header

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-header

Markup

<div class="uk-panel uk-panel-header">...</div>

Panel space

Add the .uk-panel-space class to increase the spacing around the panel content.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-space

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-space

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-space

Markup

<div class="uk-panel uk-panel-space">...</div>

Panel divider

Add the .uk-panel-divider class to separate vertically stacked panels with lines.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-divider

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-divider

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-divider

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-divider">...</div>
        <div class="uk-panel uk-panel-divider">...</div>
        <div class="uk-panel uk-panel-divider">...</div>
    </div>
</div>

NOTE Use the .uk-grid-divider class from the Grid component to separate grid columns.


Panel box with teaser

To display an image inside a panel box that is attached to the border of the panel without any spacing, just add the .uk-panel-teaser class to a <div> element inside the panel.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

<div class="uk-panel uk-panel-box">
    <div class="uk-panel-teaser">
        <img src="" alt="">
    </div>
</div>

Panel with icons

Easily apply an icon from our Icon component to your panel by adding one of the .uk-icon-* classes to an <i> or <span> element inside the panel title.

Example

Panel

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

Panel

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

Panel

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

Markup

<div class="uk-panel">
    <h3 class="uk-panel-title"><i class="uk-icon-*"></i>...</h3>
</div>

   A 2023/2024-es tanévből hátralévő napok száma          

Friss hírek

Határtalanul

Határtalanul

Title Text

Error: Specified module position doesn't exist or is blank!
Error: Specified module position doesn't exist or is blank!
Error: Specified module position doesn't exist or is blank!

Napraforgó Alapítvány

Híreink

  • 2022 márc. 22

    Hirdetmény 2022 beiratkozás

    BEIRATKOZÁS A 2022/20223-AS TANÉVRE  
  • 2021 szept. 27

    Hunyadi-bál meghívó

    Tisztelt Szülők! Kedves Támogatók! Szeretnénk Önöket meghívni a Gyermekeinkért Hunyadi Tiszaújváros Alapítványa által október 15-én este megrendezésre kerülő Hunyadi-bálra. A bál bevételét a gyermekek számára szervezett szabadidős programokra szeretnénk fordítani. A részleteket az osztályfőnökök fogják ismertetni Önökkel. Kérjük, hogy részvételi szándékukat október 11-ig jelezzék az osztályfőnök felé! Azoknak a szülőknek, akik nem tudnak részt venni a rendezvényen, lehetőségük lesz támogatói jegyek vásárlására. Szívesen fogadjuk a szülők és az osztályok felől érkező tombolatárgyak felajánlását is. Bízunk benne, hogy minél többen megtisztelnek bennünket ezen a programon is, és egy jó hangulatú estét töltünk majd el együtt. A szervezők nevében tisztelettel: Victorné Kardos Erika            Markovicsné Szabó Enikő    kuratóriumi elnök                      intézményvezető
  • 2021 aug. 25
  • 2021 máj. 31

    Honvédelmi tábor 2021 tájékoztatás

    Tisztelt Szülők! Kedves Gyerekek! A 2021-es Honvédelmi tábor felhívásáról az alábbi linken tájékozódhatnak/tájékozódhattok: Honvédelmi tábor 2021  
  • 2021 márc. 07

    Mindenki táncolt a Hunyadiban!

      Jó hangulat volt a Hunyadiban a kockás&cowboy napon, mindenki táncolt! ÚJ! https://www.youtube.com/watch?v=Uz40xa1lcAk  
  • 2021 márc. 03

    Hívogató

    Kedves Érdeklődők! Az Iskolakóstolgató 2020/2021 menüsávban egy kisfilmet nézhetnek meg iskolai programjainkról a "Vár a Hunyadi!" legördülő menüben. (A YouTube videót elindítva, a jobb alsó sarokban lévő négyzetre kattintva teljes képernyőre válthatnak.) Kérjük szánjanak rá néhány percet!
  • 2021 febr. 19

    Iskolakóstolgató programjaink 2020/2021

    "ISKOLAKÓSTOLGATÓ" Kérjük, kísérjék figyelemmel programjainkat az Iskolakóstolgató 2020/2021 fül alatt!
  • 2019 dec. 04

    EUROEXAM nyelvvizsga

    EUROEXAM próbanyelvvizsga Intézményünk próbanyelvvizsgát szervezett a 5-8. évfolyamos emelt szintű angol nyelvet tanuló diákoknak, melyre angoltanáraik készítették fel őket. Sok sikert kívánunk! A nyelvvizsgára az alábbi feliratra kattintva tudtok regisztrálni:  
  • 2019 okt. 20

    Országos Diákolimpia

    Október 19-én iskolánk távolugró csapata a kiváló 3. helyezést érte el az Országos Diákolimpia atlétikai ügyességi csapatbajnokságán. A csapat tagjai: Karikó Zsolt, Urbán Ádám, Fenyves Tamás, Lindi Márton 8.a, Halas Erik 6.a. Felkészítők: Ujlaky Ildikó testnevelő és Jakab István edző Büszkék vagyunk rájuk!
  • 2019 ápr. 02

    Tehetségpont

        Akkreditált Tehetségpont lett a Hunyadi Iskolánk 2017-ben ismét elnyerte az Akkreditált  Tehetségpont címet. Ezzel jogosultak lettünk a nyilvános dokumentumainkon az Akkreditált  Tehetségpont cím használatára. Jelenleg a Kiváló Akkreditált Tehetségpont címre pályázunk.                                                                                                                                                                                                                              
  • 2019 márc. 07

    e-Ügyintézés

        Tisztelt Szülők! Tájékoztatjuk, hogy intézményünkben 2019.03.01-től bevezetésre került az elektronikus ügyintézési rendszer. Az ügyintézést a fenti logóra vagy az alábbi linkre kattintva érheti el: https://eugyintezes.e-kreta.hu/kezdolap A rendszer bevezetésével kapcsolatban készült tájékoztató anyagokat, cikkeket a http://kk.gov.hu/download/a/cd/52000/KAFFEE%20projekt%20t%C3%A1j%C3%A9koztat%C3%B3%20kiadv%C3%A1ny.pdf linken találja.    
  • 2018 szept. 08

    Pályaválasztási Kiállítás 2018. november 07.

    Pályaválasztási Kiállítás 2018.11.07.  
  • 2018 szept. 01

    Szülői tájékoztató 2022/2023

    Kedves Szülők! VÁLTOZÁS! A 2022-2023-as tanévről szóló tájékoztatót az alábbi linken érik el: Szülői tájékoztató a 2022-2023-as tanévről  
  • 2018 aug. 22

    Tanévnyitó

     Tisztelt Szülők! Kedves Gyerekek! Tanévnyitó ünnepségünk  2021.09.01-jén, az első tanítási napon 8 órakor kezdődik. Az ünneplő ruha viselése mindenkinek kötelező! A tanulók a tankönyveket is ezen a napon kapják meg. Reméljük, hogy jól kipihentétek magatokat, mi már nagyon várunk Benneteket! Az 1. osztályos tanulók szüleit is szeretettel várjuk!                                  2021-2022-es tanév osztály            terem              osztályfőnök,                                                 napközis tanító 1.a                   28-as               Viszóczki Anett                                                                     Pásztorné Bajusz Anikó 1.b                   24-es               Kovács Katalin                                                                      Kondrákné Bertók Éva 2.a                   16-os               Nagyné Tóth Zsófia                                                               Majoriné Veres Éva 2.b                   15-ös               Czár Judit Bianka                                                                  Ráczné Csordás Tímea 3.a                   25-ös               Tompa Klára Ilona                                                                 Pozsgai Tünde 3.b                   17-es               Volyánszki-Bán Viktória                                          Demblovszkyné Kapitány Zsuzsanna 4.a                   27-es               Mucza-Krisztin Judit                                                              Nagy Barnabásné 4.b                   18-as               Tóth Erika                                                                              Németh Erika 5.a                   rajz                  Csatóné Boros Zsuzsanna 5.b                   32-es               Szabóné Gubányi Éva 5.c                   31-es               Demblovszky Gábor Tamás 6.a                   ének                Magyarné Hadzsi Katalin 6.b                   38-as               Göncziné Kalóz Éva 7.a                   30-as               Komlósné Oláh Mária 7.b                   43-as               Balogh Tamás 7.c                   42-es               Birtalan Ágnes 8.a                   11-es               Drotárné Tamás Hermina 8.b                   33-as               Ducsainé Sivák Erika
  • 2018 jún. 08

    Idegennyelvi mérés 2018-as tanév

    Idegen nyelvi mérés eredményei 2018
  • 2016 júl. 25