<commit_before><!--SIDENAVCONFIG
	{
		"showLeftNav": true,
		"navigation": [
			{
				"text": "Table Example",
				"id": "#patterns-list-pages"
			},
      {
        "text": "Card Pages",
        "id": "#patterns-card-pages"
      },
      {
        "text": "Retail Product Pages",
        "id": "#patterns-retail-product-pages"
      },
      {
        "text": "Trees",
        "id": "#patterns-trees"
      },
      {
        "text": "Mixed Pattern Pages",
        "id": "#patterns-mixed-pattern-pages"
      },
      {
        "text": "Overall Pattern Reference",
        "id": "#patterns-overall-pattern-reference"
      }
    ]
	}
-->


<div class="hyPatternsPage container-fluid" >
  <div class="row">
    <h1>Patterns & Layouts</h1>
    <p>hybris techne allows for an immersive, consumer-like experience for business users. Using the components provided in the component library, achieve patterns and mobile-first page layouts as exemplified below.</p>  
  </div>
  <section id="patterns-list-pages" class="page">
    <h2>List Pages</h2>
    <p>Lists are a high-utility pattern that allows for quick sorting, filtering and scanning. 'Add a X' ideally is found at the top of the list pattern for users to quickly add data in context. </p>
    <div class="row">
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/list-team_Members.jpg" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/list-team_Members.jpg" alt="" class="img-thumbnail">
        </a>
      </div>
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/list-Packages.jpg" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/lists-Packages.jpg" alt="" class="img-thumbnail">
        </a>
      </div>
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/table_mobile.png" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/table_mobile.jpg" alt="" class="img-thumbnail">
        </a>
      </div>
    </div>
  </section>
  <section id="patterns-card-pages" class="page">
    <h2>Card Pages</h2>
    <p>Cards allow for a highly-visual approach for browsing, scanning and mental information organization. Cards can be used with or without a visual component, or with different patterns of visual components to allow for data visualization and seperation.</p>
    <div class="row">
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/cards-Packages.jpg" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/cards-Packages.jpg" alt="" class="img-thumbnail">
        </a>
      </div>
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/cards-team_Members.jpg" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/cards-team_Members.jpg" alt="" class="img-thumbnail">
        </a>
      </div>
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/cards-mobile.png" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/Cards-mobile.jpg" alt="" class="img-thumbnail">
        </a><commit_msg>CCE:226 - Updated cards description text on the patterns page.<commit_after><!--SIDENAVCONFIG
	{
		"showLeftNav": true,
		"navigation": [
			{
				"text": "Table Example",
				"id": "#patterns-list-pages"
			},
      {
        "text": "Card Pages",
        "id": "#patterns-card-pages"
      },
      {
        "text": "Retail Product Pages",
        "id": "#patterns-retail-product-pages"
      },
      {
        "text": "Trees",
        "id": "#patterns-trees"
      },
      {
        "text": "Mixed Pattern Pages",
        "id": "#patterns-mixed-pattern-pages"
      },
      {
        "text": "Overall Pattern Reference",
        "id": "#patterns-overall-pattern-reference"
      }
    ]
	}
-->


<div class="hyPatternsPage container-fluid" >
  <div class="row">
    <h1>Patterns & Layouts</h1>
    <p>hybris techne allows for an immersive, consumer-like experience for business users. Using the components provided in the component library, achieve patterns and mobile-first page layouts as exemplified below.</p>  
  </div>
  <section id="patterns-list-pages" class="page">
    <h2>List Pages</h2>
    <p>Lists are a high-utility pattern that allows for quick sorting, filtering and scanning. 'Add a X' ideally is found at the top of the list pattern for users to quickly add data in context. </p>
    <div class="row">
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/list-team_Members.jpg" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/list-team_Members.jpg" alt="" class="img-thumbnail">
        </a>
      </div>
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/list-Packages.jpg" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/lists-Packages.jpg" alt="" class="img-thumbnail">
        </a>
      </div>
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/table_mobile.png" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/table_mobile.jpg" alt="" class="img-thumbnail">
        </a>
      </div>
    </div>
  </section>
  <section id="patterns-card-pages" class="page">
    <h2>Card Pages</h2>
    <p>Cards allow for a highly-visual approach for browsing, scanning and mental information organization. Cards can be used with or without a visual component, or with different patterns of visual components to allow for data visualization and separation. Standard YaaS business objects should use the following icon style:</p> 
    <ul>
      <li>People, Dev Teams, Organizations - circle</li>
      <li>Projects & Sites - square</li>
      <li>Packages - hexagons</li>
    </ul>
    <p>Please refer to the <a href="#patterns-overall-pattern-reference">Overall Pattern Reference</a> for additional examples.</p>
    <div class="row">
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/cards-Packages.jpg" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/cards-Packages.jpg" alt="" class="img-thumbnail">
        </a>
      </div>
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/cards-team_Members.jpg" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/cards-team_Members.jpg" alt="" class="img-thumbnail">
        </a>
      </div>
      <div class="col-md-4 col-xs-12 col-sm-6 text-center sectionSpacing">
        <a class="js_fullscreen" data-toggle="modal" data-id="images/fullscreen/cards-mobile.png" title="View Full Image" href="#viewFullscreen">
          <img src="images/thumbnails/Cards-mobile.jpg" alt="" class="img-thumbnail">
        </a>
{'fraction_non_alphanumeric': 0.152, 'fraction_numerical': 0.008129032258064516, 'mean_word_length': 3.1294619072988814, 'pattern_counts': {'":': 28, '<': 117, '<?xml version=': 0, '>': 117, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3711093', 'n_tokens_mistral': 2517, 'n_tokens_neox': 2427, 'n_words': 598}