Header Header med overskrift, ingress og figur.

Struktur

<lk-page-header>

  <div>

    <h1>
      <slot/>
      <slot name="h" />
      <slot name="header" />
      <slot name="heading" />
    </h1>

    <p>
      <slot name="p" />
      <slot name="lead" />
      <slot name="ingress" />
    </p>

  </div>

  <div>
    <lk-figure/>
  </div>

</lk-page-header>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
header-title string ""
header-lead string ""
header-name Kindergarten
GuardServices
WaterAndWastewater
RoadTrafficAndParking
SchoolAndEducation
HousingAndSocialServices
HealthCare
TaxAppropriationIndustry
EnergyClimateAndEnvironment
WasteAndRecycle
NatureCultureAndLeisure
AgricultureHuntingAndFishing
IntegrationAndRefugees
BuildingAndEstates
Library
PoliticsAndAdministration
DarkBlue
DarkBlue1 - DarkBlue10
Blue
Blue1 - Blue7
Green
Green1 - Green15
Yellow
Yellow1 - Yellow14
Pink
Pink1 - Pink14		 "DarkBlue"

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert inni <h1>
h
header
heading		 Plasseres inni <h1>
p
lead
ingress		 Plasseres inni <p>

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag. 

<lk-filter item-selector="lk-page-header" placeholder="Søk etter stil-varianter, farge-navn, eller figur-nummer">

    <lk-page-header 
        header-name="Kindergarten" 
        header-title="Kindergarten" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure1"'>
    </lk-page-header>

    <lk-page-header 
        header-name="GuardServices" 
        header-title="GuardServices" 
        header-lead='backgroundColor: COLORS.blue, headerColor: COLORS.white, figurename: "figure2"'>
    </lk-page-header>

    <lk-page-header 
        header-name="WaterAndWastewater" 
        header-title="WaterAndWastewater" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure3"'>
    </lk-page-header>

    <lk-page-header 
        header-name="RoadTrafficAndParking" 
        header-title="RoadTrafficAndParking" 
        header-lead='backgroundColor: COLORS.blue, headerColor: COLORS.white, figurename: "figure4"'>
    </lk-page-header>

    <lk-page-header 
        header-name="SchoolAndEducation" 
        header-title="SchoolAndEducation" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure5"'>
    </lk-page-header>

    <lk-page-header 
        header-name="HousingAndSocialServices" 
        header-title="HousingAndSocialServices" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure6"'>
    </lk-page-header>

    <lk-page-header 
        header-name="HealthCare" 
        header-title="HealthCare" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure7"'>
    </lk-page-header>

    <lk-page-header 
        header-name="TaxAppropriationIndustry" 
        header-title="TaxAppropriationIndustry" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure8"'>
    </lk-page-header>

    <lk-page-header 
        header-name="EnergyClimateAndEnvironment" 
        header-title="EnergyClimateAndEnvironment" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure9"'>
    </lk-page-header>

    <lk-page-header 
        header-name="WasteAndRecycle" 
        header-title="WasteAndRecycle" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure10"'>
    </lk-page-header>

    <lk-page-header 
        header-name="NatureCultureAndLeisure" 
        header-title="NatureCultureAndLeisure" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure11"'>
    </lk-page-header>

    <lk-page-header 
        header-name="AgricultureHuntingAndFishing" 
        header-title="AgricultureHuntingAndFishing" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure12"'>
    </lk-page-header>

    <lk-page-header 
        header-name="IntegrationAndRefugees" 
        header-title="IntegrationAndRefugees" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure13"'>
    </lk-page-header>

    <lk-page-header 
        header-name="BuildingAndEstates" 
        header-title="BuildingAndEstates" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure14"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Library" 
        header-title="Library" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure15"'>
    </lk-page-header>

    <lk-page-header 
        header-name="PoliticsAndAdministration" 
        header-title="PoliticsAndAdministration" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "frontpage3"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue" 
        header-title="DarkBlue" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure3"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Blue" 
        header-title="Blue" 
        header-lead='backgroundColor: COLORS.blue, headerColor: COLORS.white, figurename: "figure2"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green" 
        header-title="Green" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure9"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow" 
        header-title="Yellow" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure1"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink" 
        header-title="Pink" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure5"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue1" 
        header-title="DarkBlue1" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure1"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue2" 
        header-title="DarkBlue2" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure2"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue3" 
        header-title="DarkBlue3" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure3"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue4" 
        header-title="DarkBlue4" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure8"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue5" 
        header-title="DarkBlue5" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure9"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue6" 
        header-title="DarkBlue6" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure10"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue7" 
        header-title="DarkBlue7" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure12"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue8" 
        header-title="DarkBlue8" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure13"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue9" 
        header-title="DarkBlue9" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure14"'>
    </lk-page-header>

    <lk-page-header 
        header-name="DarkBlue10" 
        header-title="DarkBlue10" 
        header-lead='backgroundColor: COLORS.darkBlue, headerColor: COLORS.white, figurename: "figure15"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Blue1" 
        header-title="Blue1" 
        header-lead='backgroundColor: COLORS.blue, headerColor: COLORS.white, figurename: "figure2"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Blue2" 
        header-title="Blue2" 
        header-lead='backgroundColor: COLORS.blue, headerColor: COLORS.white, figurename: "figure4"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Blue3" 
        header-title="Blue3" 
        header-lead='backgroundColor: COLORS.blue, headerColor: COLORS.white, figurename: "figure5"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Blue4" 
        header-title="Blue4" 
        header-lead='backgroundColor: COLORS.blue, headerColor: COLORS.white, figurename: "figure6"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Blue5" 
        header-title="Blue5" 
        header-lead='backgroundColor: COLORS.blue, headerColor: COLORS.white, figurename: "figure7"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Blue6" 
        header-title="Blue6" 
        header-lead='backgroundColor: COLORS.blue, headerColor: COLORS.white, figurename: "figure8"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Blue7" 
        header-title="Blue7" 
        header-lead='backgroundColor: COLORS.blue, headerColor: COLORS.white, figurename: "figure11"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green1" 
        header-title="Green1" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure1"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green2" 
        header-title="Green2" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure2"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green3" 
        header-title="Green3" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure3"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green4" 
        header-title="Green4" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure4"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green5" 
        header-title="Green5" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure5"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green6" 
        header-title="Green6" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure6"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green7" 
        header-title="Green7" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure7"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green8" 
        header-title="Green8" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure8"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green9" 
        header-title="Green9" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure9"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green10" 
        header-title="Green10" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure10"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green11" 
        header-title="Green11" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure11"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green12" 
        header-title="Green12" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure12"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green13" 
        header-title="Green13" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure13"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green14" 
        header-title="Green14" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure14"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Green15" 
        header-title="Green15" 
        header-lead='backgroundColor: COLORS.green, headerColor: COLORS.darkBlue, figurename: "figure15"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow1" 
        header-title="Yellow1" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure1"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow2" 
        header-title="Yellow2" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure2"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow3" 
        header-title="Yellow3" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure3"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow4" 
        header-title="Yellow4" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure4"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow5" 
        header-title="Yellow5" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure5"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow6" 
        header-title="Yellow6" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure6"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow7" 
        header-title="Yellow7" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure7"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow8" 
        header-title="Yellow8" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure8"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow9" 
        header-title="Yellow9" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure9"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow10" 
        header-title="Yellow10" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure11"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow11" 
        header-title="Yellow11" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure12"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow12" 
        header-title="Yellow12" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure13"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow13" 
        header-title="Yellow13" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure14"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Yellow14" 
        header-title="Yellow14" 
        header-lead='backgroundColor: COLORS.yellow, headerColor: COLORS.darkBlue, figurename: "figure15"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink1" 
        header-title="Pink1" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure1"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink2" 
        header-title="Pink2" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure3"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink3" 
        header-title="Pink3" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure4"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink4" 
        header-title="Pink4" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure5"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink5" 
        header-title="Pink5" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure6"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink6" 
        header-title="Pink6" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure7"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink7" 
        header-title="Pink7" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure8"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink8" 
        header-title="Pink8" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure9"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink9" 
        header-title="Pink9" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure10"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink10" 
        header-title="Pink10" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure11"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink11" 
        header-title="Pink11" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure12"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink12" 
        header-title="Pink12" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure13"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink13" 
        header-title="Pink13" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure14"'>
    </lk-page-header>

    <lk-page-header 
        header-name="Pink14" 
        header-title="Pink14" 
        header-lead='backgroundColor: COLORS.pink, headerColor: COLORS.darkBlue, figurename: "figure15"'>
    </lk-page-header>

</lk-filter>

Hvor finner jeg denne koden?