360Giving Design System - Components

Code Block 

<div class="code-block">
    <pre>
  <code>
    "Documents": {
      "type": "object",
      "properties": {
        "id": {
          "type": "string",
          "description": "An identifier for this document.",
          "weight": 0.001,
          "title": "Identifier"
        },
        "title": {
          "type": [
            "string",
            "null"
          ],
          "description": "The document title",
          "weight": 1.05,
          "title": "Title"
        },
        "url": {
          "type": [
            "string",
            "null"
          ],
          "format": "uri",
          "description": "The URL of the document.",
          "weight": 11.01,
          "title": "Web Address"
        },
        "description": {
          "type": [
            "string",
            "null"
          ],
          "description": "A description of the document",
          "weight": 9,
          "title": "Description"
        },
        "documentType": {
          "type": [
            "string",
            "null"
          ],
          "description": "A document category. For example, 'Application Form', 'Photo' or 'Project Report'. In future, 360Giving will provide a codelist of document types.",
          "weight": 0.8,
          "title": "Document Type"
        },
        "dateModified": {
          "format": "date-time",
          "type": "string",
          "description": "What was this information last modified? A full date-time should be given. Usually this can be generated automatically by the software managing or exporting this data.",
          "weight": 25,
          "title": "Last Modified"
        }
      }
    }
  </code>
</pre>
</div>
 
<div class="code-block">
<pre>
  <code>
    "Documents": {
      "type": "object",
      "properties": {
        "id": {
          "type": "string",
          "description": "An identifier for this document.",
          "weight": 0.001,
          "title": "Identifier"
        },
        "title": {
          "type": [
            "string",
            "null"
          ],
          "description": "The document title",
          "weight": 1.05,
          "title": "Title"
        },
        "url": {
          "type": [
            "string",
            "null"
          ],
          "format": "uri",
          "description": "The URL of the document.",
          "weight": 11.01,
          "title": "Web Address"
        },
        "description": {
          "type": [
            "string",
            "null"
          ],
          "description": "A description of the document",
          "weight": 9,
          "title": "Description"
        },
        "documentType": {
          "type": [
            "string",
            "null"
          ],
          "description": "A document category. For example, 'Application Form', 'Photo' or 'Project Report'. In future, 360Giving will provide a codelist of document types.",
          "weight": 0.8,
          "title": "Document Type"
        },
        "dateModified": {
          "format": "date-time",
          "type": "string",
          "description": "What was this information last modified? A full date-time should be given. Usually this can be generated automatically by the software managing or exporting this data.",
          "weight": 25,
          "title": "Last Modified"
        }
      }
    }
  </code>
</pre>
</div>
 
/* No context defined. */
  • Content: 
    // We are using https://highlightjs.org/static/demo/ for syntax highlighting.


.code-block {
  padding: 0 16px;
  margin-top: 24px;
  background-color: hsla(var(--base-hsl), .03);
  border: 1px solid hsla(var(--base-hsl), .1);

  &--wrap { 
    pre, code { white-space: pre-wrap; } 
  }
}

.hljs.bash { background-color: transparent !important;}
  • URL: /components/raw/code-block/code-block.scss
  • Filesystem Path: src/components/02-elements/code-block/code-block.scss
  • Size: 347 Bytes

No notes defined.