@haxtheweb/haxcms-nodejs/dist/boilerplate/page/collection/index.html

HAXcms single and multisite nodejs server, api, and administration

<h3>What Is a collection?</h3>
<p>
  A collection is a series of small items that you wish to communicate about. This isn't limited to things
  in this site as it's typically a way of showcasing work or linking off to resources. This design can also
  be used as a template for making small showcases of work and adding additional pages into the mix.
</p>
<h3>Our Properties</h3>
<collection-list>
    
  <collection-item 
  line1="HAX Ontology" 
  icon="hax:idea" 
  line2="Pedagogy, examples and more" 
  line3="A&amp;A ODL" 
  url="https://haxtheweb.org/ontology" 
  saturate="saturate" image="https://images-assets.nasa.gov/image/201106080002HQ/201106080002HQ~thumb.jpg">
  </collection-item>
  
  <collection-item
  image="https://wcfactory.js.org/assets/images/photo-1497493292307-31c376b6e479.jpeg" line1="WCFactory" icon="hax:code-json" line2="Front-end tooling" line3="HAX Core Team" url="https://wcfactory.js.org/" saturate="" >
  </collection-item>
  
  <collection-item image="https://hax.psu.edu/assets/images/splash.jpg" line1="HAX [dot] PSU" icon="hax:hax2022" line2="Build websites fast!" line3="PSU HAX Team" url="https://hax.psu.edu/" saturate="saturate" >
  </collection-item>
  
  <collection-item image="https://odl.science.psu.edu/files/theme-images/logos/odl-logo.png"
  line1="Eberly ODL"
  icon="courseicons:frnsc100"
  line2="Innovation in Science Teaching"
  line3="Eberly ODL"
  url="https://odl.science.psu.edu/"
  saturate="saturate" >
  </collection-item>
  
  <collection-item image="https://odl.science.psu.edu/files/theme-images/logos/odl-logo.png" 
  line1="Eberly OER"   icon="hax:oerschema"
  line2="Open Educational Resources" 
  line3="Eberly ODL" url="https://oer.courses.science.psu.edu/"
    saturate="saturate" >
</collection-item>
</collection-list>
<h3>How do users engage with these items?</h3>
<p>
  Users will click on items in the list to jump off to pages elsewhere. You could use this to
  link to a portfolio of work, an index of content created that is non-linear, showcase work, 
  or anything you like! This is just boilerplate to generate ideas!
</p>