Attached ribbons

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex">
  <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-flex-1 uk-flex uk-flex-column uk-flex-center">
      <div class="uk-width-1-1">
        <div class="uk-text-small uk-text-muted uk-text-uppercase uk-text-semibold uk-margin-small-bottom">Attached Ribbons</div>
        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding uk-border-rounded">
          
          <div class="uk-child-width-1-2@m" uk-grid>
            <div>
              <div class="uk-card uk-card-default uk-card-body uk-position-relative">
                <div class="uk-ribbon uk-position-top-left uk-margin-small-top">Default</div>
                <div class="uk-ribbon uk-ribbon-flip uk-ribbon-primary uk-position-top-right uk-margin-small-top uk-border-rounded">Primary</div>
                <div class="uk-ribbon uk-ribbon-success uk-position-center-left">Success</div>
                <div class="uk-ribbon uk-ribbon-flip uk-ribbon-danger uk-position-center-right uk-border-rounded">Danger</div>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
              </div>
            </div>
            <div>
              <div class="uk-card uk-card-default uk-card-body uk-position-relative">
                <div class="uk-ribbon uk-ribbon-warning uk-position-top-left uk-margin-small-top">Warning</div>
                <div class="uk-ribbon uk-ribbon-flip uk-ribbon-secondary uk-position-top-right uk-margin-small-top uk-border-rounded">Secondary</div>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
              </div>
            </div>
          </div>
          
        </div>
      </div>
      <div class="uk-text-mini uk-text-right">made by <b>Antonius</b></div>
    </div>
  </div>
</div>

/* Snippets style */
body { background-color: #ebebeb; }
.uk-box-shadow-remove { box-shadow: none; }
.uk-text-mini { font-size: 8px; }
:root {
  --color-white: #ffffff;
  --color-default: #6b7280;
  --color-default-hover: #4b5563;
  --color-default-active: #374151;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-active: #1d4ed8;
  --color-secondary: #6366f1;
  --color-secondary-hover: #4f46e5;
  --color-secondary-active: #4338ca;
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-success-active: #15803d;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-active: #b45309;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-active: #b91c1c;
}
/* Style */
.uk-ribbon {
  color: var(--color-white);
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
}
.uk-ribbon::after {
  position: absolute;
  content: '';
  top: 100%;  
  background-color: transparent !important;
  border-style: solid;
  width: 0;
  height: 0;
  border-color: transparent;
}
.uk-ribbon:not(.uk-ribbon-flip) {
  left: -1em;
}
.uk-ribbon-flip {
  right: -1em;
}
.uk-ribbon:not(.uk-ribbon-flip)::after {
  left: 0;
  border-width: 0 1em 1em 0;
}
.uk-ribbon-flip::after {
  right: 0;
  border-width: 1em 1em 0 0;
}
.uk-ribbon:not(.uk-ribbon-flip).uk-border-rounded {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.uk-ribbon-flip.uk-border-rounded {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.uk-ribbon {
  background-color: var(--color-default);
}
.uk-ribbon:not(.uk-ribbon-flip)::after {
  border-right-color: var(--color-default-active);
}
.uk-ribbon-flip::after {
  border-top-color: var(--color-default-active);
}
.uk-ribbon-primary {
  background-color: var(--color-primary);
}
.uk-ribbon-primary:not(.uk-ribbon-flip)::after {
  border-right-color: var(--color-primary-active);
}
.uk-ribbon-primary::after {
  border-top-color: var(--color-primary-active);
}
.uk-ribbon-secondary {
  background-color: var(--color-secondary);
}
.uk-ribbon-secondary:not(.uk-ribbon-flip)::after {
  border-right-color: var(--color-secondary-active);
}
.uk-ribbon-secondary::after {
  border-top-color: var(--color-secondary-active);
}
.uk-ribbon-success {
  background-color: var(--color-success);
}
.uk-ribbon-success:not(.uk-ribbon-flip)::after {
  border-right-color: var(--color-success-active);
}
.uk-ribbon-success::after {
  border-top-color: var(--color-success-active);
}
.uk-ribbon-warning {
  background-color: var(--color-warning);
}
.uk-ribbon-warning:not(.uk-ribbon-flip)::after {
  border-right-color: var(--color-warning-active);
}
.uk-ribbon-warning::after {
  border-top-color: var(--color-warning-active);
}
.uk-ribbon-danger {
  background-color: var(--color-danger);
}
.uk-ribbon-danger:not(.uk-ribbon-flip)::after {
  border-right-color: var(--color-danger-active);
}
.uk-ribbon-danger::after {
  border-top-color: var(--color-danger-active);
}

Information

Detailed overview of a selected code snippet

antonius

25.03.2025, 18:17:50

28.03.2025, 11:16:35

uk-border, uk-box, uk-card, uk-child, uk-container, uk-flex, uk-grid, uk-margin, uk-padding, uk-position, uk-ribbon, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!