View source for User:DoggoBit/Sandbox/Infobox/Layout

<div class="nix-wiki infobox" style="
  --infobox-color: rgb(82, 119, 195);
  --infobox-background: rgb(242, 248, 253);
  
  --infobox-border-color: var(--infobox-color);
  --infobox-border-radius: 1rem;
  --infobox-border-size: 3px;
  
  --infobox-title-color: var(--infobox-color);
  --infobox-title-size: 1rem;
  --infobox-title-weight: bold;
  --infobox-title-align: center;

  --infobox-content-size: 90%;

  --infobox-separator-size: 10px;

  --infobox-clip: {{#if: {{{clip|}}} | polygon(0 0, 100% 100%, 0 100%) | none}};
  
  border: solid 3px var(--infobox-color);
  border-radius: var(--infobox-border-radius);
  overflow-y: hidden;
">
<div class="nix-wiki infobox-header" style="
  padding: var(--infobox-border-radius);
">
<p class="nix-wiki infobox-title" style="
  color: var(--infobox-title-color);
  font-size: var(--infobox-title-size);
  font-weight: var(--infobox-title-weight);
  text-align: var(--infobox-title-align);
  margin-top: 0;
">{{{title}}}</p>
<div class="nix-wiki infobox-image">[[File:{{{image}}}]]</div>
</div>
<div class="nix-wiki infobox-separator" style="
  height: var(--infobox-separator-size);
  width: 100%;
  background-color: var(--infobox-background);
  clip-path: var(--infobox-clip);
"></div>
<div class="nix-wiki infobox-content" style="
  padding: var(--infobox-border-radius);
  background-color: var(--infobox-background);
  text-align: left;
  font-size: var(--infobox-content-size);
">
{{{content}}}
</div>
{{#if: {{{footer|}}} |
<div style="background-color: var(--infobox-background);">
<div class="nix-wiki infobox-separator" style="
  height: var(--infobox-separator-size);
  width: 100%;
  background-color: var(--infobox-color);
  clip-path: var(--infobox-clip);
">
</div>
</div>
<div class="nix-wiki infobox-footer" style="
  padding: 0 var(--infobox-border-radius) var(--infobox-border-radius) var(--infobox-border-radius);
  background-color: var(--infobox-color);
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: var(--infobox-content-size);
">
<p style="margin: 0">{{{footer|}}}</p>
</div>
|}}
</div>
</div>