KXB.Spark

.NET frontend modules

Installation

PM> Install-Package KXB.Spark.ListOfPeople -Version 0.0.7

Preview

With all data

Maximilianus Hjelmeland

docendi, nominavi. eu sit qui at senserit intellegam Ius, at case reformidans Ea tritani. offendit per quo ad veri paulo Id

Epost:

Maximilianus.Hjelmeland@hotmail.net

Telefon:

73703838

at:

posse primis platonem

ad:

pri et vel modo

sale:

facete legendos aliquando vel

Harald Ulleberg

scriptorem ad his vim, et audiam fierent mentitum Mundi. timeam probatus quo ea, Agam sapientem suscipiantur vis no at mazim dissentias his vel essent prodesset ne Id usu

Epost:

Harald.Ulleberg@msn.net

Telefon:

56370344

autem:

ad Deterruisset consectetuer

et:

possit ea vis Has

Lucilius:

mundi invenire

Ingeborg Talberg

mazim inciderint Inermis senserit vim at Vide mutat, persius mel. ne ut, quo diam oratio eirmod, Ea

Epost:

Ingeborg.Talberg@gmail.dk

Telefon:

30070626

qui:

nam ut eos debet

te:

ipsum dolor

eripuit:

antiopam temporibus

Peder Dokken

appareat Ne mei epicurei. antiopam temporibus. At qui dolore. oblique

Epost:

Peder.Dokken@outlook.org

Telefon:

27633421

autem:

dicunt aeterno

denique:

pri an

Hinc:

Ut usu

{
  "NumberOfPeoplePerRow": 0,
  "People": [
    {
      "Name": "Maximilianus Hjelmeland",
      "Id": "2bdc8894bbc04ef4a34b44a83656eb63",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "docendi, nominavi. eu sit qui at senserit intellegam Ius, at case reformidans Ea tritani. offendit per quo ad veri paulo Id",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Maximilianus.Hjelmeland@hotmail.net",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "73703838",
          "Type": 2
        },
        {
          "Label": "at",
          "Value": "posse primis platonem",
          "Type": 0
        },
        {
          "Label": "ad",
          "Value": "pri et vel modo",
          "Type": 0
        },
        {
          "Label": "sale",
          "Value": "facete legendos aliquando vel",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Harald Ulleberg",
      "Id": "641b035ef3314b458719959257037573",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "scriptorem ad his vim, et audiam fierent mentitum Mundi. timeam probatus quo ea, Agam sapientem suscipiantur vis no at mazim dissentias his vel essent prodesset ne\r\nId usu",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Harald.Ulleberg@msn.net",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "56370344",
          "Type": 2
        },
        {
          "Label": "autem",
          "Value": "ad Deterruisset consectetuer",
          "Type": 0
        },
        {
          "Label": "et",
          "Value": "possit ea vis Has",
          "Type": 0
        },
        {
          "Label": "Lucilius",
          "Value": "mundi invenire",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Ingeborg Talberg",
      "Id": "3ba34294387248e68ff4dad4d5a60e1b",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "mazim inciderint Inermis senserit vim at Vide mutat, persius mel. ne ut, quo diam oratio eirmod, Ea",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Ingeborg.Talberg@gmail.dk",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "30070626",
          "Type": 2
        },
        {
          "Label": "qui",
          "Value": "nam ut eos debet",
          "Type": 0
        },
        {
          "Label": "te",
          "Value": "ipsum dolor",
          "Type": 0
        },
        {
          "Label": "eripuit",
          "Value": "antiopam temporibus",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Peder Dokken",
      "Id": "fab6da46d0884ea9afdaec258c61b7d7",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "appareat Ne mei epicurei. antiopam temporibus. At qui dolore. oblique",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Peder.Dokken@outlook.org",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "27633421",
          "Type": 2
        },
        {
          "Label": "autem",
          "Value": "dicunt aeterno",
          "Type": 0
        },
        {
          "Label": "denique",
          "Value": "pri an",
          "Type": 0
        },
        {
          "Label": "Hinc",
          "Value": "Ut usu",
          "Type": 0
        }
      ]
    }
  ]
}

Preview

Without description, but with 5 properties

Pål Rommetveit

Epost:

Pål.Rommetveit@hotmail.no

Telefon:

37167118

audire:

cum ea no prima

no:

duo te quod mundi

constituam:

salutatus sit Cu

Steffen Dalheim

Epost:

Steffen.Dalheim@knowit.io

Telefon:

74424768

elit:

cum ea

invenire:

id dictas

sed:

at senserit intellegam

Lars Dyp

Epost:

Lars.Dyp@gmail.se

Telefon:

83123203

timeam:

liber singulis instructior est

alii:

ei ius Hinc equidem

doming:

cum ea no

Jørgen Larsen

Epost:

Jørgen.Larsen@yahoo.no

Telefon:

17605741

Eam:

et per veritus interesset

has:

Ut vide

probatus:

pri an quas

{
  "NumberOfPeoplePerRow": 0,
  "People": [
    {
      "Name": "Pål Rommetveit",
      "Id": "bba25ae30e2f4fbea0ba88e25ab56fd5",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Pål.Rommetveit@hotmail.no",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "37167118",
          "Type": 2
        },
        {
          "Label": "audire",
          "Value": "cum ea no prima",
          "Type": 0
        },
        {
          "Label": "no",
          "Value": "duo te quod mundi",
          "Type": 0
        },
        {
          "Label": "constituam",
          "Value": "salutatus sit Cu",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Steffen Dalheim",
      "Id": "33e17e5b68a941f3970e794942af1a89",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Steffen.Dalheim@knowit.io",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "74424768",
          "Type": 2
        },
        {
          "Label": "elit",
          "Value": "cum ea",
          "Type": 0
        },
        {
          "Label": "invenire",
          "Value": "id dictas",
          "Type": 0
        },
        {
          "Label": "sed",
          "Value": "at senserit intellegam",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Lars Dyp",
      "Id": "c798b6a2cf354d58871b55d1317b0ec6",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Lars.Dyp@gmail.se",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "83123203",
          "Type": 2
        },
        {
          "Label": "timeam",
          "Value": "liber singulis instructior est",
          "Type": 0
        },
        {
          "Label": "alii",
          "Value": "ei ius Hinc equidem",
          "Type": 0
        },
        {
          "Label": "doming",
          "Value": "cum ea no",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Jørgen Larsen",
      "Id": "2734731179e74d5190f918a1cc008eb5",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/320x320",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Jørgen.Larsen@yahoo.no",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "17605741",
          "Type": 2
        },
        {
          "Label": "Eam",
          "Value": "et per veritus interesset",
          "Type": 0
        },
        {
          "Label": "has",
          "Value": "Ut vide",
          "Type": 0
        },
        {
          "Label": "probatus",
          "Value": "pri an quas",
          "Type": 0
        }
      ]
    }
  ]
}

Preview

With out any properties, besides email and phone

Maximilianus Vedvik

Epost:

Maximilianus.Vedvik@knowit.net

Telefon:

72855358

Tom Rommetveit

Epost:

Tom.Rommetveit@outlook.it

Telefon:

16531645

Pål Olsen

Epost:

Pål.Olsen@msn.dk

Telefon:

44511427

Olga Lund

Epost:

Olga.Lund@yahoo.net

Telefon:

74837188

Preview

Without any properties

Montgomery Prestegård

Hege Ødegård

Sarah Olsen

Hannah Olafsen

Preview

Without image, but with phone and email

Wolfgang Amadeus Hjelmeland

Epost:

Wolfgang.Amadeus.Hjelmeland@hotmail.edu

Telefon:

30017376

Marielle Øglænd

Epost:

Marielle.Øglænd@outlook.edu

Telefon:

28466171

Bartholomew Øglænd

Epost:

Bartholomew.Øglænd@example.edu

Telefon:

43515878

Maximilianus Kvammen

Epost:

Maximilianus.Kvammen@live.dk

Telefon:

37533201

Preview

With three people per row

Inger Ødegård

Epost:

Inger.Ødegård@msn.it

Telefon:

40571163

Ea:

at case

eu Mutat:

reformidans Ea tritani offendit

sonet:

ad his vim et

Nina Kleveland

Epost:

Nina.Kleveland@example.edu

Telefon:

63854677

appareat:

antiopam temporibus At qui

at:

te Vim augue vitae

eirmod:

interesset ea sed

Kristine Huseby

Epost:

Kristine.Huseby@msn.dk

Telefon:

40124622

elit:

ei ius Hinc equidem

vis:

quo atqui facilisis te

te:

accusam facete legendos

{
  "NumberOfPeoplePerRow": 1,
  "People": [
    {
      "Name": "Inger Ødegård",
      "Id": "727b6f2d97e34604a8b44f47215cf1d7",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/450x450",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Inger.Ødegård@msn.it",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "40571163",
          "Type": 2
        },
        {
          "Label": "Ea",
          "Value": "at case",
          "Type": 0
        },
        {
          "Label": "eu\r\nMutat",
          "Value": "reformidans Ea tritani offendit",
          "Type": 0
        },
        {
          "Label": "sonet",
          "Value": "ad his vim et",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Nina Kleveland",
      "Id": "aa93c8cf60a04b7c8b9f28da911a579d",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/450x450",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Nina.Kleveland@example.edu",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "63854677",
          "Type": 2
        },
        {
          "Label": "appareat",
          "Value": "antiopam temporibus At qui",
          "Type": 0
        },
        {
          "Label": "at",
          "Value": "te Vim augue vitae",
          "Type": 0
        },
        {
          "Label": "eirmod",
          "Value": "interesset ea sed",
          "Type": 0
        }
      ]
    },
    {
      "Name": "Kristine Huseby",
      "Id": "39e0e247dfd547e29de7c61f05d6a4f2",
      "LinkUrl": "",
      "ImageUrl": "http://via.placeholder.com/450x450",
      "AspectRatio": 0,
      "Description": "",
      "Properties": [
        {
          "Label": "Epost",
          "Value": "Kristine.Huseby@msn.dk",
          "Type": 1
        },
        {
          "Label": "Telefon",
          "Value": "40124622",
          "Type": 2
        },
        {
          "Label": "elit",
          "Value": "ei ius Hinc equidem",
          "Type": 0
        },
        {
          "Label": "vis",
          "Value": "quo atqui facilisis te",
          "Type": 0
        },
        {
          "Label": "te",
          "Value": "accusam facete legendos",
          "Type": 0
        }
      ]
    }
  ]
}

Preview

With two people per row

Stine Lie

Epost:

Stine.Lie@msn.io

Telefon:

63377044

timeam:

ignota oportere

instructior:

eros fabulas theophrastus eam

contentiones:

ut nibh choro doming

Henriette Rommetveit

Epost:

Henriette.Rommetveit@knowit.it

Telefon:

50631776

Id:

albucius adolescens

munere:

vidit possim qui

dicunt:

has ei odio meis

Preview

With 4:3 aspect ratio

Ellinor Kopperud

Hannah Ugelstad

Olga Prestegård

Karoline Pettersen

Preview

With 3:2 aspect ratio

Elisabeth Valde

Maximilianus Olafsen

Olga Dramstad

Steffen Pilskog

Preview

With 16:9 aspect ratio

Henriette Kvammen

Harald Huseby

Birgitte Ugland

Petter Pettersen

Preview

With 2:1 aspect ratio

Ingeborg Rommetveit

Petter Kvammen

Steffen Ugland

Thomas Dramstad

How this page was made

KXBSparkListOfPeople.cshtml

    
@model Web.ViewModels.SparkViewModel

@{
    Layout = "~/Views/Layouts/_Layout.cshtml";
    var colorGenerator = new KXB.Spark.DummyData.Generators.ColorGenerator();

    var numberOfPeoplePerPreview = 4;

    var listOfPeople1 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview);
    var listOfPeople2 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, true, true, 3);
    var listOfPeople3 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, true, true, 0);
    var listOfPeople4 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, false, false, 0);
    var listOfPeople5 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, false, false, true, true, 0);
    var listOfPeople6 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(3, true, false, true, true, 3, numberOfPeoplePerRow: KXB.Spark.ListOfPeople.NumberOfPeoplePerRow.Three);
    var listOfPeople7 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(2, true, false, true, true, 3, numberOfPeoplePerRow: KXB.Spark.ListOfPeople.NumberOfPeoplePerRow.Two);
    var listOfPeople8 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, false, false, 0, aspectRatio: KXB.Spark.ListOfPeople.AspectRatio.FourByThree);
    var listOfPeople9 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, false, false, 0, aspectRatio: KXB.Spark.ListOfPeople.AspectRatio.SixteenByNine);
    var listOfPeople10 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, false, false, 0, aspectRatio: KXB.Spark.ListOfPeople.AspectRatio.TwoByOne);
    var listOfPeople11 = KXB.Spark.ListOfPeople.ListOfPeople.GenerateInstance(numberOfPeoplePerPreview, true, false, false, false, 0, aspectRatio: KXB.Spark.ListOfPeople.AspectRatio.ThreeByTwo);
}

@Html.Partial("~/Views/Partials/_InstallationGuide.cshtml", Model.NugetModel)
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With all data</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople1)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople1)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3  class="subtitle">Without description, but with 5 properties</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople2)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople2)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With out any properties, besides email and phone</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople3)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople3)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Without any properties</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople4)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople4)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Without image, but with phone and email</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople5)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople5)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With three people per row</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople6)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople6)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With two people per row</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople7)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople7)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With 4:3 aspect ratio</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople8)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople8)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With 3:2 aspect ratio</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople11)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople11)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With 16:9 aspect ratio</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople9)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople9)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">With 2:1 aspect ratio</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_ListOfPeople.cshtml", listOfPeople10)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", listOfPeople10)
</div>