Starburst Internal Reference

  • Overview
  • Markdown
  • Images
  • Personas
  • Tag list
  • Top ten
  • Images #

    Display images with:

    include image syntax #

    This is our in-house and preferred image syntax.

    This syntax provides a screenshot attribute that places a single pixel border around the image, which is best used for screenshots that have white space up to their edges, so that the image is clearly delineated from the page’s text.

    This syntax also allows you to specify valid CSS to tailor a particular image. If no pxwidth value is passed, the image defaults to the file’s inherent width up to a maximum of 90% of the current container for very large images.

    Another option of the include image syntax is to turn very large images into two-size modal images. The specified image is reduced for normal display on the page, limited to pxwidth size, but the image is also now a button. When clicked, the image expands and is shown in a larger modal window. The screenshot and modal options are mutually exclusive; use one or the other.

    Use include image.html in a separate tag block with the parameters shown in the following table:

    * Parameters may be used in any order.

    Key Value Required Notes
    url Relative path to the asset. Required  
    alt‑text String for alt tag content. Required  
    descr String for description tag content for accessibility support. Optional Use if alt‑text does not convey enough information
    pxwidth Width value in pixels, integer only. See the notes below Optional  
    screenshot Set to ‘true’ adds 1px solid border. No effect if modal. Optional  
    modal Set to ‘true’ adds modal ability. Optional Must assign img‑id if true
    img‑id Adds ID string. Optional Required for modal. Must be unique per page.
    style Pass any valid CSS to the image. Optional  

    For the pxwidth key:

    • Don’t include a pxwidth line, or leave its value empty to specify using the native image resolution by default. pxwidth=''
    • Do not specify pxwidth='0', which disables the image.
    • For modal, pxwidth specifies the non-modal display size on the page before expansion.

    Using within lists #

    When using the include image within a list, you must prefix the include image tag block with a   and the proper indentation in order to ensure correct alignment. If no   is used, the list items after the include image will start over at 1.

    
    1. The first item in the list
    
        {% include image.html ... %}
    
    2. The second item in the list
    
      1. The first item in a nested list
    
          {% include image.html ... %}
    
      2. The second item in a nested list
    
    3. The third item in a list
    
    

    Copy these images #

    Feel free to copy the include tag blocks that display the following images. Paste these as templates into your working documents, then edit as appropriate:

    
    {% include image.html
      url='../assets/img/general/web-ui-login.png'
      img-id='webuilogin'
      alt-text='WebUI login dialog'
      descr-text='Image depicting WebUI login dialog'
      pxwidth='250'
      screenshot='true'
    %}
    
    

    WebUI login dialog

    
    {% include image.html
      url='../assets/img/general/data-engg-schematic-overview.png'
      img-id='des'
      alt-text='Starburst cluster overview'
      descr-text='Image depicting Starburst architecture'
      pxwidth='650'
      modal='true'
    %}
    
    

    HTML syntax #

    This syntax allows you to add further tweaks such as sizing. If you copy this example, remember to surround site.baseurl with double open and close brace { } characters.

    <img src="site.baseurl/assets/img/logo/starburst.png" alt="Starburst logo"
    description="Starburst Logo" width="200"/>
    

    Starburst logo

    Markdown syntax #

    Only for very simple image cases, use Markdown syntax, which is: ![title](../assets/img/image.png). Use a relative path to the image from the current location, or use the site.baseurl substitution token. (If you copy the following example, remember to surround site.baseurl with double open and close brace { } characters.)

    ![Starburst](site.baseurl/assets/img/logo/starburst.png)
    

    Starburst

    Logos #

    The following conditions should be met when optimizing and saving brand logos to use on the site:

    Property Value
    Bounding Trim/Cropped
    Width 400px
    Height Auto (Constrained proportions)
    Background Transparent
    Format PNG
    Example dbeaver

    When adding a brand logo to the beginning of a page, for example the Red Hat marketplace page, the initial content section should contain the logo using the following HTML structure:

    
    <div class="row-with-logo">
      <div markdown="1" class="row-with-logo-text-container">
        <-- Add text content here -->
      </div>
      <div class="row-with-logo-image-container">
        <img
          class="img-fluid"
          src="../assets/img/logo/dbeaver.png"
          alt="{{page.title}}"
        />
      </div>
    </div>
    
    

    Similarly, the image.html include may also be used by changing the HTML snippet above to:

    
    <div class="row-with-logo">
      <div markdown="1" class="row-with-logo-text-container">
        <-- Add text content here -->
      </div>
      <div class="row-with-logo-image-container">
        {% include image.html
          url='../assets/img/logo/dbeaver.png'
          alt-text='DBeaver Logo'
        %}
      </div>
    </div>
    
    

    This HTML structure ensures that the logo will be placed to the right of the content, creating a two column layout that allows the text to not produce a staggered wrapping effect. Once a certain breakpoint has been reached the logo will then move to above the text content.

    All content after the above HTML snippet will take up the full width of the container.

    Icons #

    You can and should use fontawsome icons. The site uses fontawesome 5.

    There are thousands available.

    Syntax is <i class="fa fa-user"></i>.

    You can change size, color and more.

    This is a user icon in a paragraph.

    Also be careful, we use fontawesome 5 and therefore some icons are in a different name space.

    • <i class="fab fa-twitter"></i> for
    • <i class="fab fa-youtube"></i> for
    • <i class="fab fa-linkedin"></i> for
    • <i class="fab fa-github"></i> for

    Coloring can be done with CSS or an embedded style.

    • <i class="fab fa-github" style="color: red;"></i> for

    Other examples, in case you need to use them:

    • <i class="fas fa-ellipsis-v"></i> for
    • <i class="fa fa-pen"></i> for
    • <i class="fa fa-check" style="color: green;"></i> for
    • <i class="fa fa-times" style="color: red;"></i> for

    Misc others used in the repo:

    Persona based icons #

    Admin Persona

    Platform administrator

    Data Analyst

    Data consumer

    Data Engineer

    Data engineer

    Topic based icons #

    Admin Persona

    Admin

    Admin Persona

    Catalog

    Admin Persona

    Clients

    Admin Persona

    Clusters

    Admin Persona

    Connectors

    Admin Persona

    Data sources

    Admin Persona

    Deploying

    Admin Persona

    Migration

    Admin Persona

    Performance tuning

    Admin Persona

    Query performance